国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Sourcelink / 2825人閱讀

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

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

把 URL 變成字符流

把字符流變成詞（token）流

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

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

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

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

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

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

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

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

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

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

舉個(gè)例子：


    
...

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

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

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

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

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

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

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

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

個(gè)人總結(jié)

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

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114650.html

相關(guān)文章

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

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

    iliyaku 評(píng)論0 收藏0

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

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

    dongxiawu 評(píng)論0 收藏0

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

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

    dcr309duan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<