前端性能优化的那点事

前端性能优化可以分为：服务器优化、网页内容优化、cookie优化、CSS优化、JavaScript优化、图片优化这六个方面

1. 服务器优化措施
使用CDN内容分发网络-----就近获取资源
添加expires或者cache-control报文头（缓存角度，参考：https://blog.csdn.net/Qian_mos/article/details/84795426）
配置Etags（缓存角度，参考：https://blog.csdn.net/Qian_mos/article/details/84795426）
利用gzip压缩传输文件----减少文件大小，缩小传输请求时间
使用get完成ajax请求----post请求会向服务器发送两次，一次是请求报头，一次是正文数据。get只一次，请求效率高。
避免空的图片src----属性为空时浏览器仍然会加载空内容直至加载失败，这样还是会阻塞其他资源的下载进程，会做无效功。需要避免。
2. cookie优化
减少cookie大小----http请求默认会带上cookie一起发送至服务器，减少cookie有利于请求效率提高。
3. 网页内容优化措施
减少http请求次数----http请求每次需要建立TCP三次握手链接，这会比较耗时。
减少DNS查询次数，使用DNS缓存----DNS查询比较耗时，大约会需要20ms，在这个过程中浏览器啥都不会做，若是查找很多网页性能就会大打折扣。
缓存ajax----减少资源请求时间，可从缓存中读取
延迟加载（懒加载）-----减少http请求次数，缓解前端服务器的压力，符合条件时再加载图片，如当页面滚动到图片位置时再加载图片。
提前加载-----提前加载图片，网站用户体验较好，但若加载资源过多会比较耗费前端服务器的性能，需要根据实际决策
减少DOM元素数量----构建解析DOM数比较耗时
减少iframe数量-----iframe内的资源加载速度比较慢有可能阻塞父页面的资源下载和DOM解析
避免404
3. 图片优化措施
优化图像（比较大的图片在不同的终端应该使用不同的分辨率，不应该进行缩放）
使用CSSspirite----减少请求资源次数
不要在HTML中缩放图片—减少重绘重排
4. CSS优化措施
将样式表置于body前----浏览器请求到资源后，会构建DOM数，然后利用CSS文件，构建render渲染数将页面呈现出来。样式表置顶有利于渲染数构建
避免使用CSS表达式------CSS表达式使得页面渲染速度变慢
用代替@import----@import属于CSS语法，需要做兼容，import使得资源之间有依赖，在资源加载时会以队列形式进行加载，使得加载速度变慢。
5. JavaScript优化措施
将脚本置于body底部----避免加载JS文件时延迟了DOM数的重构和CSS渲染
使用外部JS文件和CSS
去除重复脚本
减少JS对DOM的操作-----会引起重排重绘，参考：https://blog.csdn.net/Qian_mos/article/details/85687981
6. JavaScript代码优化
慎用with
避免使用eval和Function构造函数-----1>脚本引擎需要将字符串表示 的源代码转化为可执行代码比较耗时;2>eval函数执行效率低，对于eval中的源代码编译器无法优化上下文，只能在运行时编译解释代码；3>都不利于JS压缩工具进行压缩
减少作用域链的查找-----局部作用域变量查找较全局作用域变量速度快

参考资料：http://m.sohu.com/a/239395020_465223?strategyid=00014
https://www.jianshu.com/p/ead7dab72cd6?mType=Group