阅读 1158

前端性能优化方案

一、HTTP层面网络层优化

  • 减少HTTP请求次数
  • 减少DNS解析次数,如果非要多次解析,使用 DNS Prefetch
  • 静态资源文件一定要使用强缓存「Expires / Cache-Control」和 协商缓存「Last-Modified / ETag」
  • 资源文件的压缩「可以基于webpack打包压缩,而且服务器端一定要开启GZIP压缩{这个可以把资源压缩60%左右}」
  • 资源文件的合并「可以基于webpack打包合并,目的是减少页面中的HTTP请求次数」
  • 客户端尽可能减少对cookie的存储,因为每一次向服务器发送请求,都会自动把cookie基于请求头传递给服务器,如果cookie设置过多,每一次和服务器通信都会变慢「使用localStorage代替cookie」
  • 对于一些静态资源,可以使用CDN加速
  • 基于Connection: keep-alive建立TCP的持久链接,实现通道复用
  • 使用HTTP2.0进行数据传输
  • 对于图片使用BASE64
  • 使用CSS Sprit,把多张小图合并为一个大图,只请求一次资源,可以减少HTTP请求次数
  • 客户端和服务器之间的数据通信,尽可能使用JSON格式

二、渲染页面的时候

  • 坚决不用 @import 导入样式
  • 尽量使用CSS3动画,如果非要使用JS实现动画,最好使用requestAnimationFrame
  • 避免过深的DOM层级嵌套「加快DOM TREE的生成 && 有利于SEO优化」
  • 避免CSS选择器前缀过长「加快CSS TREE的生成」
  • 减少DOM的重排「读写分离、元素批量操作{使用文档碎片等方案}、修改样式使用transform、运动的元素放在单独的文档流中、 尽可能减少直接操作DOM,使用MVVM/MVC数据驱动框架...」
  • link置于页面顶部,提前获取CSS资源;JS处于页面底部,因为它会阻碍GUI的渲染;或者JS导入采用async/defer;
  • 页面样式较少的情况下,尽可能使用内嵌样式,减少HTTP请求,加快渲染「移动端首选方案」
  • 使用字体图标或者SVG矢量图代替位图「位图:jpg/jpeg/png/gif...都是位图 字体图标或者矢量图除了一定程度上减少了HTTP请求、而且对于图片的渲染和自适应尺寸的调整都有很大帮助」
  • 减少页面中iframe的使用
  • 图片使用webp格式
  • 基于IntersectionObserver代替传统的window.onscroll
  • CSS中减少对filter的使用
  • 避免使用TABLE布局

三、代码运行

  • 尽可能使用事件委托「事件委托性能很高、减少很多内存的消耗、可以给动态渲染的元素做事件绑定...」
  • 合理使用闭包「闭包会引发不释放的栈内存,过多使用内存消耗大,还可能导致内存泄漏或者栈溢出等」
  • 减少对递归的使用「尤其是一定要避免死递归,这样会导致栈溢出」
  • 对于页面交互操作,采用防抖和节流处理
  • 页面中尽可能使用异步编程,对于数据的请求也尽可能分批请求处理「例如:点击加载更多、下拉刷新、上拉加载、分页...」
  • JS代码中不要使用:with,减少对eval的使用
  • 避免出现死循环,嵌套循环会导致算法的时间复杂度过高
  • 低耦合高内聚
  • 手动回收堆栈内存

四、额外方案

  • 前后端通信,尤其是实时通信{IM即时通信系统,例如:QQ和微信...},可以使用scoket.io等最新的通信技术
  • 采用骨架屏技术「前端骨架屏{升级版的loading,最开始只展示灰色的框框等,也不去加载资源,这样页面渲染出来速度会很快,减少白屏时间...} 和 服务器骨架屏{SSR 首屏信息是服务器渲染的,其余屏幕的信息是客户端渲染的}」
  • 音视频资源一定要延后加载,等到页面其它资源都渲染完了,播放音视频的时候再去加载「对于默认播放的效果,也要延后播放」; 也可以让音视频资源采用直播流的方式播放「直播流的后缀.m3u8」
  • 图片懒加载,加快页面第一次渲染的速度,减少白屏等待时间
文章分类
前端
文章标签