前端性能优化的概念
- 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,在进行开发时多注意自己的编码方式,这是非常重要的。
感谢阅读,如有建议或不足的地方请在下面评论提出。