日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
JavaScript是如何工作的:渲染引擎和優(yōu)化其性能的技巧

當(dāng)你構(gòu)建 Web 應(yīng)用程序時(shí)，你不只是編寫(xiě)單獨(dú)運(yùn)行的 JavaScript 代碼，你編寫(xiě)的 JavaScript 正在與環(huán)境進(jìn)行交互。了解這種環(huán)境，它的工作原理以及它的組，這些有助于你夠構(gòu)建更好的應(yīng)用程序，并為應(yīng)用程序發(fā)布后可能出現(xiàn)的潛在問(wèn)題做好充分準(zhǔn)備。

我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、中山ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的中山網(wǎng)站制作公司

瀏覽器的主要組件包括：

  • 用戶界面 (User interface)： 包括地址欄、后退/前進(jìn)按鈕、書(shū)簽?zāi)夸浀龋簿褪悄闼吹降某擞脕?lái)顯示你所請(qǐng)求頁(yè)面的主窗口之外的其他部分
  • 瀏覽器引擎 (Browser engine)： 用來(lái)查詢及操作渲染引擎的接口
  • 渲染引擎 (Rendering engine)： 用來(lái)顯示請(qǐng)求的內(nèi)容，例如，如果請(qǐng)求內(nèi)容為 html，它負(fù)責(zé)解析 html 及 css，并將解析后的結(jié)果顯示出來(lái)
  • 網(wǎng)絡(luò) (Networking)： 用來(lái)完成網(wǎng)絡(luò)調(diào)用，例如http請(qǐng)求，它具有平臺(tái)無(wú)關(guān)的接口，可以在不同平臺(tái)上工作
  • UI 后端 (UI backend)： 用來(lái)繪制類(lèi)似組合選擇框及對(duì)話框等基本組件，具有不特定于某個(gè)平臺(tái)的通用接口，底層使用操作系統(tǒng)的用戶接口
  • JS 解釋器 (JavaScript engine)： 用來(lái)解釋執(zhí)行JS代碼
  • 數(shù)據(jù)存儲(chǔ) (Data persistence)： 屬于持久層，瀏覽器需要在硬盤(pán)中保存類(lèi)似 cookie 的各種數(shù)據(jù)，HTML5定義了 Web Database 技術(shù)，這是一種輕量級(jí)完整的客戶端存儲(chǔ)技術(shù)，支持的存儲(chǔ)機(jī)制類(lèi)型包括 localStorage 、 indexDB 、 WebSQL 和 FileSystem 。

在這篇文章中，將重點(diǎn)討論渲染引擎，因?yàn)樗幚?HTML 和 CSS 的解析和可視化，這是大多數(shù) JavaScript 應(yīng)用程序經(jīng)常與之交互的東西。

渲染引擎概述

渲染引擎的職責(zé)就是渲染，即在瀏覽器窗口中顯示所請(qǐng)求的內(nèi)容。

渲染引擎可以顯示 HTML 和 XML 文檔和圖像。如果使用其他插件，渲染引擎還可以顯示不同類(lèi)型的文檔，如 PDF。

渲染引擎 (Rendering engines)

與 JavaScript 引擎類(lèi)似，不同的瀏覽器也使用不同的渲染引擎。以下是一些最受歡迎的:

  • Gecko — Firefox
  • WebKit — Safari
  • Blink — Chrome，Opera (版本 15 之后)

Firefox、Chrome 和 Safari 是基于兩種渲染引擎構(gòu)建的，F(xiàn)irefox 使用 Geoko——Mozilla 自主研發(fā)的渲染引擎，Safari 和 Chrome 都使用 Webkit。Blink 是 Chrome 基于 WebKit的自主渲染引擎。

渲染的過(guò)程

渲染引擎從網(wǎng)絡(luò)層接收所請(qǐng)求文檔的內(nèi)容。

解析 HTML 以構(gòu)建 Dom 樹(shù) -> 構(gòu)建 Render 樹(shù) -> 布局 Render 樹(shù) -> 繪制 Render 樹(shù)

構(gòu)建 Dom 樹(shù)

渲染現(xiàn)引擎的第一步是解析 HTML文檔，并將解析后的元素轉(zhuǎn)換為 DOM 樹(shù) 中的實(shí)際 DOM 節(jié)點(diǎn)。

