一.提高加载性能
1.IE8,FF,3.5,Safari4和Chrome都允许并行下载js文件，当script下载资源时不会阻塞其他script的下载。但是js下载仍然会阻塞其他资源的下载，如图片。尽管脚本下载不会互相影响，但页面仍然必须等待所有js代码下载并执行完才能继续。因此仍然存在脚本阻塞问题.推荐将所有js文件放在body标签底部以减少对整个页面的影响。
2.减少页面外链脚本文件的数量将会提高页面性能：
http请求会带来额外的开销，因此下载单个300k的文件将比下载10个30k的文件效率更高。
3.动态脚本加载技术：
无论何时启动下载，文件的下载和执行都不会阻塞页面其他进程。
functionlaodScript(url,callback){
varscript=document.createElement('script')_
_cript.type='text/javascript'
__f(script.readyState){//ie
____cript.onreadystatechange=function(){_____
if(script.readyState=='loaded'||script.readyState=='complete'){_______
_cript.onreadystatechange=null_______
callback()_____
____
__
}else{//其他浏览器___
script.onload=function(){_____
_allback()
___}_
}_
script.src=url_
document.getElementsByTagName('head')[0].appendChild(script)
}
//使用
loadScript('./a.js',function(){_
loadScript('./b.js',function(){___
loadScript('./c.js',function(){_____
console.log('加载完成')___
})_
})
})
4.无阻塞加载类库——LABjs,使用方法如下：
//链式调用时文件逐个下载，.wait()用来指定文件下载并执行完毕后所调用的函数
$LAB.script('./a.js')_
.script('./b.js')_
.wait(function(){__
_pp.init()
})
//为了保证执行顺序，可以这么做,此时a必定在b前执行
$LAB.script('./a.js').wait()_
.script('./b.js')_
.wait(function(){___
_pp.init()
})
二.数据存取与JS性能
1.在js中，数据存储的位置会对代码整体性能产生重大影响。数据存储共有4种方式：字面量，变量，数组项，对象成员。他们有着各自的性能特点。
2.访问字面量和局部变量的速度最快，相反，访问数组和对象相对较慢
3.由于局部变量存在于作用域链的起始位置，因此访问局部变量的比访问跨域作用变量更快
4.嵌套的对象成员会明显影响性能，应尽量避免
5.属性和方法在原型链位置越深，访问他的速度越慢
6.通常我们可以把需要多次使用的对象成员，数组元素，跨域变量保存在局部变量中来改善js性能
三.DOM编程
1.访问DOM会影响浏览器性能，修改DOM则更耗费性能，因为他会导致浏览器重新计算页面的几何变化。
注：如过在一个对性能要求比较高的操作中更新一段HTML，推荐使用innerHTML，因为它在绝大多数浏览器中运行的都很快。但对于大多数日常操作而言，并没有太大区别，所以你更应该根据可读性，稳定性，团队习惯，代码风格来综合决定使用innerHTML还是createElement()
2.HTML集合优化
HTML集合包含了DOM节点引用的类数组对象，一直与文档保持连接，每次你需要最新的信息时，都会重复执行查询操作，哪怕只是获取集合里元素的个数。
①_优化一——集合转数组collToArr
functioncollToArr(coll){_
for(vari=0,a=[],len=coll.lengthi
a._ush(coll[i])
__
returna
}
②缓存集合length
③访问集合元素时使用局部变量（即将重复的集合访问缓存到局部变量中，用局部变量来操作）
3.遍历DOM
①使用只返回元素节点的API遍历DOM,因为这些API的执行效率比自己实现的效率更高：
td{border:1pxsolid#cccpadding:5pxmargin:auto}
td>p{text-align:left}
td>pspan{text-align:centerdisplay:block}
属性名
被替代属性
children
childNodes
childElementCount
childNodes.length
firstElementChild
firstChild
lastElementChild
lastChild
nextElementSibling
nextSibling
previousElementSibling
previousSibling
_谘≡衿_PI——querySelectorAll()
querySelectorAll()方法使用css选择器作为参数并返回一个NodeList——包含着匹配节点的类数组对象，该方法不会返回HTML集合，因此返回的节点不会对应实时文档结构，着也避免了HTML集合引起的性能问题。
let_rr=_ocument.querySelectorAll('div.warning,_iv.notice>_')
4.重绘和重排
浏览器在下载完页面的所有组件——html,js,css,图片等之后，会解析并生成两个内部数据结构——_OM树，渲染树.一旦DOM树和渲染树构建完成，浏览器就开始绘制页面元素（paint）.
①重排发生的条件：
添加或删除可见的DOM元素位置变化元素尺寸改变内容改变页面渲染器初始化浏览器窗口尺寸变化出现滚动条时会触发整个页面的重排_嘏疟囟ㄖ鼗
5.渲染树变化的排列和刷新
大多数浏览器通过队列化修改并批量执行来优化重排过程，然而获取布局信息的操作会导致队列强制刷新。
offsetTop,offsetWidth...
scrollTop,scrollHeight...
clientTop,clientHeight...
getComputedStyle()
一些优化建议：将设置样式的操作和获取样式的操作分开：
//设置样式
body.style.color='red'
body.style.fontSize='24px'
//读取样式
letcolor=body.style.color
let_ontSize=_ody.style.fontSize
另外，获取计算属性的兼容写法：
functiongetComputedStyle(el){_
varcomputed=(document.body.currentStyle?el.currentStyle:document.defaultView.getComputedStyle(el,'')_
returncomputed
}
6.最小化重绘和重排
①.批量改变样式
/*使用cssText
*/el.style.cssText='border-left:1px_order-right:2px_adding:20px'
②.批量修改dom的优化方案——使元素脱离文档流-对其应用多重改变-把元素带回文档
functionappendDataToEl(option){
vartargetEl=option.target||document.body,___
createEl,___
data=option.data||[]_//让容器脱离文档流，减少重绘重排_
vartargetEl_display=targetEl.style.display_
targetEl.style.display='none'
_
//*****创建文档片段来优化Dom操作****_
varfragment=document.createDocumentFragment()_//给元素填充数据_
for(vari=0,max=data.lengthi
createEl=
document.createElement(option.createEl)___
for(varitemindata[i]){_____
if(item.toString()==='text'){_______
createEl.appendChild(document.createTextNode(data[i][item]))________ontinue___________
_f(item.toString()==='html'){_______
createEl.innerHTML=item,data[i][item]_______
continue_____
}_____
_reateEl.setAttribute(item,data[i][item])_______
//****将填充好的node插入文档片段****___
fragment.appendChild(createEl)___
//****将文档片段统一插入目标容器****_
targetEl.appendChild(fragment)_
//显示容器，完成数据填充_
targetEl.style.display=
targetEl_display
}
//使用
varwrap=document.querySelectorAll('.wrap')[0]
vardata=[_
_name:'xujaing',text:'选景',title:'xuanfij'},_
{name:'xujaing',text:'选景',title:'xuanfij'},_
{name:'xujaing',text:'选景',title:'xuanfij'}]
appendDataToEl({_
target:wrap,_
createEl:'div',
_ata:data
})
上面的优化方法使用了文档片段:_蔽颐前盐牡灯尾迦氲浇诘阒惺保导噬媳惶砑拥闹皇歉闷蔚淖咏诘悖皇瞧伪旧怼？梢允沟_om操作更有效率。
②.缓存布局信息
//缓存布局信息
letcurrent=el.offsetLeft
current++
el.style.left=current+'px'
if(current>300){_
stop()
}
④.慎用:hover
如果有大量元素使用:hover,那么会降低相应速度，CPU升高
⑤.使用事件委托（通过事件冒泡实现）来减少事件处理器的数量，减少内存和处理时间
functiondelegation(e,selector,callback){_
e=e||window.event_
vartarget=e.target||e.srcElement
_if(target.nodeName!==selector||
target.className!==selector||target.id!==selector){___
return
_}_
if(typeofe.preventDefault==='function'){__
_.preventDefault()___
e.stopPropagation()
}else{___
e.returnValue=false
e.cancelBubble=true_
}
__allback()}
四.算法和流程控制
1.循环中减少属性查找并反转(可以提升50%-60%的性能)
//for循环
for(vari=item.lengthi--){_
process(item[i])
}
//while循环
varj=item.length
while(j--){_
process(item[i])
}
2.使用Duff装置来优化循环（该方法在后面的文章中会详细介绍）
3.基于函数的迭代（比基于循环的迭代慢）
items.forEach(function(value,index,array){__rocess(value)})
4.通常情况下switch总比if-else快，但是不是最佳方案
五.字符串和正则表达式
1.除了IE外，其他浏览器会尝试为表达式左侧的字符串分配更多的内存，然后简单的将第二个字符串拷贝到他的末尾，如果在一个循环中，基础字符串位于最左侧，就可以避免重复拷贝一个逐渐变大的基础字符串。2.使用[\s\S]来匹配任意字符串3.去除尾部空白的常用做法：
if(!String.prototype.trim){_
String.prototype.trim=function(){___
returnthis.replace(/^\s+/,'').replace(/\s\s*$/,'')_
}
}
六.快速响应的用户界面
1.浏览器的UI线程：用于执行javascript和更新用户界面的进程。
2.在windows系统中定时器分辨率为15毫秒，因此设置小于15毫秒将会使IE锁定，延时的最小值建议为25ms.
3.用延时数组分割耗时任务：
functionmultistep(steps,args,callback){_
vartasks=steps.concat()
__etTimeout(function(){___
vartask=tasks.shift()___
task.apply(null,args||[])_//调用Apply参数必须是数组
___
if(tasks.length>0){_____
setTimeout(arguments.callee,25)
___else{_____
_allback()___
__
},25)
}
4.记录代码运行时间批处理任务：
functiontimeProcessArray(items,process,callback){_
vartodo=item.concat()
__etTimeout(function(){___
varstart=+newDate()
__o{_____
_rocess(todo.shift())___
}while(todo.length>0&&(+newDate()-start____f(todo.length>0){_____
_etTimeout(arguments.callee,25)
___else{____
_allback(items)_
}_
_,25)
}
5.使用WebWorker：它引入了一个接口，能使代码运行且不占用浏览器UI线程的时间。一个Worker由如下部分组成：
①一个navigator对象，包括app
Node.js的应用程序都是单线程的。这就意味着即使计算机是多核或多处理器的，node.js的应用程序也只能利用其中一个，大大限制了系统性能。随着堆栈变大，Node.js的垃圾收集器变得非常低效。随着堆栈使用空间超过1GB，垃圾收集的过程开始变得非常慢，会严重影响程序的性能。
因为以上的问题，Node.js限制了堆栈所能使用的空间为1.5GB。一旦超过该范围，系统就会出错。
为了保证Jut系统的高效性，Jut团队想出了一些解决方案。
首先，针对Node.js单线程引起的性能低下问题，Jut团队采用了尽量避免利用Node.js进行计算的方式。JPC会把Juttle流图切割为一些子图，然后在Jut平台的更深层再进行高效执行。以ElasticSearch为例，在未优化之前，数据请求的流程为：ElasticSearch把相关数据从磁盘中取出->编码为JSON->通过HTTP协议发送给JPC->JPC解码JSON文件，执行预想的计算。然而，ElasticSearch拥有一种聚合（Aggregation）功能，能够跨数据集执行计算。这样，一次大的请求就可以优化为一个ElasticSearch聚合，避免了中间多次JSON转换以及Node.js针对大规模数据进行计算的过程。而且，ElasticSearch和Cassandra都是采用Java编写，可以有效利用多核或多处理器资源，实现高效率并行计算。总之，通过尽量避免在Node.js中进行计算的方式，Jut团队有效提高了系统的性能。
其次，关于堆栈空间问题。每当用户让Node.js服务器向其他服务器发送请求时，用户都会提供一些相应的函数，来对未来返回的数据进行处理。Node.js就会把这些函数放到event loop中，等待数据返回，然后调用相应的函数进行处理。这种类似中断的处理方式，可以大大提高单线程Node.js的效率。然而，一旦event loop中其中一个函数计算的时间过长，系统就会出现问题。以用户向Node.js发送从其他服务器中请求若干行的数据，然后对这些数据进行数学计算为例。如果请求的数据超过了1.5GB堆栈大小的限制，计算过程就会占用Node.js很长一段时间，甚至无法完成。由于Node.js为单线程，在这段时间内，新的请求或者新返回的数据只能放置在event loop的待办列表中。这样，Node.js服务器的反应时间将会大大增加，影响其他请求的正常处理。
为了解决该问题，Jut在任何可能的地方实现了分页（paging）。这就意味着，系统将不会一次读取大量数据，而是将其划分为若干小的请求。在这些请求中间，系统还可以处理器新的请求。当然，多次请求都需要一定的通信代价的。经过Jut团队的摸索，20000个点是比较合适的规模——系统仍然能够在若干毫秒中执行完毕，而且一般的请求也不需要进行大量分割。
针对这些问题，Galbraith分享了一个具体的使用案例。作为Jut的忠实客户，NPM一直伴随着Jut从alpha版本一直走到了现在的beta版本。NPM一个具体的任务就是找到所有包中过去两周下载量最大的前十名，然后在网站中以表格形式的显示。Juttle程序可以利用非常简单的代码完成该任务：
read -last :2 weeks: | reduce count() by package | sort count -desc | head 10 | @table
但是，Jut第一次跑该程序的时候就遇到了问题。经过调试发现，问题的原因在于JPC优化了read和reduce操作，将其合并为一个ElasticSearch聚合操作。由于聚合操作本身并不支持分页，而NPM的包数要超过数百万个，ElasticSearch就返回了一个超过百万个数组的巨大响应结果，总大小在几百MB。收到该响应后，JPC就试图一次处理完毕，导致内存空间使用超过了1.5GB的限制。垃圾收集器开始不断尝试回收空间。结果，处理时间超过了JPC内置的监控服务认为出现异常的阈值——60s。监控服务直接重启JPC，导致了NPM的任务一直无法完成。
为了解决该问题，Jut团队采用了模仿ElasticSearch针对聚合进行分页的方法。针对返回的包含大量信息的结果，JPC将其切分为可以方便处理的小块，一个个处理。
移动互联网时代，用户对于网页的打开速度要求越来越高。首屏作为直面用户的第一屏，其重要性不言而喻。优化用户体验更是我们前端开发非常需要 focus 的东西之一。
从用户的角度而言，当打开一个网页，往往关心的是从输入完网页地址后到最后展现完整页面这个过程需要的时间，这个时间越短，用户体验越好。所以作为网页的开发者，就从输入url到页面渲染呈现这个过程中去提升网页的性能。
所以输入URL后发生了什么呢？在浏览器中输入url会经历域名解析、建立TCP连接、发送http请求、资源解析等步骤。
http缓存优化是网页性能优化的重要一环，这一部分我会在后续笔记中做一个详细总结，所以本文暂不多做详细整理。本文主要从网页渲染过程、网页交互以及Vue应用优化三个角度对性能优化做一个小结。
首先谈谈拿到服务端资源后浏览器渲染的流程：
关键渲染路径是浏览器将 HTML、CSS、JavaScript 转换为在屏幕上呈现的像素内容所经历的一系列步骤。也就是我们刚刚提到的的的浏览器渲染流程。
为尽快完成首次渲染，我们需要最大限度减小以下三种可变因素:
首先，DOM 和 CSSOM 通常是并行构建的，所以 CSS 加载不会阻塞 DOM 的解析。
然而，由于 Render Tree 是依赖于 DOM Tree 和 CSSOM Tree 的，
所以他必须等待到 CSSOM Tree 构建完成，也就是 CSS 资源加载完成(或者 CSS 资源加载失败)后，才能开始渲染。因此，CSS 加载会阻塞 Dom 的渲染。
由此可见，对于 CSSOM 缩小、压缩以及缓存同样重要，我们可以从这方面考虑去优化。
当浏览器遇到 script 标记时，会阻止解析器继续操作，直到 CSSOM 构建完毕，JavaScript 才会运行并继续完成 DOM 构建过程。
当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility 等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
回流（Reflow）
当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
有时即使仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流。现代浏览器会对频繁的回流或重绘操作进行优化：浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。
当你访问以下属性或方法时，浏览器会立刻清空队列:
因为队列中可能会有影响到这些属性或方法返回值的操作，即使你希望获取的信息与队列中操作引发的改变无关，浏览器也会强行清空队列，确保你拿到的值是最精确的。
避免频繁操作样式，最好一次性重写 style 属性，或者将样式列表定义为 class 并一次性更改 class 属性。
避免频繁操作 DOM，创建一个 documentFragment，在它上面应用所有 DOM 操作，最后再把它添加到文档中。
也可以先为元素设置 display: none，操作结束后再把它显示出来。因为在 display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘。
避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。
图片懒加载在一些图片密集型的网站中运用比较多，通过图片懒加载可以让一些不可视的图片不去加载，避免一次性加载过多的图片导致请求阻塞（浏览器一般对同一域名下的并发请求的连接数有限制），这样就可以提高网站的加载速度，提高用户体验。
将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。注意，图片要指定宽高。
当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。
事件委托其实就是利用JS事件冒泡机制把原本需要绑定在子元素的响应事件（click、keydown……）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
优点：
例如有一个列表需要绑定点击事件，每一个列表项的点击都需要返回不同的结果。
传统写法：
传统方法会利用for循环遍历列表为每一个列表元素绑定点击事件，当列表中元素数量非常庞大时，需要绑定大量的点击事件，这种方式就会产生性能问题。这种情况下利用事件委托就能很好的解决这个问题。
改用事件委托：
输入搜索时，可以用防抖debounce等优化方式，减少http请求；
这里以滚动条事件举例：防抖函数 onscroll 结束时触发一次，延迟执行
节流函数：只允许一个函数在N秒内执行一次。滚动条调用接口时，可以用节流throttle等优化方式，减少http请求；
下面还是一个简单的滚动条事件节流函数：节流函数 onscroll 时，每隔一段时间触发一次，像水滴一样
参考链接： https://zhuanlan.zhihu.com/p/113864878?from_voters_page=true
