前端性能优化总结

完成一个页面请求的流程：

输入地址--> 域名解析--> 发送请求--> 后端代码运行--> 响应请求,浏览器拿到 html 代码--> 浏览器开始渲染页面,并请求页面中的资源（css、JS、img等）--> 渲染完成

每一个阶段的性能优化：

传输阶段优化：代码压缩、图片压缩、创建长链接等

后台代码优化：后台逻辑优化、先后台合理分配功能等

sql查询优化：优化数据库、优化查询语句等

响应优化：缓存、CDN加速等

渲染阶段的优化：分三个模块考虑 HTML、CSS、JavaScript（前端优化重点）

　　HTML代码优化：

　　　　避免使用frame、iframe（页面加载阻塞、onload事件阻塞等）

　　　　避免空标签、空链接 src 、href 等（即便是空地址，浏览器也会添加默认地址发送请求）

　　　　减小节点深层次嵌套（占用内存多、节点查询费劲）

　　　　减小HTML文档大小（一、减小注释空格    二、避免table布局（节点太多）  三、使用html布局，节点少）

　　　　显示指定文档字符集（若不写，浏览器会先缓存代码，再去查询合适的解析字符集。为避免机器查询消耗，需手动明确指定好）

　　　　设置图片宽高（避免回溯重构）

　　　　避免js脚本阻塞（放底部、异步加载、延迟加载、使用模块管理插件 require.js、sea.js）

 

　　CSS代码优化：

　　　　避免使用@import

　　　　优化选择器，知道选择器的执行顺序

　　　　避免使用CSS表达式（计算频繁，消耗大）缩放、滚动、乃至鼠标移动都有可能执行一次计算

　　　　了解选择器的规则，从右往左查询

　　　　避免单规则的属性选择器(.selected [href=”#index”] {color: red;}) 

　　　　避免正则选择器

　　　　移除无匹配的样式（一、缩小文件体积  二、减小索引项、提升查询速度）

　　　　

　　JS代码优化：

　　　　使用事件委托、减小事件句柄

　　　　减小DOM操做、碎片，插入一次完成

　　　　减小用JS修改页面布局

　　　　缓存查询节点（var cached = jQuery('#top');  cached.find('p.classA');  cached.find('p.classB');）

　　　　减小频繁的IO操做，合理利用cookie、localStorage、sessionStorage 等

　　　　使用微类库、或者原生JS解决问题

 

其余优化方法（与上面有重复）：

一、图片优化、压缩图片、改变图片格式类型、响应式图片（网站中最耗资源的部分）

二、用户感知性能，（预加载、减小内容、延迟加载、改变图片格式（对网站有针对性） 心理学优化）

　  即便网站真的很慢，只要不让用户觉的慢就能够。好的技术是为了更好的服务用户，因此要注重用户体验反馈。

三、恰当的文件格式，渐进式渲染功能

四、使用http/2.0(异步和链接复用、头压缩、请求反馈管线化、优雅降级HTTP1.0)
　　将优化考虑至网络层（一、减小了对程序员的干扰、二、效果显著）
　　google chrome、Mozilla Firefox 、Microsoft Edge 、Opera 都已支持HTTP/2.0
　　Internet Explorer 从IE11开始支持，但仅限于windows 10 beta

五、使用web性能工具检测， Google PageSpeed 、 云智慧监控宝 （检测完针对性修改）

六、重视CSS对性能的影响，删除无用的规则、内联关键CSS、避免@imports和Base64,
　  使用高性价比属性：好比opcity 代替 rgba()、避免重复性工做、甚至避免更换开发人员

七、总体优化意识，而不是单独的某个模块优化，有可能抓了芝麻丢了西瓜

八、网站若使用大量API,登陆、支付、定位等等，必定要监控API,不但能够及时发现错误，并且能够关联考虑优化

九、为了性能，减小没必要要的炫酷

十、构建自动化优化任务

常见错误的优化方向

一、无限使用render-blocking（不懂...）

二、盲目添加框架以获取很小的功能，而大大增长了web页面的大小，作完后再去搞优化，得不偿失

三、未优化图片、未打开Gzip

四、过度关注技术指标（页面大小、请求数量等）而忽略了用户体验指标

五、为追求差别，使用不经常使用的字体

六、框架的滥用，综合考虑是否是真的须要框架？框架是为了更好的服务用户，而不是而不是更好的服务开发人员

 

 

内容收集整理与网络，欢迎补充、指正...

参考连接：

一、【高性能前端1】高性能HTML

二、【高性能前端2】高性能CSS

三、【高性能前端3】高性能JavaScript