HTML5教程

前端性能优化

本文主要是介绍前端性能优化,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

页面方面:

  图片采用懒加载;

  使用雪碧图;

  字体图标;

CSS:

  使用translate来创建动画;

  使用link而不是@import引用;

  移除不必要的css样式;

JS:

  引用js时放到页面的body结尾前,避免js文件过大造成首屏加载空白时间过长;

  引用js使用defer和async异步加载;

  避免过多的操作DOM元素;

  使用事件委托;

  使用节流和防抖;

其他:

  因为浏览器限制HTTP请求数为5到6个,所以尽量合并请求,减少请求的并发数量;

  使用HTTP2协议,可以无视请求的限制;

  服务器开启gzip压缩页面、CSS、js的体积;

  合理的使用localStorage、sessionStorage缓存、ajax缓存和浏览器强缓存以及缓存失效后的协商缓存;

这篇关于前端性能优化的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!