瀏覽器的主要功能是將用戶選擇的web資源呈現(xiàn)出來，它需要從服務(wù)器請求資源，并將其顯示在瀏覽器窗口中，資源的格式通常是HTML,也包括PDF辑畦，image及其他格式。用戶用URL來指定所請求資源的位置腿倚，通過DNS查詢纯出，將網(wǎng)址轉(zhuǎn)換為IP地址。

瀏覽器工作流程：

1.輸入網(wǎng)址敷燎。

2.瀏覽器查找域名的IP地址

3,瀏覽器給WEB服務(wù)器發(fā)送一個HTTP請求

4.網(wǎng)站服務(wù)的永久重定向響應(yīng)

5.瀏覽器跟蹤重定向地址（現(xiàn)在瀏覽器知道了要訪問的正確地址潦刃，所以它會發(fā)送另一個獲取請求）

6，服務(wù)器“處理”請求懈叹，服務(wù)器接收到獲取請求乖杠，然后處理并返回一個響應(yīng)。

7.服務(wù)器發(fā)回一個HTML響應(yīng)

8.瀏覽器開始顯示HTML

9,瀏覽器發(fā)送請求澄成，以獲取嵌入在HTML中的對象

瀏覽器的渲染過程：

1.處理html生成Dom（Document Object Model） Tree

2.處理css生成CSSOM（CSS Object Model） Tree

3.在文檔對象模型和CSS對象模型之上胧洒，創(chuàng)建一棵由一組待生成渲染的對象組成的渲染樹，即RenderTree

4.對Render樹進行布局計算墨状，即對渲染樹上的每個元素卫漫，計算它的坐標，稱之為布局肾砂。

5.繪制即Painting,渲染樹上的元素最終展示在瀏覽器里

關(guān)于瀏覽器的優(yōu)化列赎，首先我們需要先了解一下重繪和重排。

重繪（Repaint）：布局沒有發(fā)生改變镐确，改變那些不會影響元素在網(wǎng)頁中的位置的元素樣式時包吝，譬如background-color(背景色)， border-color(邊框色)源葫， visibility(可見性)诗越，瀏覽器只會用新的樣式將元素重繪一次(這就是重繪，或者說重新構(gòu)造樣式)

重排（Reflow）：當DOM變化影響了元素的幾何屬性（寬息堂、高改變等等）嚷狞，瀏覽器此時需要重新計算元素幾何屬性块促，并且頁面中其他元素的幾何屬性可能會受影響這樣渲染樹就發(fā)生了改變，也就是重新構(gòu)造RenderTree渲染樹

觸發(fā)重排的情況：

（1）頁面初始渲染

（2）DOM操作（元素添加床未、刪除竭翠、修改或者元素順序的改變）

（3）改變元素位置，改變元素尺寸（寬薇搁、高斋扰、內(nèi)外邊距、邊框等）只酥，改變元素內(nèi)容（文本或圖片等）

（4）瀏覽器窗口的操作（縮放，滾動）

（5）添加或刪除樣式表

（6）更改“類”的屬性

（7）偽類激活（懸停）

優(yōu)化：

（1）減少重繪和重排

（1）不要一條一條地修改 DOM 的樣式呀狼。與其這樣裂允，還不如預(yù)先定義好 css 的 class，然后修改 DOM 的 className哥艇。

（2）不要把 DOM 結(jié)點的屬性值放在一個循環(huán)里當成循環(huán)里的變量绝编。?

（3）為動畫的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他們的 CSS 是不會 reflow 的貌踏。?

（4）千萬不要使用 table 布局十饥。因為可能很小的一個小改動會造成整個 table 的重新布局。

（2）編寫CSS注意事項

CSS選擇符是從右到左進行匹配的祖乳，切記逗堵！所以，#nav li 我們以為這是一條很簡單的規(guī)則眷昆，秒秒鐘就能匹配到想要的元素蜒秤，但是，是從右往左匹配啊亚斋，所以作媚，會去找所有的li，然后再去確定它的父元素是不是#nav帅刊。纸泡，因此，寫css的時候需要注意：

（1）dom深度盡量淺赖瞒。

（2） 減少inline javascript女揭、css的數(shù)量。使用現(xiàn)代合法的css屬性栏饮。

（3） 不要為id選擇器指定類名或是標簽田绑，因為id可以唯一確定一個元素。

（4）避免后代選擇符抡爹，盡量使用子選擇符掩驱。原因：子元素匹配符的概率要大于后代元素匹配符。后代選擇符;#tp p{} 子選擇符：#tp>p{}

（51） 避免使用通配符，舉一個例子欧穴，.mod .hd *{font-size:14px;} 根據(jù)匹配順序,將首先匹配通配符,也就是說先匹配出通配符,然后匹配.hd（就是要對dom樹上的所有節(jié)點進行遍歷他的父級元素）,然后匹配.mod,這樣的性能耗費可想而知.

（3）Script標簽的位置

首先民逼，我們需要了解Javascript的加載和執(zhí)行的特點：?

（1）載入后馬上執(zhí)行，按順序從上向下執(zhí)行涮帘；?

（2）執(zhí)行時會阻塞頁面后續(xù)的內(nèi)容（包括頁面的渲染拼苍、其它資源的下載）。原因：因為瀏覽器需要一個穩(wěn)定的DOM樹結(jié)構(gòu)调缨，而JS中很有可能有 代碼直接改變了DOM樹結(jié)構(gòu)疮鲫，比如使用 document.write 或 appendChild,甚至是直接使用的location.href進行跳轉(zhuǎn)，瀏覽器為了防止出現(xiàn)JS修 改DOM樹弦叶，需要重新構(gòu)建DOM樹的情況俊犯，所以 就會阻塞其他的下載和呈現(xiàn)。

減少 JavaScript 對性能的影響的方法：

（1）將所有的script標簽放到頁面底部伤哺，也就是body閉合標簽之前燕侠，這能確保在腳本執(zhí)行前頁面已經(jīng)完成了DOM樹渲染。

（2）盡可能地合并腳本立莉。頁面中的script標簽越少绢彤，加載也就越快，響應(yīng)也越迅速蜓耻。無論是外鏈腳本還是內(nèi)嵌腳本都是如此茫舶。

（3）采用無阻塞下載 JavaScript 腳本的方法：?

????????a.使用script標簽的 defer 屬性（僅適用于 IE 和 Firefox 3.5 以上版本）；?

????????b.使用動態(tài)創(chuàng)建的script元素來下載并執(zhí)行代碼刹淌；

(4)?減少http請求的次數(shù)

根據(jù)功能和數(shù)據(jù)加載流程合并相應(yīng)的js,css,images 減少其請求的次數(shù)