瀏覽器是如何運(yùn)行的

瀏覽器的發(fā)展史

• 1991年Berners Lee(互聯(lián)網(wǎng)發(fā)明者之一)font>建立了第一代網(wǎng)絡(luò)瀏覽器 WorldWideWeb —— 只支持顯示文本圖片
• 1993年 Mosaic —— 可以同時(shí)顯示文本和圖像的瀏覽器
• 1994年 網(wǎng)景瀏覽器 —— 只能顯示簡(jiǎn)單的 html 沒(méi)有css、js 獲得世界范圍內(nèi)的成功、占領(lǐng)了絕大多數(shù)的市場(chǎng)份額
  • 同年出現(xiàn)了 opera 瀏覽器
• 1995年 Microsoft 發(fā)布了萬(wàn)惡的 IE1.0、IE2.0 自此第一次瀏覽器大戰(zhàn)正式打響
• 1996年 Windows 集成 IE3.0
  • 網(wǎng)景市場(chǎng)份額 86% IE發(fā)行后的4年內(nèi)在Windows操作系統(tǒng)的幫助下逐漸取代了網(wǎng)景瀏覽器的領(lǐng)導(dǎo)地位，達(dá)到了市場(chǎng)份額的75%
• 1998年網(wǎng)景公司成立了 Mozilla 基金會(huì) 開(kāi)發(fā)了著名的開(kāi)源項(xiàng)目 Firefox 瀏覽器
• 1999年 IE市場(chǎng)份額為 99%
• 2003年 Apple 發(fā)布了 Safari 瀏覽器 集成于所有 Apple 操作系統(tǒng)中
• 2004年 Firefox 發(fā)布1.0版本 拉開(kāi)了瀏覽器第二次大戰(zhàn)的序幕有
• 2005年 Apple 開(kāi)源了 Safari 瀏覽器的內(nèi)核 webkit
• 2008年 Google 以Apple 開(kāi)源項(xiàng)目 webkit 作為內(nèi)核創(chuàng)建了一個(gè)新的項(xiàng)目 Chromium 在此基礎(chǔ)上 Google 發(fā)布了 Chrome 瀏覽器 Chrome發(fā)展十分迅速 現(xiàn)在已經(jīng)成為了全球最受歡迎的瀏覽器
• 2015年 由于IE性能和體驗(yàn)問(wèn)題IE逐漸掉隊(duì)，Microsoft也放棄了IE推出了基于 webkit 內(nèi)核的 Edge 瀏覽器
• 2020年 Microsoft 正式發(fā)布基于chromium 內(nèi)核的 Edge瀏覽器

簡(jiǎn)化的瀏覽器結(jié)構(gòu)圖

渲染引擎

渲染引擎可以說(shuō)是一個(gè)瀏覽器的核心與靈魂
IE —— Trident
Firefox —— Gecko
Safari —— Webkit
Chrome 、Opera、Edge—— Blink 基于 Webkit 優(yōu)化改造的

渲染過(guò)程

??瀏覽器進(jìn)程中的網(wǎng)絡(luò)線程請(qǐng)求獲取到html數(shù)據(jù)后，通過(guò)IPC將數(shù)據(jù)傳遞給渲染器進(jìn)程的主線程，主線程將html解構(gòu)造成DOM樹(shù)，然后進(jìn)行樣式計(jì)算，根據(jù)DOM樹(shù)和生成好的樣式生成Layout Tree，通過(guò)遍歷Layout Tree生成繪制順序表，接著便離了Layout Tree生成了Layer Tree，然后主線程將Layer Tree和繪制順序信息一起傳給合成器線程，合成器線程按規(guī)則進(jìn)行分圖層，并把圖層分為更小的土塊傳給柵格線程進(jìn)行柵格化，柵格化完成后，合成器線程會(huì)獲得柵格線程傳過(guò)來(lái)的“draw quads”圖塊信息，根據(jù)這信息合成器線上合成了一個(gè)合成器幀，然后將該合成器幀通過(guò)IPC傳回給瀏覽器進(jìn)程，瀏覽器進(jìn)程再傳到GPU進(jìn)行渲染之后就展示在你的屏幕上了。

??當(dāng)我們改變一個(gè)元素的尺寸位置屬性時(shí)，會(huì)重新進(jìn)行樣式計(jì)算、布局、繪制以及后面的所有流程——重排

??當(dāng)我們改變某個(gè)元素的顏色屬性時(shí)，不會(huì)重新觸發(fā)布局，但還是會(huì)觸發(fā)樣式計(jì)算和繪制——重繪

• 重排和重繪都會(huì)占用主線程 JS也運(yùn)行在主線程

優(yōu)化手段

一、requestAnimationFrame()

• requestAnimationFrame()這個(gè)方法會(huì)在每一幀被調(diào)用，通過(guò)API的回調(diào)，然后我們可以把JS運(yùn)行任務(wù)分成一些更小的任務(wù)塊(分到每一幀)
• 在每一幀時(shí)間用完前暫停JS執(zhí)行，歸還主線程，這樣的話在下一幀開(kāi)始時(shí)，主線程就可以按時(shí)執(zhí)行布局和繪制

二、只在合成器線程和柵格線程中運(yùn)行

• CSS動(dòng)畫(huà)屬性 transform 通過(guò)該屬性實(shí)現(xiàn)的動(dòng)畫(huà)不會(huì)經(jīng)過(guò)布局和繪制，而是直接運(yùn)行在合成器線程和柵格線程中，所以不會(huì)受到主線程中JS執(zhí)行的影響
• 哪些CSS屬性可以用 transform 來(lái)代替: 位置變化、寬高變化（旋轉(zhuǎn)、3D等）

總結(jié)

以上是生活随笔為你收集整理的浏览器是如何运行的的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。