【JS】从这一篇文章入坑前端性能优化
从这一篇文章入坑前端性能优化" title="前端性能优化">前端性能优化
superior良某发布于 今天 03:20
前端性能优化的概念
web性能概述
Web 性能其实就是**页面性能**，一个页面的性能如何，与页面是否可以快速加载，是否允许用户快速开始与之交互，滚动和动画是否流畅等问题有关。为什么要进行性能优化呢？
在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利网站访问速度的因素会形成累加，从而严重影响网站的性能，**导致网站访问速度变慢，用户体验低下，最终导致用户流失**。
# 一个例子引入为什么优化
当代前端有两大驱动的开发模式，分别是以DOM为驱动的传统开发模式和以数据为驱动的MVVM开发模式。
这里就以DOM为驱动的传统开发模式来介绍吧，主要讲解的是优化的必要性，这里先不深入探究前端优化的具体方面。
话不多说，举个例子：
<body><div id="container"></div>
<!-- script脚本放在最后面也是一种优化，这样静态页面可以马上出来 -->
<script>
//因为一万次输出，一直加载不出页面，js阻塞了。为什么？怎么优化
for (var count = 0; count < 1000; count++) {
document
.getElementById('container')
.innerHTML += '<span>我是一个小测试</span>';
}
</script>
</body>
- 解释一下这一段代码
这一段代码在html的body里写了一个盒子div，其id为container，下面使用script标签写了一段JavaScript代码，这一段JavaScript代码是一段DOM的操作，其要循环执行一万次，document.getElementById('container').innerHTML += '<span>我是一个小测试</span>';
方法介绍(为了还没学习DOM的前端新人们)：getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。而innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
所以dom操作执行的就是获取id为container的那一段HTML，并为其添加上一万个<span>我是一个小测试</span>。
获得下图效果：
得到一个充满一万个“我是一个小测试”的页面
DOM操作下<span>我是一个小测试</span>也全部添加进了div盒子里。
这段代码要实现的是，在div盒子里添加10000句话，所以写了一个for循环，在for循环里。进行DOM操作，找到节点，添加元素，进行一万次，完美实现！
- 可是你真的以为能那么轻易的出的来吗？
肯定出不来！
除非你电脑性能比我的好，而且就算能出来也很慢。
给你们看看真实效果！
不信可以复制代码，自己运行一遍~~
# 为什么会出现这样的问题
## 简单介绍页面显示
- 页面由三个文档构成，HTML，CSS，和JavaScript脚本。
渲染引擎内部的HTML解析器（HTMLParser）模块，将 HTML 字节流转换为 DOM 结构。 形成了DOM树，css解析执行 基于DOM树 树生成css渲染树(CSSOM 树) ，遍历这颗渲染树。于是出现了静态页面。
- js作为专为浏览器设计的脚本语言，其的作用就算负责页面的交互和操作页面，就像上面 代码的DOM操作，为页面添加了10000个span。
代码注意事项
- HTML文档执行时，是按照前后顺序来执行的，上面代码中，我们把JavaScript代码放到 了最后面也是一种优化，最后执行JavaScript代码能把时间都让给页面渲染，让用户 先看到页面，交互后产生。当然这里放后面的主要原因是：要对div盒子进行操作，首 先要有这个div盒子，要是JavaScript代码放最前面先运行，这个时候div都还没有运 行出来，获得的结点对象都是空，何谈加入10000个span。
为什么会耗时
我们逐步分析
- 主要耗时间的部分在JavaScript代码上，JavaScript的下载和执行会阻塞用户界面的绘制和其他资源的下载，这里有一个10000次的for循环，是因为10000次的for循环耗时导致页面慢到出不来吗？显然不是，事实上就算是10000次的循环也能在1ms内进行完。
- for循环里的DOM操作，里面有查找和修改DOM树，这是个非常耗时的地方，操作DOM导致DOM树结构或者几何属性（宽度，高度，间距等）发生了变化，就会触发重排和重绘。
- DOM和JavaScript是2个独立的功能，只通过API作为桥梁连接，用JavaScript操作DOM时要两头跑一遍，这就非常耗时，再回头看开头代码，在for循环里查找了一万次指定 ID 的对象，且还在DOM和JavaScript两头跑了一万次，可想而知，最终页面出现要花费多少时间！
这里得出，耗费时间的点在DOM的操作上，所以要在这方面进行优化。
优化方案
该怎么优化呢？
- DOM树节点操作耗时，那就将其放出for循环，使其只进行一次。
//查找元素，可以先提出来,这样就不用每次循环都查找一遍let oContainer=document.getElementById('container');
for (var count = 0; count < 10000; count++) {
oContainer.innerHTML += '<span>我是一个小测试</span>';
}
- span元素的写入DOM树也耗时间，在for循环里要执行一万次，那就将写入DOM树减少为一次
//查找元素，可以先提出来,这样就不用每次循环都查找一遍let oContainer=document.getElementById('container');
let content='';
for (var count = 0; count < 10000; count++) {
content += '<span>我是一个小测试</span>';
}
// 写入也放出来
oContainer.innerHTML +=content;
//这样就秒出了，耗时间的DOM操作，从一万次变到1次
这时候，经过优化，输出一万个<span>我是一个小测试</span>的页面就能快速的显示了。
扩展例子
直接看代码：
<div id="container"></div><script>
//怎么优化?这里来回跑了4次
let container=document.getElementById('container');
container.style.width='100px';
container.style.height='200px';
container.style.border='10px solid red';
container.style.color='red';
</script>
这该怎么进行优化呢？
将四次操作变为一次
知识点提示：cssText属性批量操作样式，classList 是一种更方便的访问元素的类列表的方法。
- 解决方案一：
// 方案一let container=document.getElementById('container');
container.style.cssText = "width:100px; height: 200px;border:10px solid red;color:red";
- 解决方案二：
//方案二<style>
.reveal{
width:100px;
height: 200px;
border:10px solid red;
color:red;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
let container=document.getElementById('container');
//使用.reveal（把这一些个样式先放到渲染树上，然后直接启用）,只需要在js和DOM树之间跑一遍就行了
container.classList.add('reveal');//reveal只是个名字
//使用classList.add
</script>
# 最后总结
这里只是浅谈了前端性能的问题，具体的方面还有很多，需要多去了解学习，阅读相关的书籍，例如高性能JavaScript，在进行开发时多注意自己的编码方式，特别是前端新人们，编码的同时注意性能。这是非常重要的。
感谢阅读，如有建议或不足的地方请在下面评论提出。
javascript前端
阅读 30发布于 今天 03:20
本作品系原创，采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
superior良某
欢迎一起研究学习
15 声望
0 粉丝
superior良某
欢迎一起研究学习
15 声望
0 粉丝
宣传栏
前端性能优化的概念
web性能概述
Web 性能其实就是**页面性能**，一个页面的性能如何，与页面是否可以快速加载，是否允许用户快速开始与之交互，滚动和动画是否流畅等问题有关。为什么要进行性能优化呢？
在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利网站访问速度的因素会形成累加，从而严重影响网站的性能，**导致网站访问速度变慢，用户体验低下，最终导致用户流失**。
# 一个例子引入为什么优化
当代前端有两大驱动的开发模式，分别是以DOM为驱动的传统开发模式和以数据为驱动的MVVM开发模式。
这里就以DOM为驱动的传统开发模式来介绍吧，主要讲解的是优化的必要性，这里先不深入探究前端优化的具体方面。
话不多说，举个例子：
<body><div id="container"></div>
<!-- script脚本放在最后面也是一种优化，这样静态页面可以马上出来 -->
<script>
//因为一万次输出，一直加载不出页面，js阻塞了。为什么？怎么优化
for (var count = 0; count < 1000; count++) {
document
.getElementById('container')
.innerHTML += '<span>我是一个小测试</span>';
}
</script>
</body>
- 解释一下这一段代码
这一段代码在html的body里写了一个盒子div，其id为container，下面使用script标签写了一段JavaScript代码，这一段JavaScript代码是一段DOM的操作，其要循环执行一万次，document.getElementById('container').innerHTML += '<span>我是一个小测试</span>';
方法介绍(为了还没学习DOM的前端新人们)：getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。而innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
所以dom操作执行的就是获取id为container的那一段HTML，并为其添加上一万个<span>我是一个小测试</span>。
获得下图效果：
得到一个充满一万个“我是一个小测试”的页面
DOM操作下<span>我是一个小测试</span>也全部添加进了div盒子里。
这段代码要实现的是，在div盒子里添加10000句话，所以写了一个for循环，在for循环里。进行DOM操作，找到节点，添加元素，进行一万次，完美实现！
- 可是你真的以为能那么轻易的出的来吗？
肯定出不来！
除非你电脑性能比我的好，而且就算能出来也很慢。
给你们看看真实效果！
不信可以复制代码，自己运行一遍~~
# 为什么会出现这样的问题
## 简单介绍页面显示
- 页面由三个文档构成，HTML，CSS，和JavaScript脚本。
渲染引擎内部的HTML解析器（HTMLParser）模块，将 HTML 字节流转换为 DOM 结构。 形成了DOM树，css解析执行 基于DOM树 树生成css渲染树(CSSOM 树) ，遍历这颗渲染树。于是出现了静态页面。
- js作为专为浏览器设计的脚本语言，其的作用就算负责页面的交互和操作页面，就像上面 代码的DOM操作，为页面添加了10000个span。
代码注意事项
- HTML文档执行时，是按照前后顺序来执行的，上面代码中，我们把JavaScript代码放到 了最后面也是一种优化，最后执行JavaScript代码能把时间都让给页面渲染，让用户 先看到页面，交互后产生。当然这里放后面的主要原因是：要对div盒子进行操作，首 先要有这个div盒子，要是JavaScript代码放最前面先运行，这个时候div都还没有运 行出来，获得的结点对象都是空，何谈加入10000个span。
为什么会耗时
我们逐步分析
- 主要耗时间的部分在JavaScript代码上，JavaScript的下载和执行会阻塞用户界面的绘制和其他资源的下载，这里有一个10000次的for循环，是因为10000次的for循环耗时导致页面慢到出不来吗？显然不是，事实上就算是10000次的循环也能在1ms内进行完。
- for循环里的DOM操作，里面有查找和修改DOM树，这是个非常耗时的地方，操作DOM导致DOM树结构或者几何属性（宽度，高度，间距等）发生了变化，就会触发重排和重绘。
- DOM和JavaScript是2个独立的功能，只通过API作为桥梁连接，用JavaScript操作DOM时要两头跑一遍，这就非常耗时，再回头看开头代码，在for循环里查找了一万次指定 ID 的对象，且还在DOM和JavaScript两头跑了一万次，可想而知，最终页面出现要花费多少时间！
这里得出，耗费时间的点在DOM的操作上，所以要在这方面进行优化。
优化方案
该怎么优化呢？
- DOM树节点操作耗时，那就将其放出for循环，使其只进行一次。
//查找元素，可以先提出来,这样就不用每次循环都查找一遍let oContainer=document.getElementById('container');
for (var count = 0; count < 10000; count++) {
oContainer.innerHTML += '<span>我是一个小测试</span>';
}
- span元素的写入DOM树也耗时间，在for循环里要执行一万次，那就将写入DOM树减少为一次
//查找元素，可以先提出来,这样就不用每次循环都查找一遍let oContainer=document.getElementById('container');
let content='';
for (var count = 0; count < 10000; count++) {
content += '<span>我是一个小测试</span>';
}
// 写入也放出来
oContainer.innerHTML +=content;
//这样就秒出了，耗时间的DOM操作，从一万次变到1次
这时候，经过优化，输出一万个<span>我是一个小测试</span>的页面就能快速的显示了。
扩展例子
直接看代码：
<div id="container"></div><script>
//怎么优化?这里来回跑了4次
let container=document.getElementById('container');
container.style.width='100px';
container.style.height='200px';
container.style.border='10px solid red';
container.style.color='red';
</script>
这该怎么进行优化呢？
将四次操作变为一次
知识点提示：cssText属性批量操作样式，classList 是一种更方便的访问元素的类列表的方法。
- 解决方案一：
// 方案一let container=document.getElementById('container');
container.style.cssText = "width:100px; height: 200px;border:10px solid red;color:red";
- 解决方案二：
//方案二<style>
.reveal{
width:100px;
height: 200px;
border:10px solid red;
color:red;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
let container=document.getElementById('container');
//使用.reveal（把这一些个样式先放到渲染树上，然后直接启用）,只需要在js和DOM树之间跑一遍就行了
container.classList.add('reveal');//reveal只是个名字
//使用classList.add
</script>
# 最后总结
这里只是浅谈了前端性能的问题，具体的方面还有很多，需要多去了解学习，阅读相关的书籍，例如高性能JavaScript，在进行开发时多注意自己的编码方式，特别是前端新人们，编码的同时注意性能。这是非常重要的。
感谢阅读，如有建议或不足的地方请在下面评论提出。
以上是 【JS】从这一篇文章入坑前端性能优化 的全部内容， 来源链接： utcz.com/a/106316.html
得票时间