分享一些前端优化方法

前端优化大都是从一些细节处理入手，细节处理好了，你的页面才能溜的一批！下面分享一些优化细节

正文

1. 把 script 放到body的最后
   浏览器渲染页面html文件是从上往下的，过程中遇到script标签时会去加载script内容并阻塞页面渲染。如果script放在前面的话，会给用户造成一种页面加载缓慢的感觉，所以script一般会放在body的最后
2. 加载css的link标签一般放在head中
   如果跟script一样放在下面的话，会出现这种情况：浏览器构建DOM树的时候没有发现css规则，所以会用默认的样式去匹配，等到最后加载到css时，又需要重新匹配一下css规则，白费力气影响性能
3. 尽量避免使用table布局
   针对table，浏览器必须对其计算多次才能渲染出来，影响性能
4. 减少DOM操作：
   (1). 如果一定要进行操作，则尽量多个操作合并在一起执行。比如我们要在页面插入100个节点，第一个想到的可能是用循环进行插入，这样就免不了频繁的DOM操作，此时我们可以用 document.createDocumentFragment() 创建一个文本片段对象，把节点都插入到这个片段去，最后再把片段插入到DOM中，这样就大大减少了DOM操作！
   (2). DOM查询的结果缓存给一个变量：如 var pList = document.getElementByClassName('p');要对其进行循环的时候把pList的长度也保存在变量中，let size = pList.length;接下来对 pList 的操作就不会频繁的进行DOM查询了。
5. 事件节流
   意思就是说减少不必要的事件触发。举个栗子，有一个输入框，我们需要监听用户输入完后做出相应的处理，那我们可以再onkeyup事件处理函数中加一个100ms定时器，如果过了100ms还没发生onkeyup的话，我们再让处理函数执行，这样就避免了用户打字比较快的时候频繁触发事件函数，如下
6. 图片懒加载
   懒加载可以让用户产生一种首页打开很快的感觉。下面有一种网页上很常见的处理：页面上如果有较大的图片时，我们可以在img的src中放一张比较模糊体积比较小的图片（自行压缩），让它更快的加载显示在页面上，然后等window.onload之后再用 js去把img的src改为清晰的原图，类似如下
   
7. 减少网络请求
   这点相信大家都知道，每次网络请求都会占用时间，带宽，性能等等。。这里就不在赘述了
8. 资源合并
   一个页面要加载多个资源时，可以把资源合并起来加载一次。比如多个script，可以用webpack或者其他打包工具把多个脚本打包起来，加载一个。
9. 避免页面发生回流（重排）和重绘
   (1). 将动画效果应用到 position 属性为 absolute 或 fixed 的元素上。因为这些元素会脱离正常文本流，所以改变它们的位置并不会影响到文本流上的其他元素，从而避免了发生回流现象
   (2). 要避免频繁操作样式，需要的话最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性