前端开发性能优化方案

javascript 文章 2022-07-21 17:40 351 0 全屏看文

AI助手支持GPT4.0

 

JS书写需注意的点

一、JS书写过程中减少对闭包的使用

  原因:闭包会产生不释放的栈内存

  替代方案:1,循环给元素做事件绑定的时候,尽量把后期需要的数据(如:索引)绑定到元素的自定义属性上,而不是创建闭包存储

       2,可以在最外层创建一个闭包,把需要的数据进行存储,而不是一个方法创建一个闭包(如:单例模式)

          3,手动释放不被占用的内存

二、避免“嵌套循环”

  原因:会额外增加循环次数和死循环

三、尽量使用事件委托,减少DOM的频繁操作

四、页面中数据尽量采用异步编程和延迟分批加载

  异步编程:减少HTTP通道阻塞,而导致页面加载不出来

  延迟加载:减少首次加载的HTTP请求次数

五、尽量封装JS方法(低耦合高内聚),减少冗余代码

六、减少使用eval,代码压缩后,可能出现符号不完善的问题

七、尽量使用设计模式来管理代码(单利、构造、Promise、发布订阅)

css书写需注意的点

一、减少css表达式的使用

二、减少选择器的层级,尽量控制在3个层级

  css选择器解析规则是从右到左解析

  减少标签选择器的使用

三、css导入时减少使用@import,因为@import是同步操作,等导入的内容加载完才会像下渲染,link是异步操作

四、静态资源放置顺序

  css放在header内,js放在body最下面

  能用css,就不用js,能用原生js就不用插件

  css处理动画的性能优于js,而且css中的transform浏览器会开启“硬件加速”

DOM书写需注意的点    

二、减少HTTP请求次数

  1,静态资源进行打包压缩(webpack构建工具)

  2,图片尽量合成雪碧图,或者图片base64

  3,icon可以使用iconfont或者svg图片

  4,如果极其要求高性能,可以使用内嵌css和js,减少HTTP请求

  5,利用localstorage本地存储

三、减少DOM的重绘和回流

  1,回流的分离读写

   2,使用文档碎片/字符串拼接动态创建DOM

四、采用图片“懒加载”

  目的:减少页面第一次加载中http的请求次数

  步骤:页面开始加载,用占位图占位,当页面加载完,图片在可视区内再去发送http请求

五、减少cookie的使用

六:音视频资源设置(preload=‘none’),播放时再加载

七、避免使用iframe

八、script引用 添加defer / async 异步加载

九、服务器端渲染

浏览器及服务器注意的点

一、利用浏览器和服务器的缓存技术(304缓存)

  把不频繁更新的静态资源做缓存处理(如:JS、CSS、Image)

  原理也是减少HTTP请求次数

二、CDN加速

三、开启服务端的gzip压缩(减少请求资源文件大小)

-EOF-

AI助手支持GPT4.0