现在的位置: 首页 > 综合 > 正文

web前端性能优化网络和js以及css层面优化

2019年11月15日 综合 ⁄ 共 555字 ⁄ 字号 评论关闭

  一、 网络层面优化

  减少http请求,合并资源(js、css、图片)

  减少资源体积,压缩资源(js、css、图片)

  大量数据加载或大量图片加载时使用懒加载或预加载优化

  使用按需加载,加快首屏渲染速度

  利用http缓存机制,对资源进行缓存

  网站用到很多域名时,可使用DNS预解析,提前解析域名

  使用CDN给网站静态资源加速

  二、 js 层面优化

  尽量减少DOM操作,DOM操作尽量做到批量更新,减少页面回流和重绘

  避免内存泄漏,及时清理已经没用的定时器、挂载的事件和其他引用

  合理使用事件委托,避免给大量子元素添加相同事件

  使用变量缓存多次使用的资源,避免每次使用都去获取或计算

  频繁执行的函数使用节流或防抖进行优化

  有大量数据需运算时,开启Web Worker多线程进行计算可避免js主线程阻塞

  js文件引入放置在HTML body尾部,因为js的加载、执行会阻塞页面渲染

  三 、css 层面优化

  避免使用通配符(*)

  避免选择器层级太多,提高解析匹配速度

  对于css中可继承的属性,如font-size,尽量使用继承,少一点设置

  提取公用样式增强可复用性

  css文件引入放置在HTML head头部,因为css的加载、解析并不会阻塞DOM解析,提前加载可以更快合成Render树

抱歉!评论已关闭.