前端优化

2016/12/21 javascript

前端优化有哪些点

减少http 请求(雪碧图, 文件合并)

  CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,
  该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。

Q: 什么是CSS Sprites(雪碧图)?

缓存

 使用缓存可以减少向服务器的请求数,节省加载时间,
 所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)。
 1. 缓存一切可缓存的资源
 2. 使用长Cache(使用时间戳更新Cache)
 3. 使用外联式引用CSS、JavaScript

文件压缩

  1. 开发生成的js、css文件进过压缩后去掉注释,空格等,减少http请求资源。
  2. 启用gZip压缩。

Q: windows如何启用gZip压缩?

减少DOM节点

  每多一层,页面在渲染的时候,查询就会多一层,影响效率。

无阻塞

- css写在文件开头部分用<link />的方式引入。  
- 尽量不在页面中通过style的方式添加样式。  
- js的引用写在文件底部。

避免跳转

 在链接最后面都加上 '/' 反斜杠,比如: http://www.wolongdata.com/news/

避免压缩

  如果图片需要100*100这样大的,就不要用一张大小为500 * 500的,然后压缩成100 * 100大小的。

按需加载

1. 懒加载。
2. 滚动加载。
3. 通过Media Query加载。

参考文献

动画优化要点总结

  • 执行动画尽量使用CSS3 keyframes和 trainsition
  • 如果需要JS执行动画,使用requestAnimationFrame,或者Velocity,避免使用jQuery动画,setTimeout,setInterval。
  • js动画的优点是,我们能随时控制开始,暂停,停止,而CSS不行。缺点是没办法像css这样优化,因为js动画是在主线程上跑的。
  • 动画尽量使用transform,opacity,尽量避免left/padding/background-position等
  • 尽量避免不必要的动画发生(废话)点击这里
  • 尽可能的为产生动画的元素使用fixed或absolute的position
  • 阴影渐显动画尽量用伪类的opacity来实现。点击这里
  • 使用3D硬件加速提升动画性能时,最好给元素增加一个z-index属性,人为干扰复合层的排序,可以有效减少chrome创建不必要的复合层,提升渲染性能,移动端优化效果尤为明显。(来自前端农民工)
  • 使用Chrome Timeline工具检查
  • 时刻把浏览器处理流程记在心里

参考文档——前端性能优化之更平滑的动画

参考文档——移动端css3提高动画性能探讨

搜索

    目录

    更多最新信息,欢迎关注公众号

    👇🏻

    公众号二维码
    扫码关注「前端知识总结」公众号