web前端優(yōu)化性能方法

減少http請(qǐng)求合理設(shè)置 HTTP緩存

在動(dòng)態(tài)網(wǎng)頁(yè)中，我們難免會(huì)與后臺(tái)服務(wù)器交互，減少http請(qǐng)求的數(shù)目在性能提升上是十分明顯的。比如我們可以：

1. 簡(jiǎn)化步驟，將請(qǐng)求數(shù)據(jù)盡可能的封裝在少的接口中，當(dāng)然這是不破壞程序可擴(kuò)展性及健壯性的情況下。

2. 合并壓縮css與JS等文件，圖片較多的頁(yè)面也可以使用 lazyLoad 等技術(shù)進(jìn)行優(yōu)化。

3. 為不常變化的請(qǐng)求數(shù)據(jù)設(shè)置http緩存

合理放置CSS與JS的位置

瀏覽器會(huì)在下載完成全部CSS之后才對(duì)整個(gè)頁(yè)面進(jìn)行渲染，因此最好的做法是將CSS放在頁(yè)面最上面，讓瀏覽器盡快下載CSS。如果將 CSS放在其他地方比如 BODY中，則瀏覽器有可能還未下載和解析到 CSS就已經(jīng)開(kāi)始渲染頁(yè)面了，這就導(dǎo)致頁(yè)面由無(wú) CSS狀態(tài)跳轉(zhuǎn)到 CSS狀態(tài)，用戶(hù)體驗(yàn)比較糟糕，所以可以考慮將CSS放在HEAD中。
Javascript則相反，瀏覽器在加載javascript后立即執(zhí)行，有可能會(huì)阻塞整個(gè)頁(yè)面，造成頁(yè)面顯示緩慢，因此javascript最好放在頁(yè)面最下面。但如果頁(yè)面解析時(shí)就需要用到j(luò)avascript，這時(shí)放到底部就不合適了。
Lazy Load Javascript（只有在需要加載的時(shí)候加載，在一般情況下并不加載信息內(nèi)容。）隨著 Javascript框架的流行，越來(lái)越多的站點(diǎn)也使用起了框架。不過(guò)，一個(gè)框架往往包括了很多的功能實(shí)現(xiàn)，這些功能并不是每一個(gè)頁(yè)面都需要的，如果下載了不需要的腳本則算得上是一種資源浪費(fèi) -既浪費(fèi)了帶寬又浪費(fèi)了執(zhí)行花費(fèi)的時(shí)間。目前的做法大概有兩種，一種是為那些流量特別大的頁(yè)面專(zhuān)門(mén)定制一個(gè)專(zhuān)用的 mini版框架，另一種則是 Lazy Load。

減少重排與重繪

當(dāng)DOM的變化影響了元素的幾何屬性（寬或高），瀏覽器需要重新計(jì)算元素的幾何屬性，同樣其他元素的幾何屬性和位置也會(huì)因此受到影響。瀏覽器會(huì)使渲染樹(shù)中受到影響的部分失效，并重新構(gòu)造渲染樹(shù)。這個(gè)過(guò)程稱(chēng)為重排。完成重排后，瀏覽器會(huì)重新繪制受影響的部分到屏幕，該過(guò)程稱(chēng)為重繪。
重排何時(shí)發(fā)生？
很顯然，每次重排，必然會(huì)導(dǎo)致重繪，那么，重排會(huì)在哪些情況下發(fā)生？
1、添加或者刪除可見(jiàn)的DOM元素
2、元素位置改變
3、元素尺寸改變
4、元素內(nèi)容改變（例如：一個(gè)文本被另一個(gè)不同尺寸的圖片替代）
5、頁(yè)面渲染初始化（這個(gè)無(wú)法避免）
6、瀏覽器窗口尺寸改變
這些都是顯而易見(jiàn)的，或許你已經(jīng)有過(guò)這樣的體會(huì)，不間斷地改變?yōu)g覽器窗口大小，導(dǎo)致UI反應(yīng)遲鈍（某些低版本IE下甚至直接掛掉），現(xiàn)在你可能恍然大悟，沒(méi)錯(cuò)，正是一次次的重排重繪導(dǎo)致的！

