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

資訊專欄INFORMATION COLUMN

重學前端學習筆記（十五）--瀏覽器工作解析（五）

iliyaku / 944人閱讀

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

筆記說明 
重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，郵箱：kaimo313@foxmail.com。
一、回顧 
大致梳理一下前面四篇文章主要講的內容。

把 URL 變成字符流

把字符流變成詞（token）流

把詞（token）流構造成 DOM樹

把不含樣式信息的 DOM 樹應用 CSS 規則，變成包含樣式信息的 DOM 樹

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

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

位圖信息也是 DOM 樹中占據瀏覽器內存最多的信息，做內存占用優化時，主要就是考慮這一部分。

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

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

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

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

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

舉個例子：


    
...

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

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

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

2、主流瀏覽器一般根據 position、transform 等屬性來決定合成策略，新的 CSS 標準中，規定了 will-change 屬性，提升合成策略的效果。

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

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

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

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

個人總結

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

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

某位同學：瀏覽器渲染出的結果如果是位圖，請問輸入框是怎么實現的？

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

winter留了一個課后作業，有做出來的大佬可以告訴一下，我學習一下。

作業：用JavaScript實現一個玩具瀏覽器。。。。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/55042.html

相關文章

  • 重學前端學習筆記（十五）--瀏覽器工作解析（五）

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

    dongxiawu 評論0 收藏0

  • 重學前端學習筆記（十五）--瀏覽器工作解析（五）

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

    Sourcelink 評論0 收藏0

  • 重學前端學習筆記（二十五）--CSS的正常流

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

    dcr309duan 評論0 收藏0

發表評論

0條評論

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