javascript在浏览器中运行的条实性能，可以认为是用技开发者所面临的最严重的可用性问题。这个问题因为javascript的条实阻塞性而变得复杂，事实上，用技多数浏览器使用单一进程来处理用户界面和js脚本执行，条实所以同一时刻只能做一件事。用技js执行过程耗时越久，条实浏览器等待响应的用技时间越长。
当script下载资源时不会阻塞其他script的下载。但是条实js下载仍然会阻塞其他资源的下载，如图片。用技尽管脚本下载不会互相影响，条实但页面仍然必须等待所有js代码下载并执行完才能继续。用技因此仍然存在脚本阻塞问题.推荐将所有js文件放在body标签底部以减少对整个页面的条实影响。
http请求会带来额外的开销，因此下载单个300k的文件将比下载10个30k的文件效率更高。
无论何时启动下载，文件的下载和执行都不会阻塞页面其他进程。香港云服务器
function laodScript(url,callback){
var script = document.createElement(script);
script.type = text/javascript;
if(script.readyState){ // ie
script.onreadystatechange = function(){
if(script.readyState == loaded || script.readyState == complete){
script.onreadystatechange = null;
callback()
}
}
}else{ //其他浏览器
script.onload = function(){
callback()
}
}
script.src = url;
document.getElementsByTagName(head)[0].appendChild(script);
}
// 使用
loadScript(./a.js,function(){
loadScript(./b.js,function(){
loadScript(./c.js,function(){
console.log(加载完成)
})
})
})// 链式调用时文件逐个下载，.wait()用来指定文件下载并执行完毕后所调用的函数
$LAB.script(./a.js)
.script(./b.js)
.wait(function(){
App.init();
})
// 为了保证执行顺序，可以这么做,此时a必定在b前执行
$LAB.script(./a.js).wait()
.script(./b.js)
.wait(function(){
App.init();
})
<通常的做法是减少访问DOM的次数，把运算尽量留在JS这一端。
注：如过在一个对性能要求比较高的操作中更新一段HTML，推荐使用innerHTML，因为它在绝大多数浏览器中运行的都很快。但对于大多数日常操作而言，并没有太大区别，所以你更应该根据可读性，稳定性，团队习惯，代码风格来综合决定使用innerHTML还是createElement()。
HTML集合包含了DOM节点引用的类数组对象，一直与文档保持连接，每次你需要最新的信息时，都会重复执行查询操作，哪怕只是获取集合里元素的个数。
① 优化一——集合转数组collToArr。function collToArr(coll){
for(var i=0, a=[], len=coll.length; i
a.push(coll[i]);
}
return a
}
② 缓存集合length。③ 访问集合元素时使用局部变量(即将重复的集合访问缓存到局部变量中，免费信息发布网用局部变量来操作)。属性名
被替代属性
children
childNodes
childElementCount
childNodes.length
firstElementChild
firstChild
lastElementChild
lastChild
nextElementSibling
nextSibling
previousElementSibling
previousSibling
② 选择器API——querySelectorAll()querySelectorAll()方法使用css选择器作为参数并返回一个NodeList——包含着匹配节点的类数组对象，该方法不会返回HTML集合，因此返回的节点不会对应实时文档结构，着也避免了HTML集合引起的性能问题。
let arr = document.querySelectorAll(div.warning, div.notice > p)浏览器在下载完页面的所有组件——html,js,css,图片等之后，会解析并生成两个内部数据结构—— DOM树，渲染树.一旦DOM树和渲染树构建完成，浏览器就开始绘制页面元素(paint)。
① 重排发生的条件：添加或删除可见的DOM 元素位置变化 元素尺寸改变 内容改变 页面渲染器初始化 浏览器窗口尺寸变化 出现滚动条时会触发整个页面的重排 重排必定重绘。
大多数浏览器通过队列化修改并批量执行来优化重排过程，然而获取布局信息的操作会导致队列强制刷新。
offsetTop,offsetWidth...
scrollTop,scrollHeight...
clientTop,clientHeight...
getComputedStyle()一些优化建议：将设置样式的操作和获取样式的操作分开：
// 设置样式
body.style.color = red;
body.style.fontSize = 24px
// 读取样式
let color = body.style.color
let fontSize = body.style.fontSize另外，获取计算属性的兼容写法：
function getComputedStyle(el){
var computed = (document.body.currentStyle ? el.currentStyle : document.defaultView.getComputedStyle(el,);
return computed
}①.批量改变样式/* 使用cssText */
el.style.cssText = border-left: 1px; border-right: 2px; padding: 20px;
②.批量修改dom的优化方案——使元素脱离文档流-对其应用多重改变-把元素带回文档function appendDataToEl(option){
var targetEl = option.target || document.body,
createEl,
data = option.data || [];
// 让容器脱离文档流，减少重绘重排
var targetEl_display = targetEl.style.display;
targetEl.style.display = none;
// *****创建文档片段来优化Dom操作
****var fragment = document.createDocumentFragment();
// 给元素填充数据
for(var i=0, max = data.length; i< max; i++){
createEl = document.createElement(option.createEl);
for(var item in data[i]){
if(item.toString() === text){
createEl.appendChild(document.createTextNode(data[i][item]));
continue;
}
if(item.toString() === html){
createEl.innerHTML = item,data[i][item];
continue;
}
createEl.setAttribute(item,data[i][item]);
}
// ****将填充好的node插入文档片段
****fragment.appendChild(createEl);
}
// ****将文档片段统一插入目标容器
****targetEl.appendChild(fragment);
// 显示容器，完成数据填充
targetEl.style.display = targetEl_display;
}
// 使用
var wrap = document.querySelectorAll(.wrap)[0];
var data = [
{name: xujaing,text: 选景, title: xuanfij},
{name: xujaing,text: 选景, title: xuanfij},
{name: xujaing,text: 选景, title: xuanfij}
];
appendDataToEl({
target: wrap,
createEl: div,
data: data
});
上面的优化方法使用了文档片段: 当我们把文档片段插入到节点中时，实际上被添加的只是该片段的子节点，而不是片段本身。可以使得dom操作更有效率。
③缓存布局信息//缓存布局信息
let current = el.offsetLeft;
current++;
el.style.left = current + px;
if(current > 300){
stop();
}
④慎用:hover如果有大量元素使用:hover,那么会降低相应速度，CPU升高。
⑤使用事件委托(通过事件冒泡实现)来减少事件处理器的数量，减少内存和处理时间function delegation(e,selector,callback){
e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName !== selector || target.className !== selector || target.id !== selector){
return;
}
if(typeof e.preventDefault === function){
e.preventDefault();
e.stopPropagation();
}else{
e.returnValue = false;
e.cancelBubble = true;
}
callback()
}
// for 循环
for(var i=item.length; i--){
process(item[i]);
}
// while循环
var j = item.length;
while(j--){
process(item[i]);
}
items.forEach(function(value,index,array){
process(value);
})
1.除了IE外，其他浏览器会尝试为表达式左侧的字符串分配更多的内存，然后简单的将第二个字符串拷贝到他的末尾，如果在一个循环中，基础字符串位于最左侧，就可以避免重复拷贝一个逐渐变大的基础字符串。2.使用[\s\S]来匹配任意字符串 3.去除尾部空白的常用做法：
if(!String.prototype.trim){
String.prototype.trim = function(){
return this.replace(/^s+/,).replace(/ss*$/, )
}
}
function multistep(steps,args,callback){
var tasks = steps.concat();
setTimeout(function(){
var task = tasks.shift();
task.apply(null, args || []); //调用Apply参数必须是数组
if(tasks.length > 0){
setTimeout(arguments.callee, 25);
}else{
callback();
}
},25);
}
function timeProcessArray(items,process,callback){
var todo = item.concat();
setTimeout(function(){
var start = +new Date();
do{
process(todo.shift());
}while(todo.length > 0 && (+new Date() - start < 50));
if(todo.length > 0){
setTimeout(arguments.callee, 25);
}else{
callback(items);
}
},25)
}
应用场景
编码/解码大字符串复杂数学运算(包括图像，视屏处理)大数组排序// worker.js
var worker = new Worker(code.js);
// 接收信息
worker.onmessage = function(event){
console.log(event.data);
}
// 发送数据
worker.postMessage(hello);
// code.js
// 导入其他计算代码
importScripts(a.js,b.js);
self.onmessage = function(event){
self.postMessage(hello + event.data);
}
// 唯一缺点是接收到的响应类型是有限的
var url = /req.php;
var params = [step=2,time=123];
(new Image()).src = url + ? + params.join(&);
// 如果向监听服务端发送回的数据，可以在onload中实现
var beacon = new Image();
beacon.src = ...;
beacon.onload = function(){
...
}
beacon.onerror = function(){
...
}
缓存数据
在服务端设置Expires头信息确保浏览器缓存多久响应(必须GET请求)客户端把获取到的信息缓存到本地，避免再次请求// 1.延迟加载
var a = (x,y) =>{
if(x > 4){
a = 0;
}else{
a = 1;
}
}
// 需要使用时调用
a();
// 2.条件预加载（适用于函数马上执行并频繁操作的场景）
var b = a > 0 ? 4 : 0;
当web浏览器请求一个资源时，它通常会发送一个Accept-Encoding HTTP头来告诉Web服务器它支持那种编码转换类型。这个信息主要用来压缩文档以获取更快的下载，从而改善用户体验。Accept-Encoding可用的值包括：gzip,compress,deflate,identity. 如果Web服务器在请求中看到这些信息头，他会选择最合适的编码方式，并通过Content-Encoding HTTP头通知WEB浏览器它的决定。
// 检测代码运行时间
var Timer = {
_data: {},
start: function(key){
Timer._data[key] = new Date();
},
stop: function(key){
var time = Timer._data[key];
if(time){
Timer._data[key] = new Date() - time;
};
console.log(Timer._data[key]);
return Timer._data[key]
}
};
// 浏览器请求时对http header设置
Accept-Encoding: gzip
// Web服务器响应时对http header设置
Content-Encoding: gzip
浏览器(如IE)在样式表没有完全下载完成之前不会呈现页面，导致页面白屏。如果样式表放在页面底部，那么浏览器会花费更长的时间下载样式表，因此会出现白屏，所以最好把样式表放在head内。白屏是浏览器对“无样式闪烁”的修缮。如果浏览器不采用“白屏”机制，将页面内容逐步显示(如Firefox)，则后加载的样式表将导致页面重绘重排，将会承担页面闪烁的风险。
使用css表达式时执行函数重写自身：
// css
p{
background-color: expression(altBgcolor(this))
}
// js
function altBgcolor(el){
el.style.backgroundColor = (new Date()).getHours() % 2 ? "#fff" : "#06c";
}
1.DNS查找可以被缓存起来以提高性能：DNS信息会留在操作系统的DNS缓存中(Microsoft Windows上的“DNS Client服务”,之后对该主机名的请求无需进行过多的查找。
2.TTL(time to live): 该值告诉客户端可以对记录缓存多久。建议将TTL值设置为一天// 客户端收到DNS记录的平均TTL只有最大TTL值的一半因为DNS解析器返回的时间是其记录的TTL的剩余时间，对于给定的主机名，每次执行DNS查找时接收的TTL值都会变化。
3.通过使用Keep-Alive和较少的域名来减少DNS查找。
4.一般建议将页面组件分别放到至少2个，但不要超过4个主机名下复制代码。
这块需要前后端共同配合，对页面路由进行统一规范。
(责任编辑：应用开发)
