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

前端性能优化的概念

• web性能概述

  Web 性能其实就是**页面性能**，一个页面的性能如何，与页面是否可以快速加载，是否允许用户快速开始与之交互，滚动和动画是否流畅等问题有关。

• 为什么要进行性能优化呢？

  在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利网站访问速度的因素会形成累加，从而严重影响网站的性能，**导致网站访问速度变慢，用户体验低下，最终导致用户流失**。

# 一个例子引入为什么优化
当代前端有两大驱动的开发模式，分别是以DOM为驱动的传统开发模式和以数据为驱动的MVVM开发模式。
这里就以DOM为驱动的传统开发模式来介绍吧，主要讲解的是优化的必要性，这里先不深入探究前端优化的具体方面。

• 话不多说，举个例子：

• 解释一下这一段代码
  这一段代码在html的body里写了一个盒子div，其id为container，下面使用script标签写了一段JavaScript代码，这一段JavaScript代码是一段DOM的操作，其要循环执行一万次，document.getElementById('container').innerHTML += '我是一个小测试';

方法介绍(为了还没学习DOM的前端新人们)：getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
而innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
所以dom操作执行的就是获取id为container的那一段HTML，并为其添加上一万个我是一个小测试。

获得下图效果：

得到一个充满一万个“我是一个小测试”的页面

DOM操作下我是一个小测试也全部添加进了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元素的写入DOM树也耗时间，在for循环里要执行一万次，那就将写入DOM树减少为一次

//查找元素，可以先提出来,这样就不用每次循环都查找一遍
let oContainer=document.getElementById('container');
let content='';
for (var count = 0; count < 10000; count++) {
    content += '我是一个小测试';
  }
//   写入也放出来
oContainer.innerHTML +=content;
//这样就秒出了，耗时间的DOM操作，从一万次变到1次

这时候，经过优化，输出一万个我是一个小测试的页面就能快速的显示了。

扩展例子

直接看代码：

这该怎么进行优化呢？
将四次操作变为一次
知识点提示：cssText属性批量操作样式，classList 是一种更方便的访问元素的类列表的方法。

• 解决方案一：

// 方案一
     let container=document.getElementById('container');
    container.style.cssText = "width:100px; height: 200px;border:10px solid red;color:red";

• 解决方案二：

//方案二 



    

    

# 最后总结
这里只是浅谈了前端性能的问题，具体的方面还有很多，需要多去了解学习，阅读相关的书籍，例如高性能JavaScript，在进行开发时多注意自己的编码方式，特别是前端新人们，编码的同时注意性能。这是非常重要的。

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