火狐浏览器title过长显示不全_浏览器渲染
簡述
瀏覽器的內核是指支持瀏覽器運行的最核心的程序，分為兩個部分的，一是渲染引擎，另一個是JS引擎。渲染引擎在不同的瀏覽器中也不是都相同的。目前市面上常見的瀏覽器內核可以分為這四種：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。這里面大家最耳熟能詳的可能就是 Webkit 內核了，Webkit 內核是當下瀏覽器世界真正的霸主。本文我們就以 Webkit 為例，對現代瀏覽器的渲染過程進行一個深度的剖析。
頁面加載過程：
- 根據DNS域名解析得到對應的IP地址
- 構建HTTP請求，并且向這個IP地址發送請求
- 服務器接收請求并處理請求，返回響應數據
- 瀏覽器得到返回內容
瀏覽器渲染過程：
瀏覽器渲染過程大體分為如下三部分：
1、瀏覽器會解析三個東西：
- 一是HTML/SVG/XHTML，HTML字符串描述了一個頁面的結構，瀏覽器會把HTML結構字符串解析轉換DOM樹形結構。
- 二是CSS：遇到了css樣式會構建css規則樹 css rules tree
- 三是Javascript腳本，等到Javascript 腳本文件加載后， 通過 DOM API 和 CSSOM API 來操作 DOM Tree 和 CSS Rule Tree。
2、解析完成后，瀏覽器引擎會通過DOM Tree 和 CSS Rule Tree 來構造 Rendering Tree。
- Rendering Tree 渲染樹 不同于 DOM樹，渲染樹只會包括需要顯示的節點和這些節點的樣式信息。
- css的Rule Tree主要是為了完成匹配并把CSS Rule附加在 Rendering Tree上的每個Element（也就是每個節點）
- 然后計算每個節點的位置，這個過程又叫layout（布局）和reflow（回流）。
3、最后通過操作系統進行繪制
構建DOM
瀏覽器會遵守一套步驟將HTML 文件轉換為 DOM 樹。宏觀上，可以分為幾個步驟：
瀏覽器從磁盤或網絡讀取HTMl的原始字節，并根據文件的指定編碼（例如UTF-8）將它們轉換成字符串。
在網絡中傳輸的內容其實都是0和1這些字節數據。當瀏覽器接收到這些字節數據以后，它會將這些數據轉換為字符串，就是我們的代碼。- 將字符串轉換成Token，例如：<html>、<body>等。Token中會標識出當前Token是“開始標簽”或是“結束標簽”亦或是“文本”等信息。
事實上，這就是Token要標識“起始標簽”和“結束標簽”等標識的作用。例如“title”Token的起始標簽和結束標簽之間的節點肯定是屬于“head”的子節點。
上圖給出了節點之間的關系，例如：“Hello”Token位于“title”開始標簽與“title”結束標簽之間，表明“Hello”Token是“title”Token的子節點。同理“title”Token是“head”Token的子節點。
生成節點對象并構建DOM
事實上，構建DOM的過程中，不是等所有Token都轉換完成后再去生成節點對象，而是一邊生成Token一邊消耗Token來生成節點對象。換句話說，每個Token被生成后，會立刻消耗這個Token創建出節點對象。注意：帶有結束標簽標識的Token不會創建節點對象。
接下來我們舉個例子，假設有段HTML文本：
<html> <head><title>Web page parsing</title> </head> <body><div><h1>Web page parsing</h1><p>This is an example Web page.</p></div> </body> </html>會構建為下方圖示：
構建CSSOM
DOM會捕獲頁面的內容，但瀏覽器還需要知道頁面如何展示，所以需要構建CSSOM。
構建CSSOM的過程與構建DOM的過程非常相似，當瀏覽器接收到一段CSS，瀏覽器首先要做的是識別出Token，然后構建節點并生成CSSOM。
在這一過程中，瀏覽器會確定下每一個節點的樣式到底是什么，并且這一過程其實是很消耗資源的。因為樣式你可以自行設置給某個節點，也可以通過繼承獲得。在這一過程中，瀏覽器得遞歸 CSSOM 樹，然后確定具體的元素到底是什么樣式。
注意：CSS匹配HTML元素是一個相當復雜和有性能問題的事情。所以，DOM樹要小，CSS盡量用id和class，千萬不要過渡層疊下去。
構建渲染樹
當我們生成 DOM 樹和 CSSOM 樹以后，就需要將這兩棵樹組合為渲染樹。
在這一過程中，不是簡單的將兩者合并就行了。渲染樹只會包括需要顯示的節點和這些節點的樣式信息，如果某個節點是display: none的，那么就不會在渲染樹中顯示。
布局與繪制
當瀏覽器生成渲染樹以后，就會根據渲染樹來進行布局（也可以叫做回流）。這一階段瀏覽器要做的事情是要弄清楚各個節點在頁面中的確切位置和大小。通常這一行為也被稱為“自動重排”。
布局流程的輸出是一個“盒模型”，它會精確地捕獲每個元素在視口內的確切位置和尺寸，所有相對測量值都將轉換為屏幕上的絕對像素。
布局完成后，瀏覽器會立即發出“Paint Setup”和“Paint”事件，將渲染樹轉換成屏幕上的像素。
總結：
- 瀏覽器工作流程：構建DOM -> 構建CSSOM -> 構建渲染樹 -> 布局 -> 繪制。
- CSSOM會阻塞渲染，只有當CSSOM構建完畢后才會進入下一個階段構建渲染樹。
- 通常情況下DOM和CSSOM是并行構建的，但是當瀏覽器遇到一個script標簽時，DOM構建將暫停，直至腳本完成執行。但由于JavaScript可以修改CSSOM，所以需要等CSSOM構建完畢后再執行JS。
- 如果你想首屏渲染的越快，就越不應該在首屏就加載 JS 文件，建議將 script 標簽放在 body 標簽底部。
渲染頁面時常見哪些不良現象？
由于瀏覽器的渲染機制不同，在渲染頁面時會出現兩種常見的不良現象—-白屏問題和FOUS（無樣式內容閃爍）
FOUC：由于瀏覽器渲染機制（比如firefox），在CSS加載之前，先呈現了HTML，就會導致展示出無樣式內容，然后樣式突然呈現的現象；
白屏：有些瀏覽器渲染機制（比如chrome）要先構建DOM樹和CSSOM樹，構建完成后再進行渲染，如果CSS部分放在HTML尾部，由于CSS未加載完成，瀏覽器遲遲未渲染，從而導致白屏；也可能是把js文件放在頭部，腳本會阻塞后面內容的呈現，出現白屏問題。
參考文章
- async 和 defer 的區別 | SegmentFault
- 瀏覽器的渲染原理簡介
- 前端面試之道
- 瀏覽器的渲染：過程與原理
- 你真的了解回流和重繪嗎
- 關鍵渲染路徑
- 頁面重繪和回流以及優化
- 瀏覽器重繪(repaint)重排(reflow)與優化[瀏覽器機制]
本文轉載自：
https://zhuanlan.zhihu.com/p/53913989?zhuanlan.zhihu.com總結
以上是生活随笔為你收集整理的火狐浏览器title过长显示不全_浏览器渲染的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpringBoot创建简单的hello
- 下一篇： 谷歌浏览器外贸版_外贸 网站移动端优化