重排和重繪是DOM編程中耗能的主要原因之一，平時(shí)涉及DOM編程時(shí)可以參考以下幾點(diǎn)：
1、盡量不要在布局信息改變時(shí)做查詢(xún)（會(huì)導(dǎo)致渲染隊(duì)列強(qiáng)制刷新）
2、同一個(gè)DOM的多個(gè)屬性改變可以寫(xiě)在一起（減少DOM訪(fǎng)問(wèn)，同時(shí)把強(qiáng)制渲染隊(duì)列刷新的風(fēng)險(xiǎn)降為0）
3、如果要批量添加DOM，可以先讓元素脫離文檔流，操作完后再帶入文檔流，這樣只會(huì)觸發(fā)一次重排（fragment元素的應(yīng)用）
4、將需要多次重排的元素，position屬性設(shè)為absolute或fixed，這樣此元素就脫離了文檔流，它的變化不會(huì)影響到其他元素。例如有動(dòng)畫(huà)效果的元素就最好設(shè)置為絕對(duì)定位。

javascript代碼優(yōu)化

1、減少dom訪(fǎng)問(wèn)
對(duì)DOM操作的代價(jià)是高昂的，這在網(wǎng)頁(yè)應(yīng)用中的通常是一個(gè)性能瓶頸。

天生就慢。在《高性能JavaScript》中這么比喻：“把DOM看成一個(gè)島嶼，把JavaScript(ECMAScript)看成另一個(gè)島嶼，兩者之間以一座收費(fèi)橋連接”。所以每次訪(fǎng)問(wèn)DOM都會(huì)教一個(gè)過(guò)橋費(fèi)，而訪(fǎng)問(wèn)的次數(shù)越多，交的費(fèi)用也就越多。所以一般建議盡量減少過(guò)橋次數(shù)。
解決辦法：

修改和訪(fǎng)問(wèn)DOM元素會(huì)造成頁(yè)面的Repaint和Reflow，循環(huán)對(duì)DOM操作更是罪惡的行為。所以請(qǐng)合理的使用JavaScript變量?jī)?chǔ)存內(nèi)容，考慮大量DOM元素中循環(huán)的性能開(kāi)銷(xiāo)，在循環(huán)結(jié)束時(shí)一次性寫(xiě)入。
減少對(duì)DOM元素的查詢(xún)和修改，查詢(xún)時(shí)可將其賦值給局部變量。

2、減少作用域鏈查找
作用域查找也是消耗一定時(shí)間的，所以我們可以將要使用的對(duì)象用變量保存在局部變量中，避免作用域的全局查找。此外，要減少作用域鏈查找還應(yīng)該減少閉包的使用。

3、慎用 with　
with(obj){ p = 1}; 代碼塊的行為實(shí)際上是修改了代碼塊中的執(zhí)行環(huán)境 ，將obj放在了其作用域鏈的最前端，在 with代碼塊中訪(fǎng)問(wèn)非局部變量是都是先從 obj上開(kāi)始查找，如果沒(méi)有再依次按作用域鏈向上查找，因此使用 with相當(dāng)于增加了作用域鏈長(zhǎng)度。而每次查找作用域鏈都是要消耗時(shí)間的，過(guò)長(zhǎng)的作用域鏈會(huì)導(dǎo)致查找性能下降。
　　因此，除非你能肯定在 with代碼中只訪(fǎng)問(wèn) obj中的屬性，否則慎用 with，替代的可以使用局部變量緩存需要訪(fǎng)問(wèn)的屬性。
4、 避免使用 eval和 Function
每次 eval 或Function 構(gòu)造函數(shù)作用于字符串表示的源代碼時(shí)，腳本引擎都需要將源代碼轉(zhuǎn)換成可執(zhí)行代碼。這是很消耗資源的操作 —— 通常比簡(jiǎn)單的函數(shù)調(diào)用慢 100倍以上。
　　eval 函數(shù)效率特別低，由于事先無(wú)法知曉傳給 eval 的字符串中的內(nèi)容，eval在其上下文中解釋要處理的代碼，也就是說(shuō)編譯器無(wú)法優(yōu)化上下文，因此只能有瀏覽器在運(yùn)行時(shí)解釋代碼。這對(duì)性能影響很大。
　　Function 構(gòu)造函數(shù)比 eval略好，因?yàn)槭褂么舜�碼不會(huì)影響周?chē)�代碼 ;但其速度仍很慢。
　　此外，使用 eval和 Function也不利于Javascript 壓縮工具執(zhí)行壓縮。
　　
5、優(yōu)化循環(huán)，妙用算法
減少循環(huán)的次數(shù)對(duì)性能的提升效果也是顯著的。特別是在循環(huán)次數(shù)很多的時(shí)候，優(yōu)化循環(huán)次數(shù)是很有必要的。有些時(shí)候算法可以取到事半功倍的效果。

作為一個(gè)前端工程師，性能優(yōu)化是很有必要的。好的用戶(hù)體驗(yàn)?zāi)芤欢ǔ潭壬蠜Q定產(chǎn)品的命運(yùn)。而提升用戶(hù)體驗(yàn)有很多方面，比如，界面設(shè)計(jì)，操作設(shè)計(jì)，網(wǎng)頁(yè)加載性能等。。。
提升性能我們可以從如下幾個(gè)方面考慮：

