其他分享
首页 > 其他分享> > 前端性能优化-代码优化

前端性能优化-代码优化

作者:互联网

JS的开销在哪里:加载、解析编译、执行

下图是谷歌演讲展示JS和图片之间的性能对比,相同大小的文件JS开销明显要比图片大的多:

 

 

加载优化方案:

1、Code splitting 代码拆分,按需加载

2、Tree shaking 代码减重

3、代码压缩

 

解析编译执行优化方案,主要是减少主线程工作量:

1、避免长任务

2、避免超过1kb的行间脚本

3、使用rAF和rIC进行时间调度

 

代码优化其实是利用V8引擎的优化来提高我们代码的效率。

V8的编译原理

 

V8的优化机制,以下三个是比较突出的优化机制:

1、脚本流:在下载的过程中新开线程进行解析,最后将所有解析进行合并,加快解析速度

2、字节码缓存:会缓存多次使用的字节码,提高复用率

3、懒解析:默认不解析函数,只有用到了函数才进行解析

 

 虽然懒解析lazy parsing有好处,但是我们加载完页面后有些函数需要立即执行,也就是需要饥饿解析eager parsing。那么我们代码如何写才能告诉V8引擎进行饥饿解析不进行懒解析?

在声明的同时加(),来告诉V8进行饥饿解析,如:const add = ((a,b)=>a+b)

 

JS对象优化可以做哪些:

1、以相同顺序初始化对象成员,避免隐藏类的调整

 

 这样不同顺序的初始化会造成隐藏类型不可复用

 

2、实例化后避免添加新属性

这样解析器查找属性也会无法优化查找。 

 

3、尽量使用Array代替array-like对象

将类数组转换成数组,然后再进行遍历,这样的速度比直接遍历类数组的性能会更快,这是谷歌V8进行过测试的结果。

 

4、避免读取超过数组的长度

这样会造成undefined跟其他类型比较,增加沿原型链的查找

 

5、避免元素类型转换

 

如上代码,这种数组会进行类型的转换,性能比纯整型的效率慢。

以下是V8类型性能排行

 

 

 

HTML的优化:

1、代码压缩

2、减少iframes使用,如果使用,可以父文档加载完成之后再对iframe进行src赋值。

3、避免节点深层嵌套,生成的dom树相关,树的遍历效率跟层级深度有关

4、避免table布局

5、css、js尽量使用外链

6、删除元素默认属性

7、js尽量放在最后,防止js对dom加载的阻塞

 

CSS优化:

1、在Performance瀑布图的Recalculate Style中可以查看样式计算用时

2、以前要求不要定义多层级联的样式表达,因为样式读取是自右向左,层级约多计算效率越慢。但是目前计算机性能基本可以忽略这个问题。

3、降低CSS对渲染的阻塞,尽早的加载CSS,降低加载的大小

4、利用GPU进行完成动画,如transform等属性来进行复合。

5、使用contain属性,contain:layout,这个配置告诉浏览器这个属性的盒子外面的变化不会印象该盒子,该盒子的变化不会印象外面。这样可以减少布局的重新计算量。

6、使用font-display属性,让文字更早的显示,减小文字闪动问题。

 

标签:属性,前端,代码优化,V8,解析,优化,代码,加载
来源: https://www.cnblogs.com/MarsPGY/p/15780627.html