性能优化

1、尽量减少HTTP请求的次数

  • 合并js
  • 合并css
  • 图片sprite

2.延迟加载内容

  • 图片的懒加载
  • 数据的懒加载(点击加载更多)
  • 功能的懒加载(曝光或者点击后html模块、js功能模块)

3.使用离线缓存
把常用的变动又少的js、css、图片储存到localstorage,第二次访问的时候直接走本地缓存。在移动端使用广泛。

4.CSS、JS放置正确的位置
把CSS放在head中,保证页面看到的样式是对的。
把JS放到body里的最后位置,防止加载JS阻塞页面。

5.静态资源压缩
图片、CSS、JS在发布前要压缩,服务端启用gzip。

6.静态资源使用多个域名
对于图片、CSS、JS、可以使用几个域名进行并发加载。

7.静态资源使用cdn储存
用户与你的网站的接近程度影响响应时间的长短。可以把静态资源内容分发到内容分发网络(Content Delivery Network ,CDN)中加快访问速度。

8.预加载

  • 在某个功能还没展开时,在空闲时间预加载相关图片或者JS代码。
  • DNS预加载(dns prefetch)

9.dom优化操作
使用JS访问DOM元素比较慢,因此获得更多的页面应用,应该做到:

  • 缓存已经访问过的元素
  • 线下更新节点之后再将它们添加到文档树中。
  • 避免使用JS来修饰页面布局,尽量减少回流和重绘。
  • 使用事件代理

10.优化算法
在JS中优化查找,排序的算法。尽量少使用嵌套循环。

11.老旧安卓机的动画优化

  • 使用transform,尽量避免回流和重绘
  • 开启移动设备硬件加速(给translateZ一个很小的值就可以了)
  • 避免一些特别消耗性能的功能,例如:box-shadow
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 性能优化方向分类 请求数量: 合并脚本和样式表, CSS Sprites, 拆分初始化负载, 划分主域(使用“查找...
    Www刘阅读 5,752评论 3 8
  • 围绕前端的性能多如牛毛,涉及到方方面面,以我我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列注意,是罗列不是展...
    流动码文阅读 3,923评论 0 0
  • H5性能优化方案 H5性能优化意义 对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环。原...
    自然心情阅读 12,442评论 0 14
  • 1. 尽量减少HTTP请求次数 合并js 合并css 图片sprite 2. 延迟加载内容 图片懒加载 数据懒加载...
    Aleph_Zheng阅读 9,674评论 0 4
  • 11.16玉民日志 1.6:30起床 2.7:00-8:00晨跑 3.9:00-21:00工作 4.22:40-2...
    Mr玉民阅读 1,800评论 0 0