Web前端性能优化有哪些实用技巧？_惠州前端培训学校

Web前端性能优化有哪些实用技巧？今天我们跟着惠州北大青鸟老师一起来了解一下，希望对大家有帮助。

Javascript在浏览器中运行的性能，可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂，事实上，多数浏览器使用单一进程来处理用户界面和js脚本执行，所以同一时刻只能做一件事。js执行过程耗时越久，浏览器等待响应的时间越长。

一、提高加载性能

1.IE8,FF,3.5,Safari 4和Chrome都允许并行下载js文件，当script下载资源时不会阻塞其他script的下载。但是js下载仍然会阻塞其他资源的下载，如图片。尽管脚本下载不会互相影响，但页面仍然必须等待所有js代码下载并执行完才能继续。因此仍然存在脚本阻塞问题.推荐将所有js文件放在body标签底部以减少对整个页面的影响。

2.减少页面外链脚本文件的数量将会提高页面性能：

http请求会带来额外的开销，因此下载单个300k的文件将比下载10个30k的文件效率更高。

3.动态脚本加载技术：

无论何时启动下载，文件的下载和执行都不会阻塞页面其他进程。

functionlaodScript(url,callback){

varscript =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('加载完成')       

})   

})

})

4.无阻塞加载类库——LABjs,使用方法如下：

<script src="lab.js"></script>

//链式调用时文件逐个下载，.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();

})

二、数据存取与JS性能

1.在js中，数据存储的位置会对代码整体性能产生重大影响。数据存储共有4种方式：字面量，变量，数组项，对象成员。他们有着各自的性能特点。

2.访问字面量和局部变量的速度最快，相反，访问数组和对象相对较慢

3.由于局部变量存在于作用域链的起始位置，因此访问局部变量的比访问跨域作用变量更快

4.嵌套的对象成员会明显影响性能，应尽量避免

5.属性和方法在原型链位置越深，访问他的速度越慢

6.通常我们可以把需要多次使用的对象成员，数组元素，跨域变量保存在局部变量中来改善js性能

三、DOM编程

1.访问DOM会影响浏览器性能，修改DOM则更耗费性能，因为他会导致浏览器重新计算页面的几何变化。<通常的做法是减少访问DOM的次数，把运算尽量留在JS这一端。

注：如过在一个对性能要求比较高的操作中更新一段HTML，推荐使用innerHTML，因为它在绝大多数浏览器中运行的都很快。但对于大多数日常操作而言，并没有太大区别，所以你更应该根据可读性，稳定性，团队习惯，代码风格来综合决定使用innerHTML还是createElement()

2. HTML集合优化

HTML集合包含了DOM节点引用的类数组对象，一直与文档保持连接，每次你需要最新的信息时，都会重复执行查询操作，哪怕只是获取集合里元素的个数。

①  优化一——集合转数组collToArr

functioncollToArr(coll){   

for(vari=0, a=[], len=coll.length; i<len; i++){

a. push(coll[i]);

 }   

returna

}

② 缓存集合length

③ 访问集合元素时使用局部变量（即将重复的集合访问缓存到局部变量中，用局部变量来操作）

3.遍历DOM

① 使用只返回元素节点的API遍历DOM,因为这些API的执行效率比自己实现的效率更高：

属性名

被替代属性

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')

4.重绘和重排

浏览器在下载完页面的所有组件——html,js,css,图片等之后，会解析并生成两个内部数据结构—— DOM树，渲染树.一旦DOM树和渲染树构建完成，浏览器就开始绘制页面元素（paint）.

① 重排发生的条件：

添加或删除可见的DOM元素位置变化 元素尺寸改变 内容改变 页面渲染器初始化 浏览器窗口尺寸变化 出现滚动条时会触发整个页面的重排 重排必定重绘

5.渲染树变化的排列和刷新

大多数浏览器通过队列化修改并批量执行来优化重排过程，然而获取布局信息的操作会导致队列强制刷新。

offsetTop,offsetWidth...

scrollTop,scrollHeight...

clientTop,clientHeight...

getComputedStyle()

一些优化建议：将设置样式的操作和获取样式的操作分开：

//设置样式

body.style.color ='red';

body.style.fontSize ='24px'

//读取样式

letcolor = body.style.color

let fontSize = body.style.fontSize

另外，获取计算属性的兼容写法：

functiongetComputedStyle(el){   

varcomputed = (document.body.currentStyle ? el.currentStyle :document.defaultView.getComputedStyle(el,'');   

returncomputed

}

6.最小化重绘和重排

①.批量改变样式

/*使用cssText */el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 20px';

②.批量修改dom的优化方案——使元素脱离文档流-对其应用多重改变-把元素带回文档

function appendDataToEl(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.length; i< max; i++){       

createEl = document.createElement(option.createEl);       

for(varitemindata[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;

}
//使用

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', 

 data:data

});

上面的优化方法使用了文档片段: 当我们把文档片段插入到节点中时，实际上被添加的只是该片段的子节点，而不是片段本身。可以使得dom操作更有效率。

② .缓存布局信息

//缓存布局信息

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'){     

 e.preventDefault();       

e.stopPropagation();

}else{       

e.returnValue =false;

e.cancelBubble =true;   

}
   callback()}

四、算法和流程控制

1.循环中减少属性查找并反转(可以提升50%-60%的性能)

// for循环

for(vari=item.length; i--){   

process(item[i]);

}

// while循环

varj = item.length;

while(j--){   

process(item[i]);

}

2.使用Duff装置来优化循环（该方法在后面的文章中会详细介绍）