減少http請(qǐng)求合理設(shè)置 HTTP緩存

在動(dòng)態(tài)網(wǎng)頁(yè)中，我們難免會(huì)與后臺(tái)服務(wù)器交互，減少http請(qǐng)求的數(shù)目在性能提升上是十分明顯的。比如我們可以：

1. 簡(jiǎn)化步驟，將請(qǐng)求數(shù)據(jù)盡可能的封裝在少的接口中，當(dāng)然這是不破壞程序可擴(kuò)展性及健壯性的情況下。

2. 合并壓縮css與JS等文件，圖片較多的頁(yè)面也可以使用 lazyLoad 等技術(shù)進(jìn)行優(yōu)化。

3. 為不常變化的請(qǐng)求數(shù)據(jù)設(shè)置http緩存

合理放置CSS與JS的位置

瀏覽器會(huì)在下載完成全部CSS之后才對(duì)整個(gè)頁(yè)面進(jìn)行渲染，因此最好的做法是將CSS放在頁(yè)面最上面，讓瀏覽器盡快下載CSS。如果將 CSS放在其他地方比如 BODY中，則瀏覽器有可能還未下載和解析到 CSS就已經(jīng)開(kāi)始渲染頁(yè)面了，這就導(dǎo)致頁(yè)面由無(wú) CSS狀態(tài)跳轉(zhuǎn)到 CSS狀態(tài)，用戶(hù)體驗(yàn)比較糟糕，所以可以考慮將CSS放在HEAD中。
Javascript則相反，瀏覽器在加載javascript后立即執(zhí)行，有可能會(huì)阻塞整個(gè)頁(yè)面，造成頁(yè)面顯示緩慢，因此javascript最好放在頁(yè)面最下面。但如果頁(yè)面解析時(shí)就需要用到j(luò)avascript，這時(shí)放到底部就不合適了。
Lazy Load Javascript（只有在需要加載的時(shí)候加載，在一般情況下并不加載信息內(nèi)容。）隨著 Javascript框架的流行，越來(lái)越多的站點(diǎn)也使用起了框架。不過(guò)，一個(gè)框架往往包括了很多的功能實(shí)現(xiàn)，這些功能并不是每一個(gè)頁(yè)面都需要的，如果下載了不需要的腳本則算得上是一種資源浪費(fèi) -既浪費(fèi)了帶寬又浪費(fèi)了執(zhí)行花費(fèi)的時(shí)間。目前的做法大概有兩種，一種是為那些流量特別大的頁(yè)面專(zhuān)門(mén)定制一個(gè)專(zhuān)用的 mini版框架，另一種則是 Lazy Load。

減少重排與重繪

當(dāng)DOM的變化影響了元素的幾何屬性（寬或高），瀏覽器需要重新計(jì)算元素的幾何屬性，同樣其他元素的幾何屬性和位置也會(huì)因此受到影響。瀏覽器會(huì)使渲染樹(shù)中受到影響的部分失效，并重新構(gòu)造渲染樹(shù)。這個(gè)過(guò)程稱(chēng)為重排。完成重排后，瀏覽器會(huì)重新繪制受影響的部分到屏幕，該過(guò)程稱(chēng)為重繪。
重排何時(shí)發(fā)生？
很顯然，每次重排，必然會(huì)導(dǎo)致重繪，那么，重排會(huì)在哪些情況下發(fā)生？
1、添加或者刪除可見(jiàn)的DOM元素
2、元素位置改變
3、元素尺寸改變
4、元素內(nèi)容改變（例如：一個(gè)文本被另一個(gè)不同尺寸的圖片替代）
5、頁(yè)面渲染初始化（這個(gè)無(wú)法避免）
6、瀏覽器窗口尺寸改變
這些都是顯而易見(jiàn)的，或許你已經(jīng)有過(guò)這樣的體會(huì)，不間斷地改變?yōu)g覽器窗口大小，導(dǎo)致UI反應(yīng)遲鈍（某些低版本IE下甚至直接掛掉），現(xiàn)在你可能恍然大悟，沒(méi)錯(cuò)，正是一次次的重排重繪導(dǎo)致的！

