由于前端页面绝大部分资源都是从服务器读取，而且受浏览器限制，分配的计算机资源相对较少。。页面的加载速度和性能往往受到影响。而前端页面的性能优化就变得至关重要。
非主流，先上参考（怕忘记了）。。
知乎：https://www.zhihu.com/question/21658448
csdn: http://blog.csdn.net/mahoking/article/details/51472697
这个两个参考文献都说的非常好，为了巩固自己学习和记录。就稍稍总结下吧~~
网络方面
我之前的一篇文章已经说到，http作为无状态协议，每次请求都要建立连接和断开连接。耗费的资源相当昂贵。所以要提升网页的加载速度就要从这个方面入手！！
- 要提升加载速度，最简单直接的方法就是减少请求。把多个js文件、css文件等合并成一个js文件、css文件。多个小图片做成雪碧图，或者base64编码加在css中，简单暴力。
- 利用浏览器缓存，浏览器如果曾经访问过某页面某资源，浏览器可以利用缓存读取对应的文件，而不去发送
请求。参考我上一篇文章。
合并和缓存有时候是一对矛盾，一般来说公用的资源（例如，Jq等公共库）都不会选择与其他非公用资源合并来减少http请求，因为这样不能很好的利用浏览器缓存。
- 静态资源放在cdn上，能够有效的减少资源与浏览器的物理距离，用户请求资源时，cdn能够寻找最优的服务器为用户分配资源。
-
dns缓存。在实际请求cdn等信息前先进行dns缓存。能够有效加快请求时间。
在实际请求前，先在head标签中加入link标签。先缓存dns。。
dns-prefetch
- 反向代理（负载均衡），可以缓存数据，减少服务器压力。
- gzip压缩减少代码大小。
- 懒加载，对于没有在首屏出现的图片实现懒加载（lazyload插件），未使用的js也可以实现懒加载（seajs，webpack）。
代码方面
- script标签后置，众所周知，script的执行会阻塞浏览器渲染进程（js进程与渲染进程是互斥的！）。所以，一般来说，script都放在body闭合标签的前面。让浏览器先渲染，用户就可以先可以看到视图！！
- 减少dom操作，或尽量批量操作，dom操作非常耗费资源！！！应该减少或尽量一次完成！（react的虚拟dom之所以比传统的模板引擎快，就是减少了不必要的dom操作！！！）
- 进行dom操作时，考虑Reflow & Repaint。减少回流（reflow），这个回流的成本非常大。往往会影响其他区域的布局。重绘则只影响本身。动画使用的时候尽量用css3动画（必要时gpu加速），和transform，absolute等不会导致回流的方法！！
原理：浏览器接收到页面文档后，会将文档中的标记语言解析为DOM树。DOM树和CSS结合后形成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素，每一个渲染元素会被分到一个图层中，每个图层又会被加载到GPU形成渲染纹理，而图层在GPU中 transform
是不会触发 repaint 的，这一点非常类似3D绘图功能，最终这些使用 transform
的图层都会由独立的合成器进程进行处理。著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。原文: http://www.w3cplus.com/css3/introduction-to-hardware-acceleration-css-animations.html © w3cplus.com
- 多次访问对象的一个属性或数组的一个元素时，建议将数据放入局部变量；
- 在javascript中使用"+"进行字符串拼接，效率会比较地下。因为每次运行都会开辟新的内存并生成新的字符串变量，与之相比的有数组的join方法。这个方法的相对来说更为高效，但数组也会有一定的开销。所以当字符串拼接较多的时候使用Arrary.prototype.join()方法，否则使用"+";
- css，实际上浏览器对选择符的解析是从右往左进行的。根据浏览器的这一行为特点，在写选择符的时候需要注意很多事项，
- 减少作用域链闭包的查找，在很深的作用域链内使用多次使用全局变量时，可以先把全局变量先保存在局部作用域中并。
网友评论