前端常见的性能优化
前端常见的性能优化
1.减少HTTP请求次数和请求的大小
- 雪碧图(图片精灵)
- 图片base64 (webpack中可以配置)
- 尽量使用字体图标或者SVG等矢量图
- 减少HTTP请求次数或者减少请求内容的大小
- 渲染更快:因为它们是基于代码渲染的,而对于位图(png/jpg/gif)是需要先把图片编码再渲染
- 不容易失真变形
- 图片懒加载(延迟加载)
- 音频取消预加载
- preload = ‘ none‘ 这样可以增加第一次渲染页面的速度,当需要播放的时候在加载
- 再客户端和服务器进行信息交互的时候,对于多项数据我们尽可能基于json格式来进行传送(XML格式要比JSON格式要大)
- 用WebSocket代替ajax轮询实现消息推送
- 把页面中的css/js/图片等文件进行合并压缩
- 争取css和js都只能导入一个(webpack可以实现自动合并压缩)
- 对于图片自己找工具先压
- 还可以使用服务器的gzip压缩
2.建立缓存机制
- DNS缓存
- 把不经常更改的静态资源做数据缓存(一般做的是304或者ETAG等协商缓存)
- 强缓存和协商缓存(304)
- 离线存储(manifest)
- 有钱就做CDN (地域分布式服务器),还有一个财大粗气的方式:加服务器
- 建立TCP长连接
- ....
3.代码上的优化
减少DOM的重绘与回流
再js中减少闭包的使用
1.栈溢出:死递归 function func(){ func() } func() //不断自己执行自己 解决方法: function func(){ setTimeout(func,0); } func()//利用了异步操作的特性 2.相互引用:引用类型之间的相互调用,形成嵌套式内存 let obj1={ name:'obj2' } let obj ={ name:'obj2', x:obj1 } obj1.x = obj2
避免使用iframe(因为iframe会嵌入其他页面,这样父页面渲染的时候,还要同时把子页面也渲染了,渲染进度也会变慢)
低耦合高内聚(基于封装的方式,减少页面中的冗余代码,提高代码使用效率)
尽可能使用事件委托
函数的防抖与节流
相关推荐
yanzhelee 2020-10-13
sucheng 2020-07-26
chensen 2020-11-14
lwnylslwnyls 2020-11-06
ATenhong 2020-10-15
佛系程序员J 2020-10-10
guojin0 2020-10-08
佛系程序员J 2020-10-08
bluewelkin 2020-09-16
wwzaqw 2020-09-04
zhongdaowendao 2020-09-02
favouriter 2020-08-18
奎因amp华洛 2020-08-15
一青年 2020-08-13
千锋 2020-08-10
nangongyanya 2020-08-09
dongxurr 2020-08-08
明天你好 2020-08-03
kyelu 2020-08-03