前端开发性能优化方案

用户52915035941
159 阅读7分钟

主要以下几类：

1、减少http请求和请求大小

2、代码优化

有利于SEO

有利于扩展维护

有利于减少性能消耗

3、DNS及http通信方式的优化

  • 1、在js中尽量减少闭包的使用（闭包会产生不释放的栈内存）
    • 循环给元素做事件绑定的时候，尽可能的把后期需要的信息（比如索引）存储到元素的自定义属性上，而不是创建闭包存储
    • 可以在最外层形成一个闭包，把一些后续需要的公共信息进行存储，而不是每一个方法都创建闭包（例如单例模式）
    • 尽可能的手动释放不被占用的内存
  • 2、尽量合并css和js文件（把需要引入的css合并为一个，js也是合并为一个），原理是在减少http请求次数，尽可能的把合并后的代码进行压缩，减少http请求资源的大小
    • webpack这种自动化构建工具，可以帮我们实现代码的合并和压缩（工程化开发）
    • 在移动开发（或者追求高性能的pc端开发【百度首页】），如果css或者js不是需要很多，可以选择把css和js编程内嵌式（就是代码直接写在html中）
  • 3、尽量使用字体图标或者svg图标，来代替传统的png等格式的图片（因为字体图标等是矢量图配【基于代码编写出来的】，放大不会变形，渲染速度快，相对比位图要小）
  • 4、减少对dom的操作（主要是减少dom的重绘和回流）
    • 关于重排的分离读写
    • 使用文档碎片或者字符串拼接做数据绑定（dom的动态创建）
  • 5、在js中避免“嵌套循环”（这种会额外增加很多循环次数）
  • 6、采用图片的“懒加载”（延迟加载），目的是为了减少页面第一次加载过程中HTTP的请求次数
    • 开始加载页面的时候，所有的真实图片都不去发送http请求，而是给一张占位的背景图，当页面加载完，并且图片在可视区域内再去加载图片
  • 7、利用浏览器和服务端的缓存技术（304缓存），把不常更新的静态资源文件做缓存处理（例如：js，css，静态图片等都可以做缓存），原理也是为了减少http请求次数和请求大小
  • 8、尽可能使用事件委托（事件代理）来处理事件绑定的操作，减少dom的频繁操作，其中包括给每一个dom元素做事件绑定
  • 9、尽量减少css表达式的使用（expression）
#myDiv {
    position: absolute;
    left: expression(document.body.offsetWidth - 100 + 'px');
    top: expression(document.body.offsetHeight - 100 + 'px');
}
  • 10、css选择器解析规则是从右向左解析
.container .link a {} // 先找到所有的a，再筛选是在.link样式类中的，再次筛选在.container样式类中的...（先找到所有的a操作起来是消耗性能的，在使用css选择器的时候尽可能减少对标签选择器的使用）
  • 11、css雪碧图技术（css sprite / css图片精灵）
    • 把所有的相对较小的资源图片汇总到一张大图上，后期只需要加载大图，用背景定位的方式展示对应的小图即可
.bg {
    background: url('xxx.jpg');
}
.box1 {
    background-position: xx yy;
}
.box2 {
    background-position: xx yy;
}
<div class="bg box1"></div>
  • 12、 减少对于cookie的使用（最主要的是减少本地cookie存储内容的大小，因为客户端操作cookie的时候，这些信息总是在客户端和服务端之间传来传去）
  • 13、页面中的数据获取采用异步编程和延迟分批加载
    • 使用异步获取数据，是为了降低http通道的阻塞，不会因为数据没有请求回来耽误下面信息的渲染，提高页面的打开速度（需要动态绑定数据的区域先隐藏，等数据返回并且绑定完成后再让其显示）
    • 延迟分批加载类似于图片懒加载，是为了减少第一次页面加载的时候http的请求次数
  • 14、页面中出现音视频标签，不让页面加载的时候就去加载这些资源（页面加载速度会变慢）方案：只需要设置preload='none'即可，等待页面加载完成，音视频播放的时候再去加载音视频资源
  • 15、在客户端和服务端进行信息交互的时候，对于多项数据尽可能基于JSON格式来进行传送（JSON格式的数据处理方便，资源偏小，相对于XML格式的传输才会有这个优势）
  • 16、尽可能实现js的封装（低耦合高内聚），减少页面中的冗余代码（减少http请求资源的大小）
  • 17、css中设置定位后，最好使用z-index改变盒子的层级，让所有的盒子不在相同的平面上，这样后续处理的时候，性能有一点点的提高
  • 18、在基于ajax的get请求进行数据交互的时候，根据需求可以让其产生缓存（这个缓存不是304缓存），这样下一次从相同地址获取的数据是上一次的缓存
  • 19、尽量减少对于filter滤镜属性的使用（这个属性消耗性能较大）
  • 20、在css导入的时候尽量减少使用@import导入式，因为@import是同步操作，只有把这个对应的css导入，才会向下加载，而link是异步操作
  • 21、配置ETag（类似304缓存）
  • 22、使用window..requestAnimationFrame（js中的帧动画）代替传统的定时器动画
  • 23、减少递归的使用，避免死递归，避免由于递归导致的栈内存嵌套（建议使用尾部递归）
  • 24、避免使用iframe（不仅不好管控样式，且相当于在页面中加载了其他页面，消耗较大）
  • 25、利用h5中提供的localStorage本地存储或者是manifest离线缓存，做一些信息的本地存储，下一次加载页面的时候直接从本地获取，减少http请求次数
  • 26、基于script调取js的时候，可以使用defer或者sync来异步加载
  • 额外方案：
    • 把css放到body，把js放到body下面（让其先加载css再加载js。先加载css是为了保证页面渲染过程中元素是带着样式渲染的，而js一般都是用来操作DOM元素的，需要等到元素加载完再操作）
    • 能用css搞定的绝对不用js；能用原生js搞定的绝对不用插件；绝对不使用flash（除了音视频的低版本浏览器播放）css处理动画等功能的性能优于js，而且css中的transform还开启硬件加速
    • 做CDN加速（CDN：地域式服务器分布，在热门地域附近设置服务器机组，用户访问的都是离其最近的机组【提高访问速度】）
    • 避免重定向（301/302）
    • js中尽量减少对eval的使用，因为js合并压缩的时候，可能出现由于符号不完善导致的代码执行优先级错乱问题，eval性能偏大
    • 使用keep-alive实现客户端和服务端的长连接
    • 尽量使用设计模式（单例，构造，promise，发布订阅）来管理代码，方便后期的升级和维护
    • 开启服务器端的gzip压缩（这个压缩可以有效减少请求资源文件的大小），压缩客户端的图片也进行压缩（24位的位图，压缩可能会模糊）
    • 页面不要出现无效的链接（利于SEO优化），img要加alt，设置meta标签，标签语义化也有利于关键字曝光率
    • for循环处理
for(var i=ary.length;i>=0;i--) {}
for(var i=0,len=ary.length;i<ary.length;i++) {}
avatar
文章
阅读
粉丝