版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
Web前端性能優(yōu)化Web前端性能優(yōu)化11瀏覽器渲染過程1瀏覽器渲染過程渲染過程渲染引擎開始解析HTML/SVG/XHTML，并將標(biāo)簽轉(zhuǎn)化為domtree中的dom節(jié)點(diǎn)。接著，它解析外部CSS文件及style標(biāo)簽中的樣式信息生成ruletree。domtree和ruletree結(jié)合生成rendertree。Rendertree由一些包含有顏色和大小等屬性的矩形組成，它們將被按照正確的順序顯示到屏幕上。Rendertree構(gòu)建好了之后，將會(huì)執(zhí)行布局過程，它將確定每個(gè)節(jié)點(diǎn)在屏幕上的確切坐標(biāo)。再下一步就是繪制，即遍歷rendertree，并使用UI后端層繪制每個(gè)節(jié)點(diǎn)。值得注意的是，這個(gè)過程是逐步完成的，為了更好的用戶體驗(yàn)，渲染引擎將會(huì)盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會(huì)等到所有的html都解析完成之后再去構(gòu)建和布局rendertree。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時(shí)，可能還在通過網(wǎng)絡(luò)下載其余內(nèi)容。渲染過程渲染引擎開始解析HTML/SVG/XHTML，并將標(biāo)渲染過程網(wǎng)頁被加載給html解釋器變?yōu)橐幌盗械脑~語解析器根據(jù)詞語構(gòu)建節(jié)點(diǎn)node，形成DOM樹html解析構(gòu)建DOM渲染過程網(wǎng)頁被加載給html解釋器變?yōu)橐幌盗械脑~語html解渲染過程html解析構(gòu)建DOM
字節(jié)字符語義塊節(jié)點(diǎn)DOMstartTag:htmlstartTag:headendTag:headstartTag:bodystartTag:spanHelloWorld!!endTag:spanendTag:bodyendTag:htmlhtmlbodyheadspanHelloworld??！
htmlbodyheadspanHelloworld！！
<html><head></head><body><span>HelloWorld!</span></body></html>渲染過程html解析構(gòu)建DOM字節(jié)字符語義塊節(jié)點(diǎn)DOMst渲染過程與DOM樹的構(gòu)建基本相同，都是要經(jīng)過字節(jié)Bytes→字符Characters→語義塊Tokens→節(jié)點(diǎn)Nodes→Objectmodel這個(gè)過程。但值得注意的是，CSS是一種渲染阻塞資源（renderblockingresource），它需要完全被解析完畢后才能進(jìn)入生成渲染樹的環(huán)節(jié)。css解析構(gòu)建CSSOM渲染過程與DOM樹的構(gòu)建基本相同，都是要經(jīng)過css解析構(gòu)建渲染過程script標(biāo)簽每次出現(xiàn)都會(huì)霸道的讓頁面等待腳本的解析和執(zhí)行，同樣，當(dāng)使用script的src屬性加載頁面時(shí)，瀏覽器必須先花時(shí)間下載外鏈文件中的代碼，然后解析并執(zhí)行。在這個(gè)過程中，頁面渲染和用戶交互是完全被阻塞的。瀏覽器之所以產(chǎn)生這樣的行為，是因?yàn)楫?dāng)前HTML頁面無從知曉JS的動(dòng)作：JS可能會(huì)向document里添加內(nèi)容、引入其它元素、甚至關(guān)閉標(biāo)簽所以瀏覽器會(huì)先（下載和）執(zhí)行JS代碼，然后才解析和渲染頁面。腳本下載解析執(zhí)行渲染過程script標(biāo)簽每次出現(xiàn)都會(huì)霸道的讓頁面等待腳本的解渲染過程1.DOM樹從根節(jié)點(diǎn)開始遍歷可見節(jié)點(diǎn)（script，meta，head等除外，visibility:hidden;opacity:0這種仍占據(jù)空間的節(jié)點(diǎn)除外），瀏覽器會(huì)創(chuàng)建RenderObject對象，該對象保存了為繪制DOM節(jié)點(diǎn)所必須的各種信息，例如樣式布局信息，經(jīng)過瀏覽器處理后RenderObject對象知道如何繪制自己。2.RenderObject對象構(gòu)成一顆基于DOM樹的新樹，為了布局計(jì)算和渲染等機(jī)制建立的一種新的內(nèi)部表示。如果DOM樹中添加了新的節(jié)點(diǎn)，瀏覽器也需要?jiǎng)?chuàng)建相應(yīng)的RenderObject對象。構(gòu)建rendertree渲染過程1.DOM樹從根節(jié)點(diǎn)開始遍歷可見節(jié)點(diǎn)（script，渲染過程有了各個(gè)節(jié)點(diǎn)的樣式信息和屬性，但不知道各個(gè)節(jié)點(diǎn)的確切位置和大小，所以要通過布局將樣式信息和屬性轉(zhuǎn)化為實(shí)際可視窗口的相對大小和位置。
生成布局GeneratingtheLayout）渲染過程有了各個(gè)節(jié)點(diǎn)的樣式信息和屬性，但不知道各個(gè)節(jié)點(diǎn)的確切渲染過程遍歷渲染樹并調(diào)用渲染對象的paint方法將它們的內(nèi)容顯示在屏幕上繪制（Painting）渲染過程遍歷渲染樹并調(diào)用渲染對象的paint方法將它們的內(nèi)容渲染過程七、回流（reflow）與重繪（repaint）
當(dāng)元素的內(nèi)容、結(jié)構(gòu)、位置、或尺寸發(fā)生了變化，需要重新計(jì)算元素樣式（reflow）。當(dāng)元素的樣式（背景色、邊框顏色、文字顏色等）發(fā)生變化，需要重新繪制元素（repaint）。需要注意的是當(dāng)出發(fā)reflow時(shí)都會(huì)觸發(fā)repaint，但是repaint不一定觸發(fā)reflow，即重繪可以單獨(dú)觸發(fā)。渲染過程七、回流（reflow）與重繪（repaint）當(dāng)2性能優(yōu)化2性能優(yōu)化性能優(yōu)化前端是龐大的，包括HTML、CSS、Javascript、Image、Flash等等各種各樣的資源。前端優(yōu)化是復(fù)雜的，針對方方面面的資源都有不同的方式。那么，前端優(yōu)化的目的是什么?
1.從用戶角度而言，優(yōu)化能夠讓頁面加載得更快、對用戶的操作響應(yīng)得更及時(shí)，能夠給用戶提供更為友好的體驗(yàn)。
2.從服務(wù)商角度而言，優(yōu)化能夠減少頁面請求數(shù)、或者減小請求所占帶寬，能夠節(jié)省可觀的資源。
總之，恰當(dāng)?shù)膬?yōu)化不僅能夠改善站點(diǎn)的用戶體驗(yàn)并且能夠節(jié)省相當(dāng)?shù)馁Y源利用。性能優(yōu)化前端是龐大的，包括HTML、CSS、Javas性能優(yōu)化JS腳本置低使用外部方式
精簡減少DOM訪問減少跨域訪問…網(wǎng)頁內(nèi)容減少http請求次數(shù)減少DSN查詢次數(shù)避免頁面跳轉(zhuǎn)緩存AJAX延遲加載提前加載減少DOM元素?cái)?shù)量減少iframe數(shù)量避免404…CSS樣式表放在頭部避免表達(dá)式
link代替@import避免filter精簡…圖片壓縮圖片
Csssspirtedata:URL模式懶加載…性能優(yōu)化JS網(wǎng)頁內(nèi)容CSS圖片性能優(yōu)化
1.減少HTTP請求數(shù)
這條策略基本上所有前端人都知道，而且也是最重要最有效的。都說要減少HTTP請求，那請求多了到底會(huì)怎么樣呢?首先，每個(gè)請求都是有成本的，既包含時(shí)間成本也包含資源成本。一個(gè)完整的請求都需要經(jīng)過DNS尋址、與服務(wù)器建立連接、發(fā)送數(shù)據(jù)、等待服務(wù)器響應(yīng)、接收數(shù)據(jù)這樣一個(gè)“漫長”而復(fù)雜的過程。時(shí)間成本就是用戶需要看到或者“感受”到這個(gè)資源是必須要等待這個(gè)過程結(jié)束的，資源上由于每個(gè)請求都需要攜帶數(shù)據(jù)，因此每個(gè)請求都需要占用帶寬。另外，由于瀏覽器進(jìn)行并發(fā)請求的請求數(shù)是有上限的(具體參見此處)，因此請求數(shù)多了以后，瀏覽器需要分批進(jìn)行請求，因此會(huì)增加用戶的等待時(shí)間，會(huì)給用戶造成站點(diǎn)速度慢這樣一個(gè)印象，即使可能用戶能看到的第一屏的資源都已經(jīng)請求完了，但是瀏覽器的進(jìn)度條會(huì)一直存在。
頁面級優(yōu)化性能優(yōu)化1.減少HTTP請求數(shù)
這條策略基本上所有性能優(yōu)化減少HTTP請求數(shù)的主要途徑包括：
(1).合理設(shè)置HTTP緩存
緩存的力量是強(qiáng)大的，恰當(dāng)?shù)木彺嬖O(shè)置可以大大的減少HTTP請求(2).資源合并與壓縮
如果可以的話，盡可能的將外部的腳本、樣式進(jìn)行合并，多個(gè)合為一個(gè)。另外，CSS、Javascript、Image都可以用相應(yīng)的工具進(jìn)行壓縮，壓縮后往往能省下不少空間。
(3).CSSSprites
合并CSS圖片，減少請求數(shù)的又一個(gè)好辦法。
性能優(yōu)化減少HTTP請求數(shù)的主要途徑包括：(4).InlineImages
使用data:URLscheme的方式將圖片嵌入到頁面或CSS中，如果不考慮資源管理上的問題的話，不失為一個(gè)好辦法。如果是嵌入頁面的話換來的是增大了頁面的體積，而且無法利用瀏覽器緩存。使用在CSS中的
(6).LazyLoadImages
這條策略實(shí)際上并不一定能減少HTTP請求數(shù)，但是卻能在某些條件下或者頁面剛加載時(shí)減少HTTP請求數(shù)。對于圖片而言，在頁面剛加載的時(shí)候可以只加載第一屏，當(dāng)用戶繼續(xù)往后滾屏的時(shí)候才加載后續(xù)的圖片。這樣一來，假如用戶只對第一屏的內(nèi)容感興趣時(shí)，那剩余的圖片請求就都節(jié)省了。Web前端性能優(yōu)化課件2.將外部腳本置底（將腳本內(nèi)容在頁面信息內(nèi)容加載后再加載）前文有談到，瀏覽器是可以并發(fā)請求的，這一特點(diǎn)使得其能夠更快的加載資源，然而外鏈腳本在加載時(shí)卻會(huì)阻塞其他資源，例如在腳本加載完成之前，它后面的圖片、樣式以及其他腳本都處于阻塞狀態(tài)，直到腳本加載完成后才會(huì)開始加載。如果將腳本放在比較靠前的位置，則會(huì)影響整個(gè)頁面的加載速度從而影響用戶體驗(yàn)。解決這一問題的方法有很多，
最簡單可依賴的方法就是將腳本盡可能的往后挪，減少對并發(fā)下載的影響。
2.將外部腳本置底（將腳本內(nèi)容在頁面信息內(nèi)容加載后再加載）
3.異步執(zhí)行inline腳本(其實(shí)原理和上面是一樣，保證腳本在頁面內(nèi)容后面加載。)
inline腳本對性能的影響與外部腳本相比，是有過之而無不及。首頁，與外部腳本一樣，inline腳本在執(zhí)行的時(shí)候一樣會(huì)阻塞并發(fā)請求，除此之外，由于瀏覽器在頁面處理方面是單線程的，當(dāng)inline腳本在頁面渲染之前執(zhí)行時(shí)，頁面的渲染工作則會(huì)被推遲。簡而言之，inline腳本在執(zhí)行的時(shí)候，頁面處于空白狀態(tài)。鑒于以上兩點(diǎn)原因，建議將執(zhí)行時(shí)間較長的inline腳本異步執(zhí)行，異步的方式有很多種，例如使用script元素的defer屬性(存在兼容性問題和其他一些問題，例如不能使用document.write)、使用setTimeout，此外，在HTML5中引入了WebWorkers的機(jī)制，恰恰可以解決此類問題。
3.異步執(zhí)行inline腳本(其實(shí)原理和上面是一樣，保
4.LazyLoadJavascript（只有在需要加載的時(shí)候加載，在一般情況下并不加載信息內(nèi)容。）
隨著Javascript框架的流行，越來越多的站點(diǎn)也使用起了框架。不過，一個(gè)框架往往包括了很多的功能實(shí)現(xiàn)，這些功能并不是每一個(gè)頁面都需要的，如果下載了不需要的腳本則算得上是一種資源浪費(fèi)-既浪費(fèi)了帶寬又浪費(fèi)了執(zhí)行花費(fèi)的時(shí)間。目前的做法大概有兩種，一種是為那些流量特別大的頁面專門定制一個(gè)專用的mini版框架，另一種則是LazyLoad。YUI則使用了第二種方式，在YUI的實(shí)現(xiàn)中，最初只加載核心模塊，其他模塊可以等到需要使用的時(shí)候才加載。4.LazyLoadJavascript（只有在需要
5.將CSS放在HEAD中
如果將CSS放在其他地方比如BODY中，則瀏覽器有可能還未下載和解析到CSS就已經(jīng)開始渲染頁面了，這就導(dǎo)致頁面由無CSS狀態(tài)跳轉(zhuǎn)到CSS狀態(tài)，用戶體驗(yàn)比較糟糕。除此之外，有些瀏覽器會(huì)在CSS下載完成后才開始渲染頁面，如果CSS放在靠下的位置則會(huì)導(dǎo)致瀏覽器將渲染時(shí)間推遲。5.將CSS放在HEAD中
如果將CSS放在其
6.避免重復(fù)的資源請求
這種情況主要是由于疏忽或頁面由多個(gè)模塊拼接而成，然后每個(gè)模塊中請求了同樣的資源時(shí)，會(huì)導(dǎo)致資源的重復(fù)請求6.避免重復(fù)的資源請求
這種情況主要是由于疏忽或頁面
9精簡Javascript和CSS精簡就是將Javascript或CSS中的空格和注釋全去掉，代碼壓縮，從而壓縮文件的大小9精簡Javascript和CSSJavascript
(1).DOM
DOM操作應(yīng)該是腳本中最耗性能的一類操作，例如增加、修改、刪除DOM元素或者對DOM集合進(jìn)行操作。如果腳本中包含了大量的DOM操作則需要注意以下幾點(diǎn)：
代碼級優(yōu)化-jsJavascript代碼級優(yōu)化-js
a.HTMLCollection（HTML收集器，返回的是一個(gè)數(shù)組內(nèi)容信息）
在腳本中document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection類型的集合，在平時(shí)使用的時(shí)候大多將它作為數(shù)組來使用，因?yàn)樗衛(wèi)ength屬性，也可以使用索引訪問每一個(gè)元素。不過在訪問性能上則比數(shù)組要差很多，原因是這個(gè)集合并不是一個(gè)靜態(tài)的結(jié)果，它表示的僅僅是一個(gè)特定的查詢，每次訪問該集合時(shí)都會(huì)重新執(zhí)行這個(gè)查詢從而更新查詢結(jié)果。所謂的“訪問集合”包括讀取集合的length屬性、訪問集合中的元素。
因此，當(dāng)你需要遍歷HTMLCollection的時(shí)候，盡量將它轉(zhuǎn)為數(shù)組后再訪問，以提高性能。即使不轉(zhuǎn)換為數(shù)組，也請盡可能少的訪問它，例如在遍歷的時(shí)候可以將length屬性、成員保存到局部變量后再使用局部變量。
a.HTMLCollection（HTML收集器，返回b.Reflow&Repaint
除了上面一點(diǎn)之外，DOM操作還需要考慮瀏覽器的Reflow和Repaint，因?yàn)檫@些都是需要消耗資源的：
那么為了減少回流要注意哪些方式呢？b.Reflow&Repaint
除了上面一點(diǎn)之外
1：不要通過父級來改變子元素樣式，最好直接改變子元素樣式，改變子元素樣式盡可能不要影響父元素和兄弟元素的大小和尺寸2：盡量通過class來設(shè)計(jì)元素樣式，切忌用style3：實(shí)現(xiàn)元素的動(dòng)畫，對于經(jīng)常要進(jìn)行回流的組件，要抽離出來，它的position屬性應(yīng)當(dāng)設(shè)為fixed或absolute4：權(quán)衡速度的平滑。比如實(shí)現(xiàn)一個(gè)動(dòng)畫，以1個(gè)像素為單位移動(dòng)這樣最平滑，但reflow就會(huì)過于頻繁，CPU很快就會(huì)被完全占用。如果以3個(gè)像素為單位移動(dòng)就會(huì)好很多。
1：不要通過父級來改變子元素樣式，最好直接改變子元素樣式，5：不要用tables布局的另一個(gè)原因就是tables中某個(gè)元素一旦觸發(fā)reflow就會(huì)導(dǎo)致table里所有的其它元素reflow。6：css里不要有表達(dá)式expression7：減少不必要的DOM層級（DOMdepth）。改變DOM樹中的一級會(huì)導(dǎo)致所有層級的改變，上至根部，下至被改變節(jié)點(diǎn)的子節(jié)點(diǎn)。這導(dǎo)致大量時(shí)間耗費(fèi)在執(zhí)行reflow上面。8：避免不必要的復(fù)雜的CSS選擇器，尤其是后代選擇器（descendantselectors），因?yàn)闉榱似ヅ溥x擇器將耗費(fèi)更多的CPU。9:盡量不要過多的頻繁的去增加，修改，刪除元素，因?yàn)檫@可能會(huì)頻繁的導(dǎo)致頁面reflow，可以先把該dom節(jié)點(diǎn)抽離到內(nèi)存中進(jìn)行復(fù)雜的操作然后再display到頁面上。5：不要用tables布局的另一個(gè)原因就是tables中某個(gè)
(2).慎用with
with(obj){p=1};代碼塊的行為實(shí)際上是修改了代碼塊中的執(zhí)行環(huán)境，將obj放在了其作用域鏈的最前端，在with代碼塊中訪問非局部變量是都是先從obj上開始查找，如果沒有再依次按作用域鏈向上查找，因此使用with相當(dāng)于增加了作用域鏈長度。而每次查找作用域鏈都是要消耗時(shí)間的，過長的作用域鏈會(huì)導(dǎo)致查找性能下降。
因此，除非你能肯定在with代碼中只訪問obj中的屬性，否則慎用with，替代的可以使用局部變量緩存需要訪問的屬性。(2).慎用with
with(obj){p=1
(3).避免使用eval每次eval作用于字符串表示的源代碼時(shí)，腳本引擎都需要將源代碼轉(zhuǎn)換成可執(zhí)行代碼。這是很消耗資源的操作——通常比簡單的函數(shù)調(diào)用慢100倍以上。
eval函數(shù)效率特別低，由于事先無法知曉傳給eval的字符串中的內(nèi)容，eval在其上下文中解釋要處理的代碼，也就是說編譯器無法優(yōu)化上下文，因此只能有瀏覽器在運(yùn)行時(shí)解釋代碼。這對性能影響很大。
(3).避免使用eval
(4).減少作用域鏈查找作用域鏈查找問題，這一點(diǎn)在循環(huán)中是尤其需要注意的問題。如果在循環(huán)中需要訪問非本作用域下的變量時(shí)請?jiān)诒闅v之前用局部變量緩存該變量，并在遍歷結(jié)束后再重寫那個(gè)變量，這一點(diǎn)對全局變量尤其重要，因?yàn)槿肿兞刻幱谧饔糜蜴湹淖铐敹?，訪問時(shí)的查找次數(shù)是最多的。(4).減少作用域鏈查找
(5).數(shù)據(jù)訪問
Javascript中的數(shù)據(jù)訪問包括直接量(字符串、正則表達(dá)式)、變量、對象屬性以及數(shù)組，其中對直接量和局部變量的訪問是最快的，對對象屬性以及數(shù)組的訪問需要更大的開銷。當(dāng)出現(xiàn)以下情況時(shí)，建議將數(shù)據(jù)放入局部變量：
a.對任何對象屬性的訪問超過1次
b.對任何數(shù)組成員的訪問次數(shù)超過1次
另外，還應(yīng)當(dāng)盡可能的減少對對象以及數(shù)組深度查找。(5).數(shù)據(jù)訪問
Javascript中的數(shù)據(jù)訪問包
(6).字符串拼接
在Javascript中使用"+"號來拼接字符串效率是比較低的，因?yàn)槊看芜\(yùn)行都會(huì)開辟新的內(nèi)存并生成新的字符串變量，然后將拼接結(jié)果賦值給新變量。與之相比更為高效的做法是使用數(shù)組的join方法，即將需要拼接的字符串放在數(shù)組中最后調(diào)用其join方法得到結(jié)果。不過由于使用數(shù)組也有一定的開銷，因此當(dāng)需要拼接的字符串較多的時(shí)候可以考慮用此方法。(6).字符串拼接
在Javascript中使用"(7).事件的處理避免在for以及each里面綁定事件避免觸發(fā)事件里面綁定另一個(gè)事件(7).事件的處理
2.CSS選擇符
在大多數(shù)人的觀念中，都覺得瀏覽器對CSS選擇符的解析式從左往右進(jìn)行的，例如
#tocA{color:#444;}
這樣一個(gè)選擇符，如果是從左往右解析則效率會(huì)很高，因?yàn)榈谝粋€(gè)ID選擇基本上就把查找的范圍限定了，但實(shí)際上瀏覽器對選擇符的解析是從右往左進(jìn)行的。如上面的選擇符，瀏覽器必須遍歷查找每一個(gè)A標(biāo)簽的祖先節(jié)點(diǎn)，效率并不像之前想象的那樣高。根據(jù)瀏覽器的這一行為特點(diǎn)，在寫選擇符的時(shí)候需要注意很多事項(xiàng)2.CSS選擇符
在大多數(shù)人的觀念中，都覺得瀏覽器3F12簡單使用3F12簡單使用結(jié)束~~結(jié)束~~Web前端性能優(yōu)化Web前端性能優(yōu)化381瀏覽器渲染過程1瀏覽器渲染過程渲染過程渲染引擎開始解析HTML/SVG/XHTML，并將標(biāo)簽轉(zhuǎn)化為domtree中的dom節(jié)點(diǎn)。接著，它解析外部CSS文件及style標(biāo)簽中的樣式信息生成ruletree。domtree和ruletree結(jié)合生成rendertree。Rendertree由一些包含有顏色和大小等屬性的矩形組成，它們將被按照正確的順序顯示到屏幕上。Rendertree構(gòu)建好了之后，將會(huì)執(zhí)行布局過程，它將確定每個(gè)節(jié)點(diǎn)在屏幕上的確切坐標(biāo)。再下一步就是繪制，即遍歷rendertree，并使用UI后端層繪制每個(gè)節(jié)點(diǎn)。值得注意的是，這個(gè)過程是逐步完成的，為了更好的用戶體驗(yàn)，渲染引擎將會(huì)盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會(huì)等到所有的html都解析完成之后再去構(gòu)建和布局rendertree。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時(shí)，可能還在通過網(wǎng)絡(luò)下載其余內(nèi)容。渲染過程渲染引擎開始解析HTML/SVG/XHTML，并將標(biāo)渲染過程網(wǎng)頁被加載給html解釋器變?yōu)橐幌盗械脑~語解析器根據(jù)詞語構(gòu)建節(jié)點(diǎn)node，形成DOM樹html解析構(gòu)建DOM渲染過程網(wǎng)頁被加載給html解釋器變?yōu)橐幌盗械脑~語html解渲染過程html解析構(gòu)建DOM
字節(jié)字符語義塊節(jié)點(diǎn)DOMstartTag:htmlstartTag:headendTag:headstartTag:bodystartTag:spanHelloWorld!!endTag:spanendTag:bodyendTag:htmlhtmlbodyheadspanHelloworld??！
htmlbodyheadspanHelloworld??！
<html><head></head><body><span>HelloWorld!</span></body></html>渲染過程html解析構(gòu)建DOM字節(jié)字符語義塊節(jié)點(diǎn)DOMst渲染過程與DOM樹的構(gòu)建基本相同，都是要經(jīng)過字節(jié)Bytes→字符Characters→語義塊Tokens→節(jié)點(diǎn)Nodes→Objectmodel這個(gè)過程。但值得注意的是，CSS是一種渲染阻塞資源（renderblockingresource），它需要完全被解析完畢后才能進(jìn)入生成渲染樹的環(huán)節(jié)。css解析構(gòu)建CSSOM渲染過程與DOM樹的構(gòu)建基本相同，都是要經(jīng)過css解析構(gòu)建渲染過程script標(biāo)簽每次出現(xiàn)都會(huì)霸道的讓頁面等待腳本的解析和執(zhí)行，同樣，當(dāng)使用script的src屬性加載頁面時(shí)，瀏覽器必須先花時(shí)間下載外鏈文件中的代碼，然后解析并執(zhí)行。在這個(gè)過程中，頁面渲染和用戶交互是完全被阻塞的。瀏覽器之所以產(chǎn)生這樣的行為，是因?yàn)楫?dāng)前HTML頁面無從知曉JS的動(dòng)作：JS可能會(huì)向document里添加內(nèi)容、引入其它元素、甚至關(guān)閉標(biāo)簽所以瀏覽器會(huì)先（下載和）執(zhí)行JS代碼，然后才解析和渲染頁面。腳本下載解析執(zhí)行渲染過程script標(biāo)簽每次出現(xiàn)都會(huì)霸道的讓頁面等待腳本的解渲染過程1.DOM樹從根節(jié)點(diǎn)開始遍歷可見節(jié)點(diǎn)（script，meta，head等除外，visibility:hidden;opacity:0這種仍占據(jù)空間的節(jié)點(diǎn)除外），瀏覽器會(huì)創(chuàng)建RenderObject對象，該對象保存了為繪制DOM節(jié)點(diǎn)所必須的各種信息，例如樣式布局信息，經(jīng)過瀏覽器處理后RenderObject對象知道如何繪制自己。2.RenderObject對象構(gòu)成一顆基于DOM樹的新樹，為了布局計(jì)算和渲染等機(jī)制建立的一種新的內(nèi)部表示。如果DOM樹中添加了新的節(jié)點(diǎn)，瀏覽器也需要?jiǎng)?chuàng)建相應(yīng)的RenderObject對象。構(gòu)建rendertree渲染過程1.DOM樹從根節(jié)點(diǎn)開始遍歷可見節(jié)點(diǎn)（script，渲染過程有了各個(gè)節(jié)點(diǎn)的樣式信息和屬性，但不知道各個(gè)節(jié)點(diǎn)的確切位置和大小，所以要通過布局將樣式信息和屬性轉(zhuǎn)化為實(shí)際可視窗口的相對大小和位置。
生成布局GeneratingtheLayout）渲染過程有了各個(gè)節(jié)點(diǎn)的樣式信息和屬性，但不知道各個(gè)節(jié)點(diǎn)的確切渲染過程遍歷渲染樹并調(diào)用渲染對象的paint方法將它們的內(nèi)容顯示在屏幕上繪制（Painting）渲染過程遍歷渲染樹并調(diào)用渲染對象的paint方法將它們的內(nèi)容渲染過程七、回流（reflow）與重繪（repaint）
當(dāng)元素的內(nèi)容、結(jié)構(gòu)、位置、或尺寸發(fā)生了變化，需要重新計(jì)算元素樣式（reflow）。當(dāng)元素的樣式（背景色、邊框顏色、文字顏色等）發(fā)生變化，需要重新繪制元素（repaint）。需要注意的是當(dāng)出發(fā)reflow時(shí)都會(huì)觸發(fā)repaint，但是repaint不一定觸發(fā)reflow，即重繪可以單獨(dú)觸發(fā)。渲染過程七、回流（reflow）與重繪（repaint）當(dāng)2性能優(yōu)化2性能優(yōu)化性能優(yōu)化前端是龐大的，包括HTML、CSS、Javascript、Image、Flash等等各種各樣的資源。前端優(yōu)化是復(fù)雜的，針對方方面面的資源都有不同的方式。那么，前端優(yōu)化的目的是什么?
1.從用戶角度而言，優(yōu)化能夠讓頁面加載得更快、對用戶的操作響應(yīng)得更及時(shí)，能夠給用戶提供更為友好的體驗(yàn)。
2.從服務(wù)商角度而言，優(yōu)化能夠減少頁面請求數(shù)、或者減小請求所占帶寬，能夠節(jié)省可觀的資源。
總之，恰當(dāng)?shù)膬?yōu)化不僅能夠改善站點(diǎn)的用戶體驗(yàn)并且能夠節(jié)省相當(dāng)?shù)馁Y源利用。性能優(yōu)化前端是龐大的，包括HTML、CSS、Javas性能優(yōu)化JS腳本置低使用外部方式
精簡減少DOM訪問減少跨域訪問…網(wǎng)頁內(nèi)容減少http請求次數(shù)減少DSN查詢次數(shù)避免頁面跳轉(zhuǎn)緩存AJAX延遲加載提前加載減少DOM元素?cái)?shù)量減少iframe數(shù)量避免404…CSS樣式表放在頭部避免表達(dá)式
link代替@import避免filter精簡…圖片壓縮圖片
Csssspirtedata:URL模式懶加載…性能優(yōu)化JS網(wǎng)頁內(nèi)容CSS圖片性能優(yōu)化
1.減少HTTP請求數(shù)
這條策略基本上所有前端人都知道，而且也是最重要最有效的。都說要減少HTTP請求，那請求多了到底會(huì)怎么樣呢?首先，每個(gè)請求都是有成本的，既包含時(shí)間成本也包含資源成本。一個(gè)完整的請求都需要經(jīng)過DNS尋址、與服務(wù)器建立連接、發(fā)送數(shù)據(jù)、等待服務(wù)器響應(yīng)、接收數(shù)據(jù)這樣一個(gè)“漫長”而復(fù)雜的過程。時(shí)間成本就是用戶需要看到或者“感受”到這個(gè)資源是必須要等待這個(gè)過程結(jié)束的，資源上由于每個(gè)請求都需要攜帶數(shù)據(jù)，因此每個(gè)請求都需要占用帶寬。另外，由于瀏覽器進(jìn)行并發(fā)請求的請求數(shù)是有上限的(具體參見此處)，因此請求數(shù)多了以后，瀏覽器需要分批進(jìn)行請求，因此會(huì)增加用戶的等待時(shí)間，會(huì)給用戶造成站點(diǎn)速度慢這樣一個(gè)印象，即使可能用戶能看到的第一屏的資源都已經(jīng)請求完了，但是瀏覽器的進(jìn)度條會(huì)一直存在。
頁面級優(yōu)化性能優(yōu)化1.減少HTTP請求數(shù)
這條策略基本上所有性能優(yōu)化減少HTTP請求數(shù)的主要途徑包括：
(1).合理設(shè)置HTTP緩存
緩存的力量是強(qiáng)大的，恰當(dāng)?shù)木彺嬖O(shè)置可以大大的減少HTTP請求(2).資源合并與壓縮
如果可以的話，盡可能的將外部的腳本、樣式進(jìn)行合并，多個(gè)合為一個(gè)。另外，CSS、Javascript、Image都可以用相應(yīng)的工具進(jìn)行壓縮，壓縮后往往能省下不少空間。
(3).CSSSprites
合并CSS圖片，減少請求數(shù)的又一個(gè)好辦法。
性能優(yōu)化減少HTTP請求數(shù)的主要途徑包括：(4).InlineImages
使用data:URLscheme的方式將圖片嵌入到頁面或CSS中，如果不考慮資源管理上的問題的話，不失為一個(gè)好辦法。如果是嵌入頁面的話換來的是增大了頁面的體積，而且無法利用瀏覽器緩存。使用在CSS中的
(6).LazyLoadImages
這條策略實(shí)際上并不一定能減少HTTP請求數(shù)，但是卻能在某些條件下或者頁面剛加載時(shí)減少HTTP請求數(shù)。對于圖片而言，在頁面剛加載的時(shí)候可以只加載第一屏，當(dāng)用戶繼續(xù)往后滾屏的時(shí)候才加載后續(xù)的圖片。這樣一來，假如用戶只對第一屏的內(nèi)容感興趣時(shí)，那剩余的圖片請求就都節(jié)省了。Web前端性能優(yōu)化課件2.將外部腳本置底（將腳本內(nèi)容在頁面信息內(nèi)容加載后再加載）前文有談到，瀏覽器是可以并發(fā)請求的，這一特點(diǎn)使得其能夠更快的加載資源，然而外鏈腳本在加載時(shí)卻會(huì)阻塞其他資源，例如在腳本加載完成之前，它后面的圖片、樣式以及其他腳本都處于阻塞狀態(tài)，直到腳本加載完成后才會(huì)開始加載。如果將腳本放在比較靠前的位置，則會(huì)影響整個(gè)頁面的加載速度從而影響用戶體驗(yàn)。解決這一問題的方法有很多，
最簡單可依賴的方法就是將腳本盡可能的往后挪，減少對并發(fā)下載的影響。
2.將外部腳本置底（將腳本內(nèi)容在頁面信息內(nèi)容加載后再加載）
3.異步執(zhí)行inline腳本(其實(shí)原理和上面是一樣，保證腳本在頁面內(nèi)容后面加載。)
inline腳本對性能的影響與外部腳本相比，是有過之而無不及。首頁，與外部腳本一樣，inline腳本在執(zhí)行的時(shí)候一樣會(huì)阻塞并發(fā)請求，除此之外，由于瀏覽器在頁面處理方面是單線程的，當(dāng)inline腳本在頁面渲染之前執(zhí)行時(shí)，頁面的渲染工作則會(huì)被推遲。簡而言之，inline腳本在執(zhí)行的時(shí)候，頁面處于空白狀態(tài)。鑒于以上兩點(diǎn)原因，建議將執(zhí)行時(shí)間較長的inline腳本異步執(zhí)行，異步的方式有很多種，例如使用script元素的defer屬性(存在兼容性問題和其他一些問題，例如不能使用document.write)、使用setTimeout，此外，在HTML5中引入了WebWorkers的機(jī)制，恰恰可以解決此類問題。
3.異步執(zhí)行inline腳本(其實(shí)原理和上面是一樣，保
4.LazyLoadJavascript（只有在需要加載的時(shí)候加載，在一般情況下并不加載信息內(nèi)容。）
隨著Javascript框架的流行，越來越多的站點(diǎn)也使用起了框架。不過，一個(gè)框架往往包括了很多的功能實(shí)現(xiàn)，這些功能并不是每一個(gè)頁面都需要的，如果下載了不需要的腳本則算得上是一種資源浪費(fèi)-既浪費(fèi)了帶寬又浪費(fèi)了執(zhí)行花費(fèi)的時(shí)間。目前的做法大概有兩種，一種是為那些流量特別大的頁面專門定制一個(gè)專用的mini版框架，另一種則是LazyLoad。YUI則使用了第二種方式，在YUI的實(shí)現(xiàn)中，最初只加載核心模塊，其他模塊可以等到需要使用的時(shí)候才加載。4.LazyLoadJavascript（只有在需要
5.將CSS放在HEAD中
如果將CSS放在其他地方比如BODY中，則瀏覽器有可能還未下載和解析到CSS就已經(jīng)開始渲染頁面了，這就導(dǎo)致頁面由無CSS狀態(tài)跳轉(zhuǎn)到CSS狀態(tài)，用戶體驗(yàn)比較糟糕。除此之外，有些瀏覽器會(huì)在CSS下載完成后才開始渲染頁面，如果CSS放在靠下的位置則會(huì)導(dǎo)致瀏覽器將渲染時(shí)間推遲。5.將CSS放在HEAD中
如果將CSS放在其
6.避免重復(fù)的資源請求
這種情況主要是由于疏忽或頁面由多個(gè)模塊拼接而成，然后每個(gè)模塊中請求了同樣的資源時(shí)，會(huì)導(dǎo)致資源的重復(fù)請求6.避免重復(fù)的資源請求
這種情況主要是由于疏忽或頁面
9精簡Javascript和CSS精簡就是將Javascript或CSS中的空格和注釋全去掉，代碼壓縮，從而壓縮文件的大小9精簡Javascript和CSSJavascript
(1).DOM
DOM操作應(yīng)該是腳本中最耗性能的一類操作，例如增加、修改、刪除DOM元素或者對DOM集合進(jìn)行操作。如果腳本中包含了大量的DOM操作則需要注意以下幾點(diǎn)：
代碼級優(yōu)化-jsJavascript代碼級優(yōu)化-js
a.HTMLCollection（HTML收集器，返回的是一個(gè)數(shù)組內(nèi)容信息）
在腳本中document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection類型的集合，在平時(shí)使用的時(shí)候大多將它作為數(shù)組來使用，因?yàn)樗衛(wèi)ength屬性，也可以使用索引訪問每一個(gè)元素。不過在訪問性能上則比數(shù)組要差很多，原因是這個(gè)集合并不是一個(gè)靜態(tài)的結(jié)果，它表示的僅僅是一個(gè)特定的查詢，每次訪問該集合時(shí)都會(huì)重新執(zhí)行這個(gè)查詢從而更新查詢結(jié)果。所謂的“訪問集合”包括讀取集合的length屬性、訪問集合中的元素。
因此，當(dāng)你需要遍歷HTMLCollection的時(shí)候，盡量將它轉(zhuǎn)為數(shù)組后再訪問，以提高性能。即使不轉(zhuǎn)換為數(shù)組，也請盡可能少的訪問它，例如在遍歷的時(shí)候可以將length屬性、成員保存到局部變量后再使用局部變量。
a.HTMLCollection（HTML收集器，返回b.Reflow&Repaint
除了上面一點(diǎn)之外，DOM操作還需要考慮瀏覽器的Reflow和Repaint，因?yàn)檫@些都是需要消耗資源的：
那么為了減少回流要注意哪些方式呢？b.Reflow&Repaint
除了上面一點(diǎn)之外
1：不要通過父級來改變子元素樣式，最好直接改變子元素樣式，改變子元素樣式盡可能不要影響父元素和兄弟元素的大小和尺寸2：盡量通過class來設(shè)計(jì)元素樣式，切忌用style3：實(shí)現(xiàn)元素的動(dòng)畫，對于經(jīng)常要進(jìn)行回流的組件，要抽離出來，它的position屬性應(yīng)當(dāng)設(shè)為fixed或absolute4：權(quán)衡速度的平滑。比如實(shí)現(xiàn)一個(gè)動(dòng)畫，以1個(gè)像素為單位移動(dòng)這樣最平滑，但reflow就會(huì)過于頻繁，CPU很快就會(huì)被完全占用。如果以3個(gè)像素為單位移動(dòng)就會(huì)好很多。
1：不要通過父級來改變子元素樣式，最好直接改變子元素樣式，5：不要用tables布局的另一個(gè)原因就是tables中某個(gè)元素一旦觸發(fā)reflow就會(huì)導(dǎo)致table里所有的其它元素reflow。6：css里不要有表達(dá)式expression7：減少不必要的DOM層級（DOMdepth）。改變DOM樹中的一級會(huì)導(dǎo)致所有層級的改變，上至根部，下至被改變節(jié)點(diǎn)的子節(jié)點(diǎn)。這導(dǎo)致大量時(shí)間耗費(fèi)在執(zhí)行reflow上面。8：避免不必要的復(fù)雜的CSS選擇器，尤其是后代選擇器（descendantselectors），因?yàn)闉榱似ヅ溥x擇器將耗費(fèi)更多的CPU。9:盡量不要過多的頻繁的去
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年制動(dòng)分泵項(xiàng)目合作計(jì)劃書
- 2024年微晶玻璃管合作協(xié)議書
- 2024年高純低羥基石英玻璃合作協(xié)議書
- 2024年超高壓復(fù)合膠管項(xiàng)目合作計(jì)劃書
- 2024年板材無模多點(diǎn)成型壓力機(jī)項(xiàng)目合作計(jì)劃書
- 2024年散料搬運(yùn)設(shè)備項(xiàng)目合作計(jì)劃書
- 2024年防爆燈具合作協(xié)議書
- 2024年三元催化轉(zhuǎn)換器項(xiàng)目建議書
- 執(zhí)業(yè)藥師藥事管理與法規(guī)模擬題421
- 幼兒園中班教案《小馬變發(fā)型》
- 生物化學(xué)（華南農(nóng)業(yè)大學(xué)）知到章節(jié)答案智慧樹2023年
- 小學(xué)“小科學(xué)家”評選活動(dòng)方案
- 稅務(wù)培訓(xùn)股權(quán)轉(zhuǎn)讓個(gè)人所得稅
- 電子游戲發(fā)展史
- D500-D505 2016年合訂本防雷與接地圖集
- 石膏固定術(shù)課件
- 四巧板(T字之謎)505圖答案
- 房屋結(jié)構(gòu)設(shè)計(jì)課程設(shè)計(jì)
- 2013年專八真題及答案
- 2020年貴州省高考英語試題及答案word版6987
- 新生代員工工作幸福感調(diào)研究緒論,mba人力資源管理論文
評論
0/150
提交評論