个人中心
gpt4 book ai didi

前端性能优化(三)

转载 作者：知者 更新时间：2024-03-13 02:38:20 25 4
gpt4 key购买 nike

一、采用Web Worker
web worker使用其他工作线程从而独立于主线程之外，它可以执行任务而不干扰用户界面。一个 worker 可以将消息发送到创建它的 JavaScript 代码, 通过将消息发送到该代码指定的事件处理程序（反之亦然）。
试用场景：Web Worker 适用于那些处理纯数据，或者与浏览器 UI 无关的长时间运行脚本。
二、使用位运算
JavaScript 中的数字都使用 IEEE-754 标准以 64 位格式存储。但是在位操作中，数字被转换为有符号的 32 位格式。即使需要转换，位操作也比其他数学运算和布尔操作快得多。
2.1、取模
由于偶数的最低位为0,奇数的为1，所以取模运算可以使用位操作来代替。

if (value % 2) {
	// 奇数
} else {
	// 偶数 
}
// 位操作
if (value & 1) {
	// 奇数
} else {
	// 偶数
}

2.2、取整

console.log(~~10.12)  //10
console.log(~~10)     //10
console.log(~~'1.3')  //1
console.log(~~undefined) //0
console.log(~~null)  //0

2.3、位掩码

const a = 1
const b = 2
const c = 4
const options = a | b | c
if(b & options) {
  //判断b是否在options中
}

三、不要覆盖原生方法
无论你的 JavaScript 代码如何优化，都比不上原生方法。因为原生方法是用低级语言写的（C/C++），并且被编译成机器码，成为浏览器的一部分。当原生方法可用时，尽量使用它们，特别是数学运算和 DOM 操作。
四、降低css选择器的复杂性
4.1、浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。
看个示例

#block .text p {
	color: red;
}

1、查找所有p元素
2、查找结果1中的元素是否有类名为text的父元素
3、查找结果 2 中的元素是否有 id 为 block 的父元素
4.2、CSS 选择器优先级

内联 > ID选择器 > 类选择器 > 标签选择器

根据以上信息得出结论：

1、选择器越短越好
2、尽量使用高优先级的选择器，例如 ID 和类选择器。
3、避免使用通配符 *。

CSS 选择器没有优化的必要，因为最慢和慢快的选择器性能差别非常小。
五、使用flexbox而不是较早的布局模型
在早期的 CSS 布局方式中我们能对元素实行绝对定位、相对定位或浮动定位。而现在，我们有了新的布局方式 flexbox，它比起早期的布局方式来说有个优势，那就是性能比较好。
下面的截图显示了在 1300 个框上使用浮动的布局开销：

然后我们用 flexbox 来重现这个例子：

现在，对于相同数量的元素和相同的视觉外观，布局的时间要少得多（本例中为分别 3.5 毫秒和 14 毫秒）。
各浏览器兼容性：

Chrome 29+
Firefox 28+
Internet Explorer 11
Opera 17+
Safari 6.1+ (prefixed with -webkit-)
Android 4.4+
iOS 7.1+ (prefixed with -webkit-)

六、使用transform和opacity属性改变来实现动画
在 CSS 中，transforms 和 opacity 这两个属性更改不会触发重排与重绘。
七、检查加载性能
一个网站加载性能如何主要看白屏时间和首屏时间。

白屏时间：指从输入网址，到页面开始显示内容的时间。
首屏时间：指从输入网址，到页面完全渲染的时间。

将如下代码放到head标签的前面，可以获得白屏的时间。

<script>
  new Date() - performance.timing.navigationStart
</script>

在 window.onload事件里执行 new Date() - performance.timing.navigationStart 即可获取首屏时间。
关于检查运行性能将在下面的博客中总结。

25 4 0
文章推荐： 设计模式学习笔记（十八）备忘录模式及其实现
文章推荐： 设计模式学习笔记（十五）命令模式及在Spring JdbcTemplate 中的实现
文章推荐： CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的？在不同浏览器下以后什么区别？
文章推荐： 设计模式学习笔记（十六）迭代器模式及其在Java 容器中的应用
知者
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com