静态资源在传输方面通用优化就是压缩体积，减少加载时间，
还涉及到http协议和浏览器并发连接限制，如果升级到HTTP2，这些就是降维打击了。
另外重点就是利用浏览器缓存
最后就是具体的使用到资源自身的优化手段。

1 HTML

  • 压缩
  • 减小iframes使用（iframe会阻塞onload）事件，必要时可动态加载
  • 压缩空白符，删除注释
  • 减少HTML嵌套关系，减少DOM节点数量
  • 避免 table 布局
  • CSS/Javascript尽量外链
  • 提前声明字符编码，让浏览器快速确定如何渲染内容
  • 语义化编码，是代码结构清晰，利于搜索引擎

    2 CSS

3 IMG

参考：
MDN
前端性能优化之图片优化

3.0 使用

避免空src的图片
img标签设置alt属性，提高加载失败时的用户体验
设置图片的宽高，防止reflow

3.1 格式

常用的web图片格式有：JPEG/JPG、PNG、WebP、Base64、SVG
如蓝湖支持的图片导出格式：
image.pngimage.png

3.2 懒加载

3.2.1 原生支持

  1. <img src="./example.jpg" loading="lazy" alt="zhangxinxu">

兼容性等存在问题，参考
浏览器IMG图片原生懒加载loading=”lazy”实践指南（张鑫旭）

3.2.2 js实现

react-lazy-load-image-component

3.3 渐进式图片(Progressive JPEGs)

Baseline JPEG和Progressive JPEG的区别：一个由上而下渲染，一个先模块后清晰，
可以在ps导出是设置
参考：https://www.jianshu.com/p/e1b9d9aa9fc0
image.png

3.4 响应式图片

  1. <img srcset="foo-160.jpg 160w,
  2.              foo-320.jpg 320w,
  3.              foo-640.jpg 640w,
  4.              foo-1280.jpg 1280w"
  5.      sizes="(max-width: 440px) 100vw,
  6.             (max-width: 900px) 33vw,
  7.             254px"
  8.      src="foo-1280.jpg">

3.5 使用base64Url减少请求

缺点是转成base64,体积变大，所以适合小图标，比如webpack默认小于8Kb才会转成base64

3.6 使用雪碧图合并图标

减少图片请求，在http2协议下可以放弃了，大型网站静态资源都升级到http2了

4 JS

5 font

点击查看【codepen】

  1. @font-face {
  2.   font-family: Alibaba-PuHuiTi-Medium;
  3.   src: url('./Alibaba-PuHuiTi-Medium.otf') format('truetype');
  4. }
  6. h2 {
  7.   font-family: Alibaba-PuHuiTi-Medium;
  8. }

如果使用第三方字体，浏览器会等到该字体文件加载完成后再去渲染相关文字，而该字体文件体积越大，首次加载越缓慢并且会阻塞页面文字的渲染。
解决：

  1. 减小字体资源体积

    1. 文字预渲染：font-display: swap
      3. 字体预加载：
      1. <link rel="preload" href="/static/Alibaba-PuHuiTi-Medium.otf" as="font" type="font/otf" crossorigin>

6 网络优化

  1. 减少http请求数，合并js/css/img, 合理内嵌js/css
  2. 合理设置服务端缓存，提高二次加载速度
  3. 避免重定向
  4. 使用dns-prefetch, 进行dns预解析

image.png

  1. 采用域名分片技术，解决浏览器同域名限制6个并发问题
  2. 采用CDN加速
  3. 开启Gzip：

一般nginx会对静态文件Gzip压缩，但是也有要求，大小要大于1Kb，效果才好
image.png
某个项目，就发现这个情况，不会启用Gzip

最后,，nginx 服务器对 gzip 的配置项中，有一项是：gzip_min_length， 用来配置启用 gzip 压缩文件的最小体积。因为 gzip 压缩对原本体积就很小的资源文件压缩的效果也并不好，甚至可能出现使用 gzip 压缩体积很小的文件，压缩后的体积反而比压缩之前更大。所以通常会设置 gzip_min_length 1k，只有文件的体积超过了 1k，服务器才启用 gzip 压缩此文件。

  1. 加载数据优先级：preload（预先请求当前页面需要的资源）prefetch（将来页面要用到的资源）将数据缓存到http缓存中