機(jī)器語(yǔ)言---匯編語(yǔ)言---高級(jí)語(yǔ)言
副作用/執(zhí)行順序/代碼組織/狀態(tài)管理/語(yǔ)法和詞法

? ? ? ? ? ? ?|--------命令時(shí) ?面向?qū)ο?面向過(guò)程
編程范式-----------------聲明式 ?函數(shù)式/響應(yīng)式

? ? ? ? ? ? ? ? ? ? ? ? |-----函數(shù)---函數(shù)和語(yǔ)句
自頂向下 程序-------模塊1---------變量---數(shù)據(jù)結(jié)構(gòu)
? ? ? ? ? ? ?|
? ? ? ? ? ? ?| ? ? ? ? ?|-----函數(shù)---函數(shù)和語(yǔ)句
? ? ? ? ? ? ?|---模塊2---------變量---數(shù)據(jù)結(jié)構(gòu)

面向?qū)ο?br>1.封裝
2.繼承
3.多態(tài) 接口復(fù)用
4.依賴注入 ? 聲明依賴 聲明實(shí)現(xiàn) ?然后得到注入對(duì)象

面向?qū)ο缶幊痰脑瓌t
1.單一職責(zé)原則
2.開(kāi)放封閉原則 ?在擴(kuò)展性開(kāi)放 在更改性上封閉
3.里氏替換原則 ?子體應(yīng)當(dāng)可以替換父類 并且出現(xiàn)在父類出現(xiàn)的任何地方
4.依賴倒置原則 ?具體依賴抽象 上層依賴下層
5.接口分離原則 ?讓依賴通過(guò)接口來(lái)區(qū)分

瀏覽器架構(gòu)
1.單進(jìn)程架構(gòu)：所有模塊運(yùn)行在同一個(gè)進(jìn)程里，包含網(wǎng)絡(luò)、插件、JavaScript運(yùn)行環(huán)境等
2.多進(jìn)程架構(gòu)：主進(jìn)程、網(wǎng)絡(luò)進(jìn)程、渲染進(jìn)程、GPU進(jìn)程、插件進(jìn)程
3.面向服務(wù)架構(gòu)：將原來(lái)的UI、數(shù)據(jù)庫(kù)、文件、設(shè)備、網(wǎng)絡(luò)等，作為一個(gè)獨(dú)立的基礎(chǔ)服務(wù)

瀏覽器架構(gòu)-多進(jìn)程分工
1.瀏覽器（主進(jìn)程） ?負(fù)責(zé)頁(yè)面展示邏輯，用戶交互 子進(jìn)程管理
2.GPU進(jìn)程負(fù)責(zé)UI繪制，包含整個(gè)瀏覽器全部UI
3.網(wǎng)絡(luò)進(jìn)程網(wǎng)絡(luò)服務(wù)進(jìn)程，負(fù)責(zé)網(wǎng)絡(luò)資源加載
4.標(biāo)簽頁(yè)(渲染進(jìn)程)控制tab內(nèi)的所有內(nèi)容，將Html、Css和JavaScript轉(zhuǎn)換為用戶可交互的網(wǎng)頁(yè)
5.插件進(jìn)程控制網(wǎng)站運(yùn)行的插件，比如flash、ModHeader等
6.其他進(jìn)程如上圖所示：適用程序Storage/Network/AudioService等

渲染進(jìn)程-多線程架構(gòu)
內(nèi)部是多線程實(shí)現(xiàn)，主要負(fù)責(zé)頁(yè)面渲染，腳本執(zhí)行，事件處理，網(wǎng)絡(luò)請(qǐng)求等
線程 ? ? ? 功能
JS引擎 ? ? 負(fù)責(zé)解析js腳本，運(yùn)行js程序，每個(gè)渲染進(jìn)程下面只有一個(gè)js引擎線程。與GUI渲染線程互斥，如果js任務(wù)執(zhí)行事件過(guò)長(zhǎng)，會(huì)導(dǎo)致頁(yè)面卡頓
GUI渲染 ? ?負(fù)責(zé)渲染瀏覽器界面，解析html、css，構(gòu)建dom樹(shù)和render樹(shù)、布局、繪制，和js引擎線程互斥，GUI更新會(huì)在js引擎空閑時(shí)立即執(zhí)行
定時(shí)器觸發(fā) ?定時(shí)器所在線程，setTimeout、setInterval計(jì)時(shí)完畢后，將回調(diào)添加到事件隊(duì)列，等待js引擎執(zhí)行
網(wǎng)絡(luò)線程 ? ?在XHR、Fetch等發(fā)起請(qǐng)求后新開(kāi)一個(gè)網(wǎng)絡(luò)線程請(qǐng)求，如果設(shè)置了回調(diào)函數(shù)，在狀態(tài)變更時(shí)，將回調(diào)放入事件隊(duì)列，等待js引擎執(zhí)行
事件觸發(fā) ? ?由宿主環(huán)境提供，用于控制事件循環(huán)，不斷地從事件隊(duì)列里取出任務(wù)執(zhí)行

瀏覽器輸入url發(fā)生了什么?
1. 主進(jìn)程通知為站點(diǎn)尋找一個(gè)渲染進(jìn)程 ?browser---通過(guò)ipc告知--->Render(我收到了 這就干活)
2. render開(kāi)始加載html文檔 和圖片 css js等資源
3. html-->DOM樹(shù)------------|
? css-->CSSOM-------------|----render樹(shù)(渲染樹(shù))
4. 頁(yè)面布局
5. 構(gòu)建圖層(edge3d視圖可見(jiàn)圖層)---繪制圖層(交給合成線程)---合成線程生成圖塊---交給柵格線程?hào)鸥窕?br>
首屏優(yōu)化
1.壓縮、分包、刪除無(wú)用代碼
2.靜態(tài)資源分離
3.js腳本非阻塞加載
4.緩存策略
5.SSR
6.預(yù)置loading 骨架屏

渲染優(yōu)化
1.GPU加速
2.減少回流，重繪
3.離屏渲染
4.懶加載

js優(yōu)化
1.防止內(nèi)存泄漏
2.循環(huán)盡早break
3.合理使用閉包
4.減少Dom訪問(wèn)
5.防抖、節(jié)流
6.WebWorkers

Webview 跨端容器
1.Webview，即網(wǎng)頁(yè)視圖，用于加載網(wǎng)頁(yè)Url，并展示其內(nèi)容的控件
2.可以內(nèi)嵌在移動(dòng)端App內(nèi)，實(shí)現(xiàn)前端混合開(kāi)發(fā)，大多數(shù)混合框架都是基于Webview的二次開(kāi)發(fā)；比如Ionic、Cordova

渲染流程
1.原生組件渲染--->2.React/Vue框架--->3.virtual dom--->4.JSBridge--->5.Native API--->6.android/ios

跨端容器的通用原理
1.UI組件
2.渲染引擎
3.邏輯控制引擎
4.通信橋梁
5.底層API抹平表現(xiàn)差異