前端性能优化

优化目的

  • 用户角度而言,优化能够让页面,加载快、操作响应及时,体验更好
  • 服务商角度而言,优化能够减少页面请求数、减小请求所占带宽,节省资源

优化方面

速度方面

  • 资源缓存,可以减少DNS查询,减少请求次数
  • 按需加载资源,可以延迟加载/预加载
  • 减少文件大小,可以通过压缩、合并CSS,JS,IMG
  • 减少DOM数,DOM操作
  • 引入外部的CSS,JS,将JS脚本置地
  • 使用常量,抽取重复值,优化循环
  • 减少作用域链的查找,尽量少使用全局变量,避免使用eval,with
  • 减少重绘重排,可以通过设置类class统一更新样式

兼容性方面

  • 响应式布局

  • 使用百分比,而不是绝对长度

  • 使用相对字体大小em

参考文章推荐:
前端优化不完全指南
前端性能优化(JavaScript篇)
JavaScript 性能优化小记

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 围绕前端的性能多如牛毛,涉及到方方面面,以我我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列注意,是罗列不是展...
    流动码文阅读 697评论 0 0
  • AJax 优化 缓存 Ajax 请求尽量使用GET, 仅取决于cookie数量 Cookie 优化 减少Cooki...
    KeKeMars阅读 9,380评论 5 89
  • 前言 对于前端的性能话题,从来都没有断绝过。因为这个东西没有最好,只有更好。而且往往也是业务的繁杂程度去决定优化程...
    Layzimo阅读 28,472评论 2 51
  • 作者:minwe原文地址:https://csspod.com/frontend-performance-best...
    IT程序狮阅读 1,689评论 0 13
  • 原文链接:前端性能优化最佳实践版权所有,转载时请注明出处,违者必究。 注明出处格式:前端开发博客 (http://...
    蛇窝里的老鼠阅读 487评论 0 7