3.基于函数的迭代（比基于循环的迭代慢）

items.forEach(function(value,index,array){   process(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();
   setTimeout(function(){       

vartask = tasks.shift();       

task.apply(null, args || []);  //调用Apply参数必须是数组
       

if(tasks.length >0){           

setTimeout(arguments.callee,25); 

     }else{          

 callback();      

 }   

},25);

}

4.记录代码运行时间批处理任务：

functiontimeProcessArray(items,process,callback){   

vartodo = item.concat();

   setTimeout(function(){       

varstart = +newDate();
   do{          

 process(todo.shift());       

}while(todo.length >0&& (+newDate() - start <50));
       if(todo.length >0){          

 setTimeout(arguments.callee,25); 

     }else{         

 callback(items);   

}  

 },25)

}

5.使用Web Worker：它引入了一个接口，能使代码运行且不占用浏览器UI线程的时间。一个Worker由如下部分组成：

① 一个navigator对象，包括appName,appVersion,user Agent和platform.

② 一个location对象，只读。

③ 一个self对象，指向全局worker对象

④ 一个importScripts()方法，用来加载worker所用到的外部js文件

⑤ 所有的ECMAScript对象。如object,Array,Date等

⑥XMLHttpRequest构造器

⑦setTimeout()，setInterval()

⑧ 一个close()方法，它能立刻停止worker运行

应用场景

1.编码/解码大字符串

2. 复杂数学运算（包括图像，视屏处理）

3. 大数组排序

// worker.js

varworker =newWorker('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);

}

七、ajax优化

1.向服务器请求数据的五种方式：

①XMLHttpRequest

②Dynamic script tag insertion动态脚本注入

③iframes

④Comet（基于http长连接的服务端推送技术）

⑤Multipart XHR（允许客户端只用一个http请求就可以从服务器向客户端传送多个资源）

2.单纯向服务端发送数据（beacons方法）——信标

//唯一缺点是接收到的响应类型是有限的

varurl ='/req.php';

varparams = ['step=2','time=123'];
(newImage()).src = url +'?'+ params.join('&');
//如果向监听服务端发送回的数据，可以在onload中实现

varbeacon =newImage();

beacon.src = ...;

beacon.onload =function(){

...

}

beacon.onerror =function(){  

 ...

}

3.ajax性能的一些建议

缓存数据

1.在服务端设置Expires头信息确保浏览器缓存多久响应（必须GET请求）

2.客户端把获取到的信息缓存到本地，避免再次请求

八、编程实践

1.避免重复工作

// 1.延迟加载

vara = (x,y) =>{   

if(x >4){      

 a =0;

  }else{    

  a =1;  

 }

}//需要使用时调用

a();

// 2.条件预加载（适用于函数马上执行并频繁操作的场景）var b = a > 0 ? '4' : '0';

2.使用Object/Array字面量

3.多用原生方法

九、构建与部署高性能的js应用

1.js的http压缩 当Web浏览器请求一个资源时，它通常会发送一个Accept-Encoding HTTP头来告诉Web服务器它支持那种编码转换类型。这个信息主要用来压缩文档以获取更快的下载，从而改善用户体验。Accept-Encoding可用的值包括：gzip,compress,deflate,identity.如果Web服务器在请求中看到这些信息头，他会选择最合适的编码方式，并通过Content-Encoding HTTP头通知WEB浏览器它的决定。

2.使用H5离线缓存

3.使用内容分发网络CDN

4.对页面进行性能分析

//检测代码运行时间

varTimer = {  

 _data: {},   

start:function(key){  

    Timer._data[key] =newDate();   

},  

 stop:function(key){       

vartime = Timer._data[key];       

if(time){         

 Timer._data[key] =newDate() - time;

       };       

console.log(Timer._data[key]);      

 returnTimer._data[key] 

 }

};

十、浏览器缓存

1.添加Expires头

2.使用cache-control cache-ontrol详解 浏览器缓存机制

十一、压缩组件

1.Web客户端可以通过http请求中的Accept-Encoding头来表示对压缩的支持

//浏览器请求时对http header设置

Accept-Encoding: gzip

// Web服务器响应时对http header设置

Content-Encoding: gzip

2.压缩能将响应的数据量减少将近70%，因此可考虑对html,脚本，样式，图片进行压缩

十二、白屏现象的原因

浏览器（如IE）在样式表没有完全下载完成之前不会呈现页面，导致页面白屏。如果样式表放在页面底部，那么浏览器会花费更长的时间下载样式表，因此会出现白屏，所以最好把样式表放在head内。白屏是浏览器对“无样式闪烁”的修缮。如果浏览器不采用“白屏”机制，将页面内容逐步显示（如Firefox），则后加载的样式表将导致页面重绘重排，将会承担页面闪烁的风险。

十三、css表达式使用一次性表达式(但最好避免css表达式)

使用css表达式时执行函数重写自身

// css

p{   

background-color: expression(altBgcolor(this))

}

// js

functionaltBgcolor(el){   

el.style.backgroundColor = (newDate()).getHours() %2?"#fff":"#06c";

}

十四、减少DNS查找

DNS缓存和TTL

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个主机名下
复制代码

十五、避免重定向

这块需要前后端共同配合，对页面路由进行统一规范。

想了解更多关于前端的资讯，可以来惠州北大青鸟新方舟校区了解一下。

标签：惠州前端培训学校惠州前端基础惠州前端培训北大青鸟IT计算机学校北大青鸟IT软件学校前端北大青鸟IT学校惠州北大青鸟北大青鸟