javascript在瀏覽器中運行的性能,能夠認爲是開發者所面臨的最嚴重的可用性問題。這個問題由於javascript的阻塞性而變得複雜,事實上,多數瀏覽器使用單一進程來處理用戶界面和js腳本執行,因此同一時刻只能作一件事。js執行過程耗時越久,瀏覽器等待響應的時間越長。javascript
1.IE8,FF,3.5,Safari 4和Chrome都容許並行下載js文件,當script下載資源時不會阻塞其餘script的下載。可是js下載仍然會阻塞其餘資源的下載,如圖片。儘管腳本下載不會互相影響,但頁面仍然必須等待全部js代碼下載並執行完才能繼續。所以仍然存在腳本阻塞問題.推薦將全部js文件放在body標籤底部以減小對整個頁面的影響。php
2.減小頁面外鏈腳本文件的數量將會提升頁面性能:http請求會帶來額外的開銷,所以下載單個300k的文件將比下載10個30k的文件效率更高。css
3.動態腳本加載技術:不管什麼時候啓動下載,文件的下載和執行都不會阻塞頁面其餘進程。html
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('加載完成')
})
})
})
複製代碼
<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();
})
複製代碼
1.在js中,數據存儲的位置會對代碼總體性能產生重大影響。數據存儲共有4種方式:字面量,變量,數組項,對象成員。他們有着各自的性能特色。前端
2.訪問字面量和局部變量的速度最快,相反,訪問數組和對象相對較慢vue
3.因爲局部變量存在於做用域鏈的起始位置,所以訪問局部變量的比訪問跨域做用變量更快java
4.嵌套的對象成員會明顯影響性能,應儘可能避免node
5.屬性和方法在原型鏈位置越深,訪問他的速度越慢react
6.一般咱們能夠把須要屢次使用的對象成員,數組元素,跨域變量保存在局部變量中來改善js性能css3
注:如過在一個對性能要求比較高的操做中更新一段HTML,推薦使用innerHTML,由於它在絕大多數瀏覽器中運行的都很快。但對於大多很多天常操做而言,並無太大區別,因此你更應該根據可讀性,穩定性,團隊習慣,代碼風格來綜合決定使用innerHTML仍是createElement()
HTML集合包含了DOM節點引用的類數組對象,一直與文檔保持鏈接,每次你須要最新的信息時,都會重複執行查詢操做,哪怕只是獲取集合裏元素的個數。
1.優化一——集合轉數組collToArr
function collToArr(coll){
for(var i=0, a=[], len=coll.length; i<len; i++){
a.push(coll[i]);
}
return a
}
複製代碼
2.緩存集合length
3.訪問集合元素時使用局部變量(即將重複的集合訪問緩存到局部變量中,用局部變量來操做)
1.使用只返回元素節點的API遍歷DOM,由於這些API的執行效率比本身實現的效率更高:
屬性名 | 被替代屬性 |
children | childNodes |
childElementCount | childNodes.length |
firstElementChild | firstChild |
lastElementChild | lastChild |
nextElementSibling | nextSibling |
previousElementSibling | previousSibling |
querySelectorAll()方法使用css選擇器做爲參數並返回一個NodeList——包含着匹配節點的類數組對象,該方法不會返回HTML集合,所以返回的節點不會對應實時文檔結構,着也避免了HTML集合引發的性能問題。
let arr = document.querySelectorAll('div.warning, div.notice > p')
複製代碼
瀏覽器在下載完頁面的全部組件——html,js,css,圖片等以後,會解析並生成兩個內部數據結構—— DOM樹,渲染樹.一旦DOM樹和渲染樹構建完成,瀏覽器就開始繪製頁面元素(paint).
1.重排發生的條件:
添加或刪除可見的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
}
複製代碼
1.批量改變樣式
/* 使用cssText */
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 20px';
複製代碼
2.批量修改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操做更有效率。
3.緩存佈局信息
//緩存佈局信息
let current = el.offsetLeft;
current++;
el.style.left = current + 'px';
if(current > 300){
stop();
}
複製代碼
4.慎用:hover
若是有大量元素使用:hover,那麼會下降相應速度,CPU升高
5.使用事件委託(經過事件冒泡實現)來減小事件處理器的數量,減小內存和處理時間
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()
}
複製代碼
1.循環中減小屬性查找並反轉(能夠提高50%-60%的性能)
// for 循環
for(var i=item.length; i--){
process(item[i]);
}
// while循環
var j = 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(){
return this.replace(/^\s+/,'').replace(/\s\s*$/, '')
}
}
複製代碼
1.瀏覽器的UI線程:用於執行javascript和更新用戶界面的進程。
2.在windows系統中定時器分辨率爲15毫秒,所以設置小於15毫秒將會使IE鎖定,延時的最小值建議爲25ms.
3.用延時數組分割耗時任務:
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);
}
複製代碼
4.記錄代碼運行時間批處理任務:
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)
}
複製代碼
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運行
// 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);
}
複製代碼
1.向服務器請求數據的五種方式:
XMLHttpRequest
Dynamic script tag insertion 動態腳本注入
iframes
Comet(基於http長鏈接的服務端推送技術)
Multipart XHR(容許客戶端只用一個http請求就能夠從服務器向客戶端傳送多個資源)
2.單純向服務端發送數據(beacons方法)——信標
// 惟一缺點是接收到的響應類型是有限的
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(){
...
}
複製代碼
3.ajax性能的一些建議
1.緩存數據
1.避免重複工做
// 1.延遲加載
var a = (x,y) =>{
if(x > 4){
a = 0;
}else{
a = 1;
}
}
// 須要使用時調用
a();
// 2.條件預加載(適用於函數立刻執行並頻繁操做的場景)
var b = a > 0 ? '4' : '0';
複製代碼
2.使用Object/Array字面量
3.多用原生方法
1.js的http壓縮 當web瀏覽器請求一個資源時,它一般會發送一個Accept-Encoding HTTP頭來告訴Web服務器它支持那種編碼轉換類型。這個信息主要用來壓縮文檔以獲取更快的下載,從而改善用戶體驗。Accept-Encoding可用的值包括:gzip,compress,deflate,identity. 若是Web服務器在請求中看到這些信息頭,他會選擇最合適的編碼方式,並經過Content-Encoding HTTP頭通知WEB瀏覽器它的決定。
2.使用H5離線緩存
3.使用內容分發網絡CDN
4.對頁面進行性能分析
// 檢測代碼運行時間
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]
}
};
複製代碼
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
p{
background-color: expression(altBgcolor(this))
}
// js
function altBgcolor(el){
el.style.backgroundColor = (new Date()).getHours() % 2 ? "#fff" : "#06c";
}
複製代碼
1.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個主機名下
複製代碼
這塊須要先後端共同配合,對頁面路由進行統一規範。
歡迎一塊兒探索打造高性能的web應用,在公衆號《趣談前端》加入咱們一塊兒討論吧!