性能优化

思路

原则

• 多使用内存、缓存或其他方法

• 减少CPU运算，减少网络请求

从哪里入手

• 加载页面和静态资源

• 页面渲染

细分说说

加载资源优化

• 静态资源的压缩合并（自动化工具）

• 静态资源缓存

• 使用CDN

• 使用SSR后端渲染

渲染优化

• CSS放前面，JS放后面

• 懒加载（图片懒加载，下拉加载更多）

• 减少DOM查询，对DOM查询做缓存

• 减少DOM操作，多个操作尽量合并在一起执行

• 事件节流

• 尽早执行操作（如DOMReady）

例子分析

缓存

• 通过链接名称控制缓存

  <script src="abc_1.js"></script>

  内容没改变时，名称没有变名字，浏览器就会调用缓存。

懒加载

一开始图片是显示小图，等真正需要用的时候，再加载真实的图片。

或者说，一开始先显示默认图片，再慢慢把真实的图片渲染到页面。

<img id="img1" src="preview.png" data-realsrc="abc.png"><script>    var img1 = document.getElementById(("img1");    img1.src = img1.getAttribute("data-realsrc");</script>

缓存DOM查询

其实就是DOM查询赋给变量，以及不在循环中进行DOM查询。

// 未缓存DOM查询var i;for(i=0; i<document.getElementsByTagName('p').length; i++){    // 逻辑代码块}// 已缓存var pList =  document.getElementsByTagName('p');var i;for(i=0; i<pList.length; i++){    // 逻辑代码块}

合并DOM插入

知识点，DOM碎片Fragment
把内容先插入到碎片，再一次过把碎片插入到元素里，最终显示出来。

但其实对性能提升不怎么明显。

事件节流

当操作很快的时候，例如打字，我们没有必要时时刻刻去触发事件，可以稍晚一点才去触发。