前端性能优化总结

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

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

每个阶段的性能优化:

传输阶段优化:代码压缩、图片压缩、建立长连接等

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

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

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

渲染阶段的优化:分三个模块考虑 HTML、CSS、JavaScript(前端优化重点)

  HTML代码优化:

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

    避免空标签、空连接 src 、href 等(即使是空地址,浏览器也会添加默认地址发送请求)

    减少节点深层次嵌套(占用内存多、节点查询费劲)

    减少HTML文档大小(1、减少注释空格    2、避免table布局(节点太多)  3、使用html布局,节点少)

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

    设置图片宽高(避免回溯重构)

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

  CSS代码优化:

    避免使用@import

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

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

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

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

    避免正则选择器

    移除无匹配的样式(1、缩小文件体积  2、减少索引项、提高查询速度)

    

  JS代码优化:

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

    减少DOM操作、碎片,插入一次完成

    减少用JS修改页面布局

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

    减少频繁的IO操作,合理利用cookie、localStorage、sessionStorage 等

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

其他优化方法(与上面有重复):

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

2、用户感知性能,(预加载、减少内容、延迟加载、改变图片格式(对网站有针对性) 心理学优化)

   即使网站真的很慢,只要不让用户觉的慢就可以。好的技术是为了更好的服务用户,所以要注重用户体验反馈。

3、恰当的文件格式,渐进式渲染功能

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

5、使用web性能工具检测, Google PageSpeed 、 云智慧监控宝 (检测完针对性修改)

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

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

8、网站若使用大量API,登录、支付、定位等等,一定要监控API,不但可以及时发现错误,而且可以关联考虑优化

9、为了性能,减少不必要的炫酷

10、构建自动化优化任务

常见错误的优化方向

1、无限使用render-blocking(不懂...)

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

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

4、过分关注技术指标(页面大小、请求数量等)而忽略了用户体验指标

5、为追求差异,使用不常用的字体

6、框架的滥用,综合考虑是不是真的需要框架?框架是为了更好的服务用户,而不是而不是更好的服务开发人员

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

参考链接:

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

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzpxjs.html