做爲前端小生,咱們須要瞭解的一些瀏覽器相關的知識

1.SEO（Search Engine Optimization）搜索引擎優化:

SEO概念 : 漢譯爲搜索引擎優化。搜索引擎優化是一種利用搜索引擎的搜索規則來提升目的網站在有關搜索引擎內的排名的方式。

SEO目的：爲網站提供生態式的自我營銷解決方案，讓網站在行業內佔據領先地位，從而得到品牌收益。

 

2. 各大瀏覽器的內核(排版引擎):

(1). IE逐漸成爲微軟專屬軟件. 它採用的排版引擎(俗稱內核)爲Trident

(2). Safari是蘋果公司開發的瀏覽器. Safari所用瀏覽器內核的名稱是大名鼎鼎的WebKit。

(3). 谷歌Chrome/Chromium瀏覽器從08年創始至今一直使用蘋果公司的WebKit做爲瀏覽器內核原型，是WebKit的一個分支，咱們能夠稱之爲Chromium引擎（注意咱們這裏說的是Chromium引擎，而不是Chromium瀏覽器）。

(4). Opera瀏覽器，是一款挪威Opera Software ASA公司製做的支持多頁面標籤式瀏覽的網絡瀏覽器, 它使用了Opera Software自主開發的Presto渲染引擎。

(5). Firefox瀏覽器使用的是Gecko內核

 

3. 各大瀏覽器對應的css屬性私有前綴

瀏覽器	私有前綴
chrome和safari	-web-kit
Firefox	-moz-
IE	-ms-
Opera	-o-

 

4. 瀏覽器的渲染機制:

瀏覽器渲染網頁的步驟:

1.使用HTML建立文檔對象模型(DOM)

2.使用css建立css對象模型(CSSOM)

3.基於DOM和CSSOM執行腳本(Script)

  補充腳本的概念: 腳本語言又被稱爲擴建的語言，或者動態語言，是一種編程語言，用來控制軟件應用程序，腳本一般以文本（如ASCII)保存，只在被調用時進行解釋或編譯。

4.合併DOM和CSSOM造成渲染樹(Render Tree)

5.使用渲染樹佈局(Layout)全部元素

6.渲染(Paint)全部元素.

圖解

瀏覽器渲染網頁的步驟:

 

:

瀏覽器渲染網頁各個步驟分析:

步驟1. HTML加載優化策略:

　　　1. 樣式在頂部,腳本在底部. 緣由是腳本加載完後,沒有樣式是不會執行的.

　　　2. 最小化和壓縮: 移除多於的字符,空格,註釋等.

　　　3. 無障礙:給元素加上aria標籤,圖片多用alt文本, 會大大提升殘障人士的滿意度

 

步驟2.CSS渲染阻塞:

當瀏覽器發現任何與節點相關的樣式時候,好比外部,內部,行內樣式,當即會中止渲染DOM,並利用這些節點建立CSSOM.

CSS加載優化策略:

1. 使用,media屬性指定加載樣式的條件.
2. 延遲加載首屏下面的CSS樣式.
3. 只加載須要的樣式.

 

步驟3. JavaScript的解析器阻塞: 即瀏覽器構建DOM和CSS樣式的時候,忽然發現外部或者行內腳本,就會先中止解析節點,會先完成樣式的構建和腳本的執行.

JavaScript加載優化策略:

1. 利用async屬性實現異步加載腳本.
2. 使用defer屬性實現延遲加載腳本,會等到HTML完成解析後再執行.

 補充: 異步async[ə'zɪŋk] 和 延遲defer:

1 <script src="script.js"></script>
2 沒有 defer 或 async，瀏覽器會當即加載並執行指定的腳本，「當即」指的是在渲染該 script 標籤之下的文檔元素以前，也就是說不等待後續載入的文檔元素，讀到就加載並執行。
3 
4 <script async src="script.js"></script>
5 有 async，加載和渲染後續文檔元素的過程將和 script.js 的加載與執行並行進行（異步）。
6 
7 <script defer src="myscript.js"></script>
8 有 defer，加載後續文檔元素的過程將和 script.js 的加載並行進行（異步），可是 script.js 的執行要在全部元素解析完成以後，DOMContentLoaded 事件觸發以前完成。

 

 

步驟4. 渲染樹

一旦全部節點已被解析，DOM 和 CSSOM 準備合併，瀏覽器便會構建渲染樹。若是咱們把節點想象成單詞，那麼對象模型就是句子，渲染樹即是整個頁面。

 

步驟5. 佈局

佈局階段須要肯定頁面上全部元素的大小和位置

 

步驟6. 渲染

最終渲染階段,會真正地光柵化(把圖形數據轉化成圖像)屏幕上的像素,把頁面呈現給用戶..