重排和重繪是DOM編程中耗能的主要原因之一，平時(shí)涉及DOM編程時(shí)可以參考以下幾點(diǎn)：
1、盡量不要在布局信息改變時(shí)做查詢(xún)（會(huì)導(dǎo)致渲染隊(duì)列強(qiáng)制刷新）
2、同一個(gè)DOM的多個(gè)屬性改變可以寫(xiě)在一起（減少DOM訪(fǎng)問(wèn)，同時(shí)把強(qiáng)制渲染隊(duì)列刷新的風(fēng)險(xiǎn)降為0）
3、如果要批量添加DOM，可以先讓元素脫離文檔流，操作完后再帶入文檔流，這樣只會(huì)觸發(fā)一次重排（fragment元素的應(yīng)用）
4、將需要多次重排的元素，position屬性設(shè)為absolute或fixed，這樣此元素就脫離了文檔流，它的變化不會(huì)影響到其他元素。例如有動(dòng)畫(huà)效果的元素就最好設(shè)置為絕對(duì)定位。

javascript代碼優(yōu)化

1、減少dom訪(fǎng)問(wèn)
對(duì)DOM操作的代價(jià)是高昂的，這在網(wǎng)頁(yè)應(yīng)用中的通常是一個(gè)性能瓶頸。

天生就慢。在《高性能JavaScript》中這么比喻：“把DOM看成一個(gè)島嶼，把JavaScript(ECMAScript)看成另一個(gè)島嶼，兩者之間以一座收費(fèi)橋連接”。所以每次訪(fǎng)問(wèn)DOM都會(huì)教一個(gè)過(guò)橋費(fèi)，而訪(fǎng)問(wèn)的次數(shù)越多，交的費(fèi)用也就越多。所以一般建議盡量減少過(guò)橋次數(shù)。
解決辦法：

修改和訪(fǎng)問(wèn)DOM元素會(huì)造成頁(yè)面的Repaint和Reflow，循環(huán)對(duì)DOM操作更是罪惡的行為。所以請(qǐng)合理的使用JavaScript變量?jī)?chǔ)存內(nèi)容，考慮大量DOM元素中循環(huán)的性能開(kāi)銷(xiāo)，在循環(huán)結(jié)束時(shí)一次性寫(xiě)入。
減少對(duì)DOM元素的查詢(xún)和修改，查詢(xún)時(shí)可將其賦值給局部變量。

2、減少作用域鏈查找
作用域查找也是消耗一定時(shí)間的，所以我們可以將要使用的對(duì)象用變量保存在局部變量中，避免作用域的全局查找。此外，要減少作用域鏈查找還應(yīng)該減少閉包的使用。

3、慎用 with　
with(obj){ p = 1}; 代碼塊的行為實(shí)際上是修改了代碼塊中的執(zhí)行環(huán)境 ，將obj放在了其作用域鏈的最前端，在 with代碼塊中訪(fǎng)問(wèn)非局部變量是都是先從 obj上開(kāi)始查找，如果沒(méi)有再依次按作用域鏈向上查找，因此使用 with相當(dāng)于增加了作用域鏈長(zhǎng)度。而每次查找作用域鏈都是要消耗時(shí)間的，過(guò)長(zhǎng)的作用域鏈會(huì)導(dǎo)致查找性能下降。
　　因此，除非你能肯定在 with代碼中只訪(fǎng)問(wèn) obj中的屬性，否則慎用 with，替代的可以使用局部變量緩存需要訪(fǎng)問(wèn)的屬性。
4、 避免使用 eval和 Function
每次 eval 或Function 構(gòu)造函數(shù)作用于字符串表示的源代碼時(shí)，腳本引擎都需要將源代碼轉(zhuǎn)換成可執(zhí)行代碼。這是很消耗資源的操作 —— 通常比簡(jiǎn)單的函數(shù)調(diào)用慢 100倍以上。
　　eval 函數(shù)效率特別低，由于事先無(wú)法知曉傳給 eval 的字符串中的內(nèi)容，eval在其上下文中解釋要處理的代碼，也就是說(shuō)編譯器無(wú)法優(yōu)化上下文，因此只能有瀏覽器在運(yùn)行時(shí)解釋代碼。這對(duì)性能影響很大。
　　Function 構(gòu)造函數(shù)比 eval略好，因?yàn)槭褂么舜�碼不會(huì)影響周?chē)�代碼 ;但其速度仍很慢。
　　此外，使用 eval和 Function也不利于Javascript 壓縮工具執(zhí)行壓縮。
　　
5、優(yōu)化循環(huán)，妙用算法
減少循環(huán)的次數(shù)對(duì)性能的提升效果也是顯著的。特別是在循環(huán)次數(shù)很多的時(shí)候，優(yōu)化循環(huán)次數(shù)是很有必要的。有些時(shí)候算法可以取到事半功倍的效果。

以上就是web前端性能優(yōu)化方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！