Bootstrap

从这一篇文章入坑前端性能优化

前端性能优化的概念

  • 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,在进行开发时多注意自己的编码方式,这是非常重要的。

感谢阅读,如有建议或不足的地方请在下面评论提出

;