性能优化

渲染优化

1，资源加载位置

    a，CSSOM与DOM是并行的，加载不会引起阻塞，但是Render Tree 依赖DOM Tree与CSSOM Tree,所以css必须优先加载，css放置与head中

    b，js文件会引起DOM Tree的形成，造成页面渲染阻塞，因此，js要放置body底部

2，按需加载

3，使用预加载

    a，preload，提前加载资源，在需要使用的时候在使用

<link   rel='preload' href="xxxx.css" />
<link   rel='preload' href="xxxx.js" />

    b，prefetch，告诉浏览器未来可能会使用的资源，浏览器会在闲时加载资源


<link   rel='prefetch' href="xxxx.css" />
<link   rel='prefetch' href="xxxx.js" />

4，懒加载

5，异步加载资源

    a，async（异步） 一旦下载完，渲染引擎就会中断渲染，立即执行代码

<script  async  src="xxxx.js" />

 

    b，defer （延迟）正常渲染完毕后 在执行

<script  defer  src="xxxx.js" />

 

 6，服务器渲染

 

 

 请求优化

 1，减少请求

 2，图片优化

      a，雪碧图

      b，base64

      c，字体图标替代

3，使用缓存

      a，强缓存，没到时间使用本地缓存，200

      b，协商缓存，服务器对比，若无改变获取本地缓存，304

 4，使用CDN

 5，灵活使用cookie以及web Storage

 

 

 

打包优化

1，压缩

    a，html压缩，将界面不显示的无用字符去除

    b，css压缩，删除无效代码

    c，js压缩及混乱，无效字符和注释代码删除，语义化代码的缩减

    d，图片压缩

2，开启gzip

3，公共代码合并

4，剔除无效定义（有定义没有使用）

5，使用chunkhash，chunkhash是在局部发生变化时会更改局部的chunkhash，而不影响其他的缓存

 

 

 

 

 其他

1，减少重绘回流

重绘：字体颜色背景颜色等不改变布局的样式发生变化

回流：布局发生变化

    a，尽量不适用css表达式，在不恰当的位置使用css表达式，会导致计算频率非常频繁

    b，尽量使用css动画来实现效果而不要使用js实现

    c，js操作时使用批量操作，不然每次操作都会导致重绘回流一次

    d，通过class样式修改样式，

 

  2，使用事件代理，将多个节点的事件代理至父元素，减少内存消耗

  3，防抖与节流

     a，防抖，指在一定时间内重复触发事件时，我们希望只触发最后一次，案例：定时器防抖

     b，节流，指在一定时间内重复触发事件时，我们希望在一定间隔内，只触发一次，案例：滚动条触发事件