谈谈性能优化（草稿）

1. 重绘和重排
   当页面布局和几何属性改变时就需要＂重排＂。重绘不一定重排，但是重排一定会发生重绘。而且重排耗费的资源要比重绘大的多
   避免在修改样式的过程中使用 offsetTop, scrollTop, clientTop, getComputedStyle() 这些属性, 它们都会刷新渲染队列
   打开谷歌控制台 -> More tools -> Rendering -> 选中 Paint flashing
   优化
   减少重绘重排的次数，最小化重绘和重排, 尽量一次处理
   常见解决方式1：
   有的时候需要往 UI 标签中添加多个 LI 标签。这个时候不要一个一个的添加 LI 标签。而是在本地创建好了 LI 标签组一次性加载进去
   常见解决方式2：
   使元素脱离文档流，隐藏元素将元素属性变为 none，然后在对其进行修改工作
   解决方式3：
   使用 documentFragment
   解决方式4：
   将原始元素拷贝到一个脱离文档的节点中, 修改副本, 完成后再替换原始元素)
   能重绘别重排
   给元素设置某些属性的时候元素会脱离文档流，这样元素的改变就不会造成大面积的重排了，例如绝对定位，浏览器定位，使用 CSS3 的某些特性。

2. **防抖和节流
   实用场景
   搜索框搜索内容时请求后端接口 – 防抖
   不防抖的方式：输入内容：12345 ， 内容发生改变就请求接口。这样会请求五次接口
   防抖的方式：同样输入内容：12345，防抖时间设置为 500ms，500ms 内用户输入新的内容重新读条。正常情况下只会请求一次接口
   图片进行懒加载 – 节流
   不节流的方式：滚动条一滚动就监听页面元素显示情况，显示的元素就进行图片加载。滚动条滚动事件是一个非常频繁的操作，滚动一丢丢就会执行几十次。
   节流的方式：还是同样的操作，但是执行代码进行节流。设置节流时间 30ms 。这就不管这 30ms 滚动事件出发了几次，我的执行代码都只执行一次

3. CSS 选择器优化
   描述
   css 的匹配规则是从右往左
   优化方法
   最右侧命名的唯一性
   减少层级

4.关于文件的优化
描述
文件越小、数量越少加载的顺序更快
优化
减少代码体积：对代码进行压缩、重复代码抽取成公共代码。代码压缩–现在浏览器支持 Gzip 压缩格式（是在的将空格、变量名之类的压缩了之后还能压缩的一种格式。）
减少文件数量
典型场景
图标合并成一个

5.使用 CDN 进行优化

6.利用好存储技术
文件存储
一个 web 项目是由很多的 CSS、JS、HTML 文件组成的，这些文件基本上只有在版本迭代的时候才会有改动，因此将他们存储在本地对性能的提升是很有帮助的
请求存储
存在交互的项目请求必然分为俩种，稳定数据请求和非稳定数据请求。
稳定数据请求存储起来可以减少 ajax 交互。
当然了稳定跟不稳定之间的界限是不好界定的，因此需要你自己去进行判定是永久存储还是短暂存储，比较有代表性的方法就是 localStorage 和 sessionStorage
**计算存储
很多数据并不是拿来就能用的，都需要进行处理。像分跟元之间单位换算、求和、求平均值。其实数据计算存在这么一种情况，计算的过程复杂，但是结果可以用多次。就可以存储起来。
function storageFn () {
let obj = {}
return function (val) {
if (obj[val]) {
return obj[val]
} else {
// 大量计算,假设结果为 1
obj[val] = 1
return obj[val]
}

}

}
let a = storageFn()
a(‘b’)

7.**事件委托
利用冒泡和捕获进行优化？ -> 事件代理
给元素添加事件是很耗费资源的事情，普通情况下也不会大量添加事件。但是当使用到列表的时候可能就会跟很多重复的元素循环添加事件了。其实你可以利用冒泡的特性只给父元素添加事件。这样不管你点了哪个子元素最终父元素都会接收到，最后用 event.target 来确认目标元素就可以了。

8.SPA 开发首屏优化
将一些依赖放到 CDN 上
非首屏内容懒加载
https://juejin.im/post/5da9216d6fb9a04e0d107900#heading-5

------------------Js高性能优化
谨慎使用闭包
闭包造成的泄漏应该是与 IE 循环引用有关

**缓存对象成员
在同一个函数中，如果存在多次读取同一个对象成员，可以在局部函数中保存对象，减少查找。同时也解决了属性越深，访问速度越慢的问题。
function getWindowWH() {
var elBody = document.getElementsByTagName(‘body’)[0];
return {
width: elBody.offsetWidth,
height: elBody.offsetHeight
}
}

DOM 操作
访问DOM的次数越多，代码运行的速度越慢，统一的保存结果最后在一并输出。 例子：
function innerHTMLLoop() {
var content = ‘’;

 for (var count = 0; count < 10000; count++){
     content += 'a';
 }

 document.getElementById("idName").innerHTML += content;     

}

循环性能
for(var i = 0; i < array.length; i++){
…
}
每次循环的时候需要查找array.length，这样不但很耗时，也造成性能损失。只要查找一次属性，存储在局部变量，就可以提高性能。
for(var i = 0, len = array.length; i < len; i++){
…
}复制代码重写后的循环根据数组的长度能优化25%的运行时间，IE更多。所以平时书写的时候还是要多加注意。同时还是要避免使用for-in循环。

条件语句
if-else 对比 switch， 当条件语句较多的时候switch 更易读，运行的要更快。所以但条件少的情况下使用if-else，当条件增加时，更倾向于switch，会更佳合理。

避免使用构造器
通过避免使用eval()和Function()构造器来避免双重求值带来的性能消耗

使用 Object/Array 直接量
直接量的速度更快。
var myObject = {
name: “xxxx”
}
https://juejin.im/post/58fdcdc31b69e60058a29444