瀏覽器是如何工作的？
瀏覽器分為三大塊：
使用者介面：使用者可以直接操作的介面
瀏覽器引擎：
渲染引擎：分為網路程序和js解析器
什麼是程序、執行緒？
程序：進行資源分配和排程的基本單元，可以申請和排程計算機資源。
執行緒：運算排程的最小單位。乙個程序中可以併發多個執行緒，每條執行緒並行執行不同的任務。
瀏覽器中分為多個不同的程序，可以同時進行。這樣能夠避免乙個執行緒出現卡頓，導致其他執行緒等待的問題。
瀏覽器中分為哪些程序？
瀏覽器程序 控制除了標籤頁外的使用者介面
網路程序 接受或發起網路服務請求
gpu程序 負責整個瀏覽器介面的渲染
外掛程式程序（例如flash）負責控制**使用的所有外掛程式
渲染程序 顯示tab標籤內的所有內容
瀏覽器如何解析**頁面的？
2.首先由ui介面捕獲url位址，
然後發起乙個網路程序，
請求dns伺服器，
進行網域名稱解析
3.如果是chrome瀏覽器，訪問站點前會執行safebrowsing進行安全監測。檢視網點是否在其危險名單中。會給予使用者提示，使用者也可繼續行進訪問。
4.ui程序會建立乙個渲染器程序來渲染頁面。ui將資料通過ipc管道傳遞給渲染器。
5.主程序解析html，構建dom樹，建立document物件。
（什麼是dom？
dom是依據html文件，而構建的資料結構物件。為js的操作提供api）
6.如果此時遇到script標籤，則會暫停解析html文件，而去解析js檔案並執行。因為瀏覽器並不知道，是否在js**中，有例如「document.write」這種對文件元素進行修改的**。
7.解析css樣式。獲得layout布局中，元素節點的位置大小等樣例。
8.通過遍歷dom樹和計算好的樣式，構成layout tree。
layout tree中每個節點都記錄了元素的x,y和layout尺寸。
其中，dom樹和layout樹並不是一一對應的。
設定了「display:none;」的節點不會出想在layout tree上。偽類中的content元素會出現在layout tree中，而不會出現在dom tree上。因為dom解析html獲得，並不關心樣式。而layout tree根據dom樹和計算的樣式構成。
9.主線程遍歷layout tree構建回執記錄表。記錄繪製順序。
因為，「z-index:;」樣式設定會改變樣式位置，所以瀏覽器需要獲取渲染順序，以便渲染不會出錯。
10.接著進行圖層柵格化。（柵格化：將元素點放置在螢幕上）
早期的柵格化，是將多個圖層疊加在瀏覽器顯示區域，使用者滾動新的區域在進行頁面的更新渲染。
這樣的好處是能較快的渲染出使用者需要看到的介面，但類似懶載入的處理方式，可能會由於渲染時間過長而出現白屏等卡頓情況。
新的柵格化方案是通過將元素點分為幾個圖層，再將圖層進行合成在一起的方式。
11.綜上所述：
主線程會遍歷layout tree ，生成layer tree，然後將layer tree通過ipc床底給合成器執行緒
合成器執行緒，會將每個圖層柵格化。然後將他們切割成小塊傳遞給柵格執行緒，柵格處理後的的圖塊儲存在gpu記憶體中；接著柵格執行緒將draw quads（儲存的每個小圖塊在頁面中的位置、記憶體位址等資訊）給合成器執行緒生成合成器幀，通過ipc傳遞給gpu，gpu再渲染到螢幕。
隨著頁面的更新，gpu會不斷生成新幀顯示到螢幕上。
20155222盧梓傑 課下測試04補做
a 同時多條指令引起異常 b 指令執行引起異常，後來由於分支 錯誤，取消了該指令 c 不同階段更新系統狀態的不同部分 d 與流水線無關的異常 正確答案 b 解析 在這個程式中，流水線會 選擇分支，因此他會取出並以乙個值為0xff的位元組作為指令。解碼階段會因此發現乙個非法指令異常。稍後，流水線會發現...
04 前端技術 flex布局
目錄 一，體驗 二，flex direction 三，justify content 四，flex wrap和align items 1，flex wrap 2，align items 五，align content 六，flex 七，align self 八，導航欄 了解flex布局 它與傳統布局...
前端學習 Day04
css cascading style sheet 層疊樣式表1.標籤 之類的標籤 使用方式 直接輸入標籤名 2.類 class class名字 使用方式 輸入點 class名 3.id id 名 使用方式 輸入 id名 一般來說我們寫css檔案的時候用的是第二種選擇器，class名 這是因為id名...