web网页性能优化总结

1. 对HTML、CSS、JS文件压缩，减少请求时流量传输。（如html-minifier、clean-css、ugligyjs）
2. 文件合并,减少http请求次数，但会存在首屏渲染时间变长的问题。
3. 对图片进行优化。
   3.1 png8/png24/png32 区别

png8 -- （2^8）256色 + 支持透明
png24 -- 2^24色 + 不支持透明
png32 -- 2^24色 + 支持透明

      3.2 不同的图片格式对应的使用场景

jpg 有损压缩，压缩率高，不支持透明
png 支持透明，凌岚气兼容好。
webp 压缩程度最好 但在ios webview有兼容性问题。
svg矢量图，代码内嵌先对较小，但是图片样式简单。

总结：图片为透明背景时时使用png格式的图片，对图片品质要去不高时考虑压缩成png8格式的图片。当图片为不透明时考虑使用webp或jpg优先使用webp。能找到svg图片就使用svg图片（在iconfont中找）；

      3.3 图片的使用方式

• 雪碧图：优：减少http请求数量，劣：雪碧图没有加载出来时所有引用的子图片全部无法显示，因此，合成> 雪碧图时需要注意雪碧图的大小。
• image inline:以base64为编码的形式内嵌到html中：优：减少请求数量，劣：无法复用。因此使用此方式 仅限小图标使用次数少的情况下。

4. css与js加载机制

• css阻塞
  css head中阻塞页面的渲染。
  css阻塞js的执行
  css不阻塞外部脚本的加载
• js阻塞
  直接引入的js阻塞页面的渲染
  js不阻塞资源的加载
  js顺序执行，阻塞后续js逻辑的执行

补充：延迟加载js，
defer：告诉浏览器立即下载，但延迟执行，包含的脚本将延迟浏览器遇到标签后再执行
async：不让页面等待脚本下载和执行，从而异步加载页面其他内容。异步脚本一定会在页面 load 事件前执行，不能保证脚本会按顺序执行。

5.1 当网页图片过多时使用图片懒加载。
5.2 能预见使用的图片使用图片预加载机制。

方式1: 写img标签，设置style为display:none
方式2: js中new image()对象
方式3: 使用XMLHttpRequest()请求此图片。注意存在跨域的可能性
方式4: preload库

6 重绘与回流
6.1 只触发重绘的属性：color、border-style、boder-radius、visibility、text-decoration、background...、outlint...、box-shadow
6.2 出发回流的属性：width、height、pading、margin、display、border、border-width、min-height、top、bottom、left、right、position、float、clear、text-align、font-weight、overflow、font-weight、overflow、font-family、line-height、vertival-align、white-space、font-size
6.3 利用图层分隔合理绘画回流的大小。

注意：图层的最终合成也需要渲染时间 Composite Layers time

6.4 图层的建立：

        1. 使用 3D或透视变换的css的属性。
        2. video标签会生成新图层。
        3. 用于3D(WebGL)上下文或加速2D上下文的节点，
        4. 混合节点（如flash）
        5. 对自己的opacity做css动画或使用一个动画webkit变换的元素 6.拥有加速CSS过滤的元素

6.5 常用的创建图层的方法：transform:translateZ(0)、will-change:transform。
6.6 优化点：

       1. 使用translate替代top改变
       2. 用opacity替代visibility
       3. 不要一条一条的修改样式使用class预定样式然后修改dom的classname。
       4. 把dom离线后再修改样式。比如：把dom给display:none（有一次Reflow）然后修改100次再把它显示出来。
       5. 不要把DOM节点的属性值放在循环里当场循环变量。(offesetHeight这类属性的读取会触发回流。)
       6. 不要使用table布局，一次小改动会出发整个table的重布局。
       7. 动画的速度选择始终
       8. 对动画新建图层
       9. 启用GPU加速（使用transform:translate3d(x,y,z)）

7 使用浏览器存储进行性能优化。

         cookie：主要用于存储用户状态，存储大小4k、需要设置expire、httponly属性可设置禁止js读写。
         LocalStorage:用于浏览器存储，大小5m。
         SessionStorage:会话级别的浏览器存储，大小5m。
         IndexedDB:用于存储大量结构话数据。
         CacheStorage:使用Service Worker将将文件存储到CacheStorage中，适用于离线应用。

8. 缓存

  response-header: 中关于缓存的属性：
  cache-control:  
          max-age = 35600000 (浏览器（private）文件个过期时间), 
          s-maxage=35600000(代理服务器（public）的缓存时间),
          no-cache(总是会向服务器端询问是否过期)，
          no-store(完全不缓存)
  ETage/if-None-Match: 对比文件的hash值来判断是否需要更新。        
  last-modified/if-modified-since: 对比询问服务器文件的最后更新时间；
  expires: Date (过期时间 http 1.0中的属性优先级很低)

状态码说明：

状态	类型	说明
200	form memory cache	不请求网络资源，资源在内存当中，一般脚本、字体、图片会存在内存当中
200	form disk ceche	不请求网络资源，在磁盘当中，一般非脚本会存在内存当中，如css等
200	资源大小数值	从服务器下载最新资源
304	报文大小	请求服务端发现资源没有更新，使用本地资源