假如有如下 Html 結(jié)構(gòu)

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.    
    3.   
  
  
  
  3.      
    4.   
  
  
  
  4.      
    5.   
  
  
  
  5.    
    6.   
  
  
  
  6.    
    7.   
  
  
  
  7.     
     Hello,  friend!  
     
    8.   
  
  
  
  8.     
      
    9.   
  
  
  
  9.        
    10.   
  
  
  
  10.     
 
  •     
  •  

    • 對(duì)應(yīng)的 DOM樹(shù)如下：

    基本上，每個(gè)元素都表示為所有元素的父節(jié)點(diǎn)，這些元素直接包含在元素中。

    構(gòu)建 CSSOM

    CSSOM 指的是 CSS 對(duì)象模型 。 當(dāng)瀏覽器構(gòu)建頁(yè)面的 DOM 時(shí)，它在 head 標(biāo)簽下如遇到了一個(gè) link 標(biāo)記且引用了外部 theme.css CSS 樣式表。 瀏覽器預(yù)計(jì)可能需要該資源來(lái)呈現(xiàn)頁(yè)面，它會(huì)立即發(fā)送請(qǐng)求。 假設(shè) theme.css 文件內(nèi)容如下：

     
 
 
 
        
  
  
  
    1. body {  
      2.   
  
  
  
    2.   font-size: 16px; 
      3.   
  
  
  
    3. } 
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. p {  
      6.   
  
  
  
    6.   font-weight: bold;  
      7.   
  
  
  
    7. } 
      8.   
  
  
  
    8.  
      9.   
  
  
  
    9. span {  
      10.   
  
  
  
    10.   color: red;  
      11.   
  
  
  
    11. } 
      12.   
  
  
  
    12.  
      13.   
  
  
  
    13. p span {  
      14.   
  
  
  
    14.   display: none;  
      15.   
  
  
  
    15. } 
      16.   
  
  
  
    16.  
      17.   
  
  
  
    17. img {  
      18.   
  
  
  
    18.   float: right;  
      19.   
  
  
  
    19. } 
      20.

    與 HTML一樣，渲染引擎需要將 CSS 轉(zhuǎn)換成瀏覽器可以使用的東西—— CSSOM。CSSOM 結(jié)構(gòu)如下：

    你想知道為什么 CSSOM 是一個(gè)樹(shù)形結(jié)構(gòu)？ 在為頁(yè)面上的任何對(duì)象計(jì)算最終樣式集時(shí)，瀏覽器以適用于該節(jié)點(diǎn)的最常規(guī)規(guī)則開(kāi)始（例如，如果它是 body 元素的子元素，則應(yīng)用所有 body 樣式），然后遞歸地細(xì)化，通過(guò)應(yīng)用更具體的規(guī)則來(lái)計(jì)算樣式。

    來(lái)看看具體的例子。包含在 body 元素內(nèi)的 span 標(biāo)簽中的任何文本的字體大小均為 16 像素，并且為紅色。這些樣式是從 body 元素繼承而來(lái)的。 如果一個(gè) span 元素是一個(gè) p 元素的子元素，那么它的內(nèi)容就不會(huì)被顯示，因?yàn)樗粦?yīng)用了更具體的樣式（display: none）。

    另請(qǐng)注意，上面的樹(shù)不是完整的 CSSOM 樹(shù)，只顯示我們決定在樣式表中覆蓋的樣式。 每個(gè)瀏覽器都提供一組默認(rèn)樣式，也稱為 “user agent stylesheet” 。這是我們?cè)谖疵鞔_指定任何樣式時(shí)看到的樣式，我們的樣式會(huì)覆蓋這些默認(rèn)值。

    不同瀏覽器對(duì)于相同元素的默認(rèn)樣式并不一致，這也是為什么我們?cè)?CSS 的最開(kāi)始要寫(xiě) *{padding:0;marging:0}; ，也就是我們要重置CSS默認(rèn)樣式的。

    構(gòu)建渲染樹(shù)

    CSSOM 樹(shù)和 DOM 樹(shù)連接在一起形成一個(gè) render tree，渲染樹(shù)用來(lái)計(jì)算可見(jiàn)元素的布局并且作為將像素渲染到屏幕上的過(guò)程的輸入。

    • DOM 樹(shù)和 CSSOM 樹(shù)連接在一起形成 render tree .
    • render tree 只包含了用于渲染頁(yè)面的節(jié)點(diǎn)
    • 布局計(jì)算了每一個(gè)對(duì)象的準(zhǔn)確的位置以及大小
    • 繪畫(huà)是最后一步，繪畫(huà)要求利用 render tree 來(lái)將像素顯示到屏幕上

    渲染樹(shù)中的每個(gè)節(jié)點(diǎn)在 Webkit 中稱為渲染器或渲染對(duì)象。

    收下是上面 DOM 和 CSSOM 樹(shù)的渲染器樹(shù)的樣子：

    為了構(gòu)建渲染樹(shù)，瀏覽器大致執(zhí)行以下操作:

    • 從 DOM 樹(shù)根節(jié)點(diǎn)開(kāi)始，遍歷每一個(gè)可見(jiàn)的節(jié)點(diǎn)

     
 
 
 
        
  
  
  
    1. display:none 
      2.
    • 對(duì)每一個(gè)可見(jiàn)的節(jié)點(diǎn)，找到合適的匹配的CSSOM規(guī)則，并且應(yīng)用樣式
    • 顯示可見(jiàn)節(jié)點(diǎn)（節(jié)點(diǎn)包括內(nèi)容和被計(jì)算的樣式）

    “visibility:hidden” 和 “display：none” 之間的不同， “visibility:hidden” 將元素設(shè)置為不可見(jiàn)，但是同樣在布局上占領(lǐng)一定空間（例如，它會(huì)被渲染成為空盒子），但是 “display:none” 的元素是將節(jié)點(diǎn)從整個(gè) render tree 中移除，所以不是布局中的一部分 。

    你可以在這里查看 RenderObject 的源代碼（在 WebKit 中）：

    https://github.com/WebKit/web...

    我們來(lái)看看這個(gè)類(lèi)的一些核心內(nèi)容：

    每個(gè)渲染器代表一個(gè)矩形區(qū)域，通常對(duì)應(yīng)于一個(gè)節(jié)點(diǎn)的 CSS 盒模型。它包含幾何信息，例如寬度、高度和位置。

    渲染樹(shù)的布局

    創(chuàng)建渲染器并將其添加到樹(shù)中時(shí)，它沒(méi)有位置和大小，計(jì)算這些值稱為布局。

    HTML使用基于流的布局模型，這意味著大多數(shù)時(shí)間它可以一次性計(jì)算幾何圖形。坐標(biāo)系統(tǒng)相對(duì)于根渲染器，使用左上原點(diǎn)坐標(biāo)。

    布局是一個(gè)遞歸過(guò)程 - 它從根渲染器開(kāi)始，它對(duì)應(yīng)于 HTML 文檔的  元素。 布局以遞歸方式繼續(xù)通過(guò)部件或整個(gè)渲染器層次結(jié)構(gòu)，為每個(gè)需要它的渲染器計(jì)算幾何信息。

    根渲染器的位置為 0,0 ，其尺寸與瀏覽器窗口的可見(jiàn)部分(即viewport)的大小相同。開(kāi)始布局過(guò)程意味著給每個(gè)節(jié)點(diǎn)在屏幕上應(yīng)該出現(xiàn)的確切坐標(biāo)。

    繪制渲染樹(shù)

    在此繪制，遍歷渲染器樹(shù)并調(diào)用渲染器的 paint() 方法以在屏幕上顯示內(nèi)容。

    繪圖可以是全局的或增量式的（與布局類(lèi)似）：

    • 全局 — 整棵樹(shù)被重繪
    • 增量式 — 只有一些渲染器以不影響整個(gè)樹(shù)的方式改變。 渲染器使其在屏幕上的矩形無(wú)效，這會(huì)導(dǎo)致操作系統(tǒng)將其視為需要重新繪制并生成繪 paint 事件的區(qū)域。 操作系統(tǒng)通過(guò)將多個(gè)區(qū)域合并為一個(gè)來(lái)智能完成。

    總的來(lái)說(shuō)，重要的中要理解繪圖是一個(gè)漸進(jìn)的過(guò)程。為了更好的用戶體驗(yàn)，渲染引擎將盡可能快地在屏幕上顯示內(nèi)容。它不會(huì)等到解析完所有 HTML 后才開(kāi)始構(gòu)建和布局渲染樹(shù)，而是解析和顯示部分內(nèi)容，同時(shí)繼續(xù)處理來(lái)自網(wǎng)絡(luò)的其余內(nèi)容項(xiàng)。

    處理腳本和樣式表的順序

    當(dāng)解析器到達(dá)