成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

重學(xué)前端學(xué)習(xí)筆記（十五）--瀏覽器工作解析（五）

Sourcelink / 2828人閱讀

摘要：五繪制把任何位圖合成到最終位圖的操作稱為繪制。個人總結(jié)這一節(jié)主要講解了瀏覽器中的位圖操作部分，包括渲染合成和繪制三個部分。作業(yè)用實現(xiàn)一個玩具瀏覽器。。。。

筆記說明 
重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請聯(lián)系我，郵箱：[email protected]。
一、回顧 
大致梳理一下前面四篇文章主要講的內(nèi)容。

把 URL 變成字符流

把字符流變成詞（token）流

把詞（token）流構(gòu)造成 DOM樹

把不含樣式信息的 DOM 樹應(yīng)用 CSS 規(guī)則，變成包含樣式信息的 DOM 樹

并且根據(jù)樣式信息，計算了每個元素的位置和大小。

二、概括 
本文是最后的步驟，就是根據(jù)這些樣式信息和大小信息，為每個元素在內(nèi)存中渲染它的圖形，并且把它繪制到對應(yīng)的位置。
三、渲染 
本文中出現(xiàn)的“渲染”一詞，統(tǒng)一指的是它在圖形學(xué)的意義，也就是把模型變成位圖的過程。
3.1、位圖 
在內(nèi)存里建立一張二維表格，把一張圖片的每個像素對應(yīng)的顏色保存進(jìn)去。

位圖信息也是 DOM 樹中占據(jù)瀏覽器內(nèi)存最多的信息，做內(nèi)存占用優(yōu)化時，主要就是考慮這一部分。

3.2、圖形和文字 
瀏覽器中渲染這個過程，就是把每一個元素對應(yīng)的盒變成位圖。這里的元素包括 HTML 元素和偽元素，一個元素可能對應(yīng)多個盒（比如 inline 元素，可能會分成多行）。每一個盒對應(yīng)著一張位圖。

盒的背景、邊框、SVG 元素、陰影等特性，都是需要繪制的圖形類。

盒中的文字，也需要用底層庫來支持，叫做字體庫。能根據(jù)字符的碼點抽取出字形。字形分為像素字形和矢量字形兩種。

四、合成 
合成的過程，就是為一些元素創(chuàng)建一個“合成后的位圖”（稱為合成層），把一部分子元素渲染到合成的位圖上面。

1、好的合成策略是“猜測”可能變化的元素，把它排除到合成之外。

舉個例子：


    
...

假設(shè)合成策略能夠把 a、b 兩個 div 合成，而不把 c 合成，執(zhí)行以下代碼時：

document.getElementById("c").style.transform = "translate(100px, 0)";

繪制的時候，只需要繪制 a 和 b 合成好的位圖和 c，從而減少了繪制次數(shù)。如果 b 有很多復(fù)雜的子元素，那么性能提升收益非常高。

2、主流瀏覽器一般根據(jù) position、transform 等屬性來決定合成策略，新的 CSS 標(biāo)準(zhǔn)中，規(guī)定了 will-change 屬性，提升合成策略的效果。

五、繪制 
把任何位圖合成到最終位圖的操作稱為繪制。

1、繪制發(fā)生的頻率比我們想象中要高得多。

比如：鼠標(biāo)的每次移動，都造成了重新繪制，如果我們不重新繪制，就會產(chǎn)生大量的鼠標(biāo)殘影。

2、計算機(jī)圖形學(xué)中，使用的方案就是臟矩形算法限制繪制面積，也就是把屏幕均勻地分成若干矩形區(qū)域。

個人總結(jié)

這一節(jié)winter主要講解了瀏覽器中的位圖操作部分，包括渲染、合成和繪制三個部分。

渲染過程把元素變成位圖，合成把一部分位圖變成合成層，最終的繪制過程把合成層顯示到屏幕上。

某位同學(xué)：瀏覽器渲染出的結(jié)果如果是位圖，請問輸入框是怎么實現(xiàn)的？

winter回復(fù): 這個問到點子上啦，這塊太復(fù)雜我故意沒講，實際上渲染過程除了位圖，最終繪制上去還產(chǎn)生一個"熱區(qū)"，這個“熱區(qū)”不但跟你說的input相關(guān)，還跟用戶選擇、鼠標(biāo)事件和scroll等交互相關(guān)。

winter留了一個課后作業(yè)，有做出來的大佬可以告訴一下，我學(xué)習(xí)一下。

作業(yè)：用JavaScript實現(xiàn)一個玩具瀏覽器。。。。

大漠老師：“重繪，重排～都蛋疼”

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114650.html

相關(guān)文章

  • 重學(xué)前端學(xué)習(xí)筆記（十五）--瀏覽器工作解析（五）

    摘要：五繪制把任何位圖合成到最終位圖的操作稱為繪制。個人總結(jié)這一節(jié)主要講解了瀏覽器中的位圖操作部分，包括渲染合成和繪制三個部分。作業(yè)用實現(xiàn)一個玩具瀏覽器。。。。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音...

    iliyaku 評論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（十五）--瀏覽器工作解析（五）

    摘要：五繪制把任何位圖合成到最終位圖的操作稱為繪制。個人總結(jié)這一節(jié)主要講解了瀏覽器中的位圖操作部分，包括渲染合成和繪制三個部分。作業(yè)用實現(xiàn)一個玩具瀏覽器。。。。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音...

    dongxiawu 評論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（二十五）--CSS的正常流

    摘要：一正常流的行為正常流的排版行為依次排列，排不下了換行。在正常流基礎(chǔ)上，有相關(guān)規(guī)則，使得一些盒占據(jù)了正常流需要的空間，可以把理解為文字環(huán)繞。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請聯(lián)...

    dcr309duan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<