① Web前端性能優化的實用技巧匯總
今天小編要跟大家分享的文章是關於Web前端性能優化的實用技巧匯總。javascript在瀏覽器中運行的性能，可以認為是開發者所面臨的最嚴重的可用性問題。這個問題因為javascript的阻塞性而變得復雜，事實上，多數瀏覽器使用單一進程來處理用戶界面和js腳本執行，所以同一時刻只能做一件事。js執行過程耗時越久，瀏覽器等待響應的時間越長。
一.提高載入性能
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則更耗費性能，因為他會導致瀏覽器重新計算頁面的幾何變化。<通常的做法是減少訪問DOM的次數，把運算盡量留在JS這一端。
注團御：如過在一個對性能要求比較高的操作中更新一段HTML，推薦使用innerHTML，因為它在絕大多數瀏覽器中運行的都很快。但對於大多數日常操作而言，並沒有太大區別，所以你更應該根據可讀性，穩定性，團隊習慣，代碼風格來綜合決定使用innerHTML還是createElement()
2.HTML集合優化
HTML集合包含了DOM節點引用的類數組對象，一直與文檔保持連接，每次你需要最新的信息時，都會重復執行查詢操作，哪怕只是獲取集合里元素的個數。
①_優化一——集合轉數組collToArr
functioncollToArr(coll){_
for(vari=0,a=[],len=coll.length;i
a._ush(coll[i]);
__
returna
}
②緩存集合length
③訪問集合元素時使用局部變數（即將重復的集合訪問緩存到局部變數中，用局部變數來操作）
3.遍歷DOM
①使用只返回元素節點的API遍歷DOM,因為這些API的執行效率比自己實現的效率更高：
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display: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=པpx'
//讀取樣式
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.length;i
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.length;i--){_
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.使用[sS]來匹配任意字元串3.去除尾部空白的常用做法：
if(!String.prototype.trim){_
String.prototype.trim=function(){___
returnthis.replace(/^s+/,'').replace(/ss*$/,'')_
}
}
六.快速響應的用戶界面
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<50));
____f(todo.length>0){_____
_etTimeout(arguments.callee,25);
___else{____
_allback(items);_
}_
_,25)
}
5.使用WebWorker：它引入了一個介面，能使代碼運行且不佔用瀏覽器UI線程的時間。一個Worker由如下部分組成：
①一個navigator對象，包括app
② 解決 Web 開發中常見的中文亂碼問題
產生亂碼的原因一句話就能說明白：
比如說在後端把字元串 "你好,世界" 按照 UTF-8 進行編碼，但是前端卻按照 GB2312 進行解碼，那自然會產生亂碼。
因為目前大部分瀏覽器都是採用 UTF-8 編碼的，所以向瀏覽器輸出中文字元，只需在 doGet 方法中指定 Content-Type：text/html;charset=utf-8。
獲取 HTTP 請求中的中文參數時可能會有亂碼，所以先將字元串變回位元組數組，然後再按照 UTF-8 進行編碼。假設 HTTP 請求中帶了一個 username 的參數，那麼就需要在 doGet 方法中進行如下處理
問題是，在實際的應用場景中 HTTP 請求攜帶的參數可能有多個，所以就不能只針對某個參數進行修改。解決的方案是使用裝飾器模式，寫一個 HttpServletRequest 的裝飾器類，經過裝飾的 request 對請求中的任何參數都能進行編碼的處理。
然後用一個 Filter 對所有的請求進行編碼的處理，然後再把處理過後的 request 對象傳遞給 Servlet：
因為大多數情況下我們在 doPost 方法內都會調用 doGet 方法，因此按照上面的做法就能解決 POST 請求中的中文亂碼問題。如果使用 Spring 進行開發，那麼有 POST 請求亂碼的專門解決方案。在 web.xml 中添加如下配置：
這樣就可以解決 POST 的亂碼問題了。
③ python進行web開發的優勢在哪_python做web怎麼樣
語法：PHP的語法看起來就像沒有經過精心設計一樣，很隨意。有的語法看似很方便(用點來連接字元串),但是卻為之後擴展造成了很多麻煩(點沒法用於訪問對象的成員),再比如比較蛋疼的命名空間的語法。Python相比之下要好一點，但是Python2和Python3直接團差存在著一些不兼容的語法變動。
編寫HTML模版：PHP可以非常方便地直接用來編寫HTML模版，Python需要藉助其他的語言或庫來實現。
包管理器：PHP的包管理器(PEAR)和擴展管理器(PECL)恐怕根本沒人用，這導致引入一個新依賴的成本差汪很高，於是很多人傾向於自己造輪子而不是引入現成的庫。Python有統一的包管理器，雖然也有問題，但要比PHP好得多，引入庫之後的命名空間管理也要比PHP好。
擴展和庫：PHP和Python都可以用C來編寫擴展。相比之下Python可用的庫要更多一點。
運行方式：PHP運行方式比較單一(php-fpm,mod_php),Python則可以以fastCGI運行，也可以自行監聽埠來處理請求。
性能：因為PHP運行方式單一，opcode緩存方案也比較成熟(APC,opcache)，緩存opcode之後運行速度很快。Python則可能需要更多地自行優化性能。
類型系統：PHP和Python都是動態類型。PHP對類型判別比較模糊，有很多陷阱，Python則嚴格一些。
學習成本：PHP和學習成本都不是很高。PHP優勢在於有比較完整的官方中文文檔，而且PHP應用領域只有Web,所以需要學習的內容較少。Python因為學習路塌慶皮線較多，不太容易找到適合自己的教程和資料。
社區：PHP的資料遍地，但是高質量的中文社區較少，普遍對官方的新功能不是很關注。Python則要好一點。
應用領域：PHP僅在Web後端方面被使用，Python應用領域更廣泛一點，如果需要將邏輯移植到其他平台(如桌面),Python要方便一點
④ Web前端新手應該知道的JavaScript開發技巧有哪些
今天小編要跟大家分享的文章是關於Web前端新手應該知道的JavaScript開發技巧有哪些?熟悉Web前端的小夥伴都知道，Javascript
的很多擴展的特性是的它變得更加的犀利，同時也給予程序員機會創建更漂亮並且更讓用戶喜歡的網站。
盡管很多的開發人員都樂於頌揚javascript，但是仍舊有人看到它的陰暗面。
使用很多javascript代碼的Web頁面會載入很慢，過多的使用javascript使得網頁醜陋和拖沓。很快如何有效地使用
javascript成為一個非常火熱的話題。
今天小編就為Web前端新手准備了這篇JavaScript開發技巧，希望能夠對你有所幫助，下面我們一起來看一看吧!
1、盡可能的保持代碼簡潔
可能大家都聽到過了N遍這個代碼簡潔問題了。作為一個開發人員你可能在你的代碼開發過程中使用了很多次，但千萬不要在js開發中忘記這點。
§盡量在開發模式中添加註釋和空格，這樣保持代碼的可讀性
§在發布到產品環境前請將空格和注釋都刪除，並且盡量縮寫變數和方法名
§使用第三方工具幫助你實現壓縮javascript。
2、思考後再修改prototypes
添加新的屬性到對象prototype中是導致腳本出錯的常見原因。
yourObject.prototype.anotherFunction='Hello'
yourObject.prototype.anotherMethod=function(){...}
在上面代碼中，所有的變數都會被影響，因為他們都繼承於yourObject。這樣的使用會導致意想不到的行為。所以建議在使用完後刪除類似的修改。
yourObject.prototype.anotherFunction='Hello'
yourObject.prototype.anotherMethod=function(){};
test.anotherMethod();
deleteyourObject.prototype.anotherFunction='Hello'
deleteyourObject.prototype.anotherMethod=function(){};
3、DebugJavascript代碼
即使最好的開發人員都會犯錯。為了最大化的減少類似錯誤，請在你的debugger中運行你的代碼，確認你沒有遇到任何細微的錯誤。
4、避免Eval
你的JS在沒有eval方法的時候也可以很好的工作。eval允許訪問javascript編譯器。如果一個字元串作為參數傳遞到
eval，那麼它的結果可以被執行。
這會很大的降低代碼的性能。盡量避免在產品環境中使用eval。
5、最小化DOM訪問
DOM是最復雜的API，會使得代碼執行過程變慢。有時候Web頁面可能沒有載入或者載入不完整。最好避免DOM。
6、在使用javascript類庫之前先學習javascript
互聯網充斥著很多的javascript類庫，很多程序員都往往使用js類庫而不理解負面影響。強烈建議你在使用第三方類庫之前學習基本的JS
代碼，否則，你就准備著倒霉吧。
7、不要用「SetTimeOut」和「Setinterval」方法來作為「Eval」的備選
setTimeOut("document.getID('value')",3000);
在以上代碼中document.getID(『value』)在setTimeOut方法中被作為字元串來處理。這類似於eval
方法，在每個代碼執行中來執行一個字元串，因此會降低性能，因此，建議在這些方法中傳遞一個方法。
setTimeOut(yourFunction,3000);
8、[]比newArray();更好
一個常犯的錯誤在於使用當需要數組的時候使用一個對象或者該使用對象的時候使用一個數組。但是使用原則很簡單：
「當屬性名稱是小的連續整數，你應該使用數組。否則，使用一個對象」_DouglasCrockford,JavaScript:Good
Parts的作者.
建議：
vara=[ƇA',ƈB'];
避免：
vara=newArray();
a[0]="1A";
a[1]="2B";
9、盡量不要多次使用var
在初始每一個變數的時候，程序員都習慣使用var關鍵字。相反，建議你使用逗號來避免多餘的關鍵字，並且減少代碼體積。如下：
varvariableOne='string1',
variableTwo='string2',
variableThree='string3'
10、不要忽略分號「;」
這往往是大家花費數個小時進行debug的原因之一。
我很確信你肯定也在其它的文章中閱讀過以上相關的內容，但是大家可能往往都忽略了很多基本的規則。你是不是也曾經忽略過分號。是不是也遇到過eval
關鍵字問題導致性能問題?
以上就是小編今天為大家分享的關於Web前端新手應該知道的JavaScript
開發技巧有哪些?的文章，希望本篇文章能夠對剛剛接觸Web前端行業的新手們有所幫助。想要了解更多Web前端知識記得關注北大青鳥Web前端培訓官網!
*聲明：內容與圖片均來源於網路(部分內容有修改)，版權歸原作者所有，如來源信息有誤或侵犯權益，請聯系我們刪除或授權事宜。
⑤ Web前端開發知識點之JavaScript的介紹與語法
今天小編要跟大家分享的文章是關於Web前端開發知識點之JavaScript的介紹與語法。正在學習web前端相關知識的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。
一、JavaScript介紹
JavaScript是一門客戶端腳本語言，是適應動態網頁製作的需要而誕生的一種編程語言。這門語言可用於HTML和web，更可廣泛用於伺服器、PC、筆記本電腦、平板電腦和智能手機等設備。
在HTML基礎上，使用Javascript可以開發互動式Web網頁，可以增強用戶和HTML頁面的交互過程，可以控制HTML元素讓頁面有一些動態的效果，增強用戶的體驗。
JavaScript使有規律地重復的HTML文段簡化，減少下載時間。
二、JavaScript語法
①與HTML的結合方式
JavaScript與HTML的結合方式有兩種，一種是內部JavaScript，一種是外部JavaScript，定義的方式與CSS類似。
內部JavaScript需要定義一對
外部JavaScript也需要定義一對
注意：JavaScript可以定義在HTML頁面的任何地方，但是定義的位置會影響執行的順序。而且可以在HTML文檔中放入不限數量的腳本。通常的做法是把函數放入
②注釋
JavaScript的注釋與java相同，一種是「//」單行注釋，一種是「/**/」多行注釋。例如
//這是單行注釋
/*
這是多行注釋
這是多行注釋*/
③數據類型
JavaScript的數據類型包括兩大類：原始數據類型和引用數據類型。
原始數據類型包括：
·number數字：包括整數、小數和NaN(notanumber不是數字的數字類型)
·string字元串
·boolean布爾型：包括true和false
·null：一個對象為空的佔位符
·undefined：未定義
引用數據類型就是指對象類型。
④變數
所謂變數就是一小塊存儲數據的內存空間。java語言是強類型語言，在開辟變數存儲空間時就定義了存儲數據的類型，而且只能存儲固定類型的數據;JavaScript是弱類型語言，在開辟變數存儲空間時不定義存儲數據的類型，可以存儲任意類型的數據。
聲明變數用var關鍵字，例如：
vara=3;
我們可以使用typeof運算符獲取變數的類型。
⑤運算符
JavaScript中的運算符與java中的基本一致，大家可以參考這個鏈接復習一下，接下來我再說說JavaScript里比較特殊的運算符。
在說運算符之前先說一個注意事項：在JavaScript中如果運算數不是運算符所要求的的類型，那麼JavaScript引擎會自動將運算數進行類型轉換。
因此在JavaScript中1=="1"的結果是true，那麼我想讓他的結果是false該怎麼辦呢?所以JavaScript引入了新的運算符全等於(===)，此時1==="1"的結果就是false了。
⑥流程式控制制語句
JavaScript中流程式控制制語句包括if...else...、switch、while、do...while...、for等，語法規則與java中完全一致，點擊上方關鍵詞可查看java語法規則。
⑦特殊語法(不建議)
JavaScript語句以;結尾，如果一行只有一條語句則;可以省略。
變數定義是使用var關鍵字，也可以不使用。
以上就是小編今天為大家分享的關於Web前端開發知識點之JavaScript的介紹與語法的文章，希望本篇文章能夠對正在從事web前端工作和學習的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的web前端工程師。
文章來源：原創凱哥的故事凱哥的故事