日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

火狐浏览器title过长显示不全_浏览器渲染

發(fā)布時(shí)間：2025/3/12 HTML 33 豆豆
生活随笔 收集整理的這篇文章主要介紹了 火狐浏览器title过长显示不全_浏览器渲染 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

簡(jiǎn)述

瀏覽器的內(nèi)核是指支持瀏覽器運(yùn)行的最核心的程序，分為兩個(gè)部分的，一是渲染引擎，另一個(gè)是JS引擎。渲染引擎在不同的瀏覽器中也不是都相同的。目前市面上常見的瀏覽器內(nèi)核可以分為這四種：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。這里面大家最耳熟能詳?shù)目赡芫褪?Webkit 內(nèi)核了，Webkit 內(nèi)核是當(dāng)下瀏覽器世界真正的霸主。本文我們就以 Webkit 為例，對(duì)現(xiàn)代瀏覽器的渲染過程進(jìn)行一個(gè)深度的剖析。

頁面加載過程：

  • 根據(jù)DNS域名解析得到對(duì)應(yīng)的IP地址
  • 構(gòu)建HTTP請(qǐng)求，并且向這個(gè)IP地址發(fā)送請(qǐng)求
  • 服務(wù)器接收請(qǐng)求并處理請(qǐng)求，返回響應(yīng)數(shù)據(jù)
  • 瀏覽器得到返回內(nèi)容

瀏覽器渲染過程：

瀏覽器渲染過程大體分為如下三部分：

1、瀏覽器會(huì)解析三個(gè)東西：

  • 一是HTML/SVG/XHTML，HTML字符串描述了一個(gè)頁面的結(jié)構(gòu)，瀏覽器會(huì)把HTML結(jié)構(gòu)字符串解析轉(zhuǎn)換DOM樹形結(jié)構(gòu)。
  • 二是CSS：遇到了css樣式會(huì)構(gòu)建css規(guī)則樹 css rules tree
  • 三是Javascript腳本，等到Javascript 腳本文件加載后， 通過 DOM API 和 CSSOM API 來操作 DOM Tree 和 CSS Rule Tree。

2、解析完成后，瀏覽器引擎會(huì)通過DOM Tree 和 CSS Rule Tree 來構(gòu)造 Rendering Tree。

  • Rendering Tree 渲染樹 不同于 DOM樹，渲染樹只會(huì)包括需要顯示的節(jié)點(diǎn)和這些節(jié)點(diǎn)的樣式信息。
  • css的Rule Tree主要是為了完成匹配并把CSS Rule附加在 Rendering Tree上的每個(gè)Element（也就是每個(gè)節(jié)點(diǎn)）
  • 然后計(jì)算每個(gè)節(jié)點(diǎn)的位置，這個(gè)過程又叫l(wèi)ayout（布局）和reflow（回流）。

3、最后通過操作系統(tǒng)進(jìn)行繪制

構(gòu)建DOM

瀏覽器會(huì)遵守一套步驟將HTML 文件轉(zhuǎn)換為 DOM 樹。宏觀上，可以分為幾個(gè)步驟：

瀏覽器從磁盤或網(wǎng)絡(luò)讀取HTMl的原始字節(jié)，并根據(jù)文件的指定編碼（例如UTF-8）將它們轉(zhuǎn)換成字符串。

在網(wǎng)絡(luò)中傳輸?shù)膬?nèi)容其實(shí)都是0和1這些字節(jié)數(shù)據(jù)。當(dāng)瀏覽器接收到這些字節(jié)數(shù)據(jù)以后，它會(huì)將這些數(shù)據(jù)轉(zhuǎn)換為字符串，就是我們的代碼。
  • 將字符串轉(zhuǎn)換成Token，例如：<html>、<body>等。Token中會(huì)標(biāo)識(shí)出當(dāng)前Token是“開始標(biāo)簽”或是“結(jié)束標(biāo)簽”亦或是“文本”等信息。
這時(shí)候你一定會(huì)有疑問，節(jié)點(diǎn)與節(jié)點(diǎn)之間的關(guān)系如何維護(hù)？

事實(shí)上，這就是Token要標(biāo)識(shí)“起始標(biāo)簽”和“結(jié)束標(biāo)簽”等標(biāo)識(shí)的作用。例如“title”Token的起始標(biāo)簽和結(jié)束標(biāo)簽之間的節(jié)點(diǎn)肯定是屬于“head”的子節(jié)點(diǎn)。

上圖給出了節(jié)點(diǎn)之間的關(guān)系，例如：“Hello”Token位于“title”開始標(biāo)簽與“title”結(jié)束標(biāo)簽之間，表明“Hello”Token是“title”Token的子節(jié)點(diǎn)。同理“title”Token是“head”Token的子節(jié)點(diǎn)。

生成節(jié)點(diǎn)對(duì)象并構(gòu)建DOM

事實(shí)上，構(gòu)建DOM的過程中，不是等所有Token都轉(zhuǎn)換完成后再去生成節(jié)點(diǎn)對(duì)象，而是一邊生成Token一邊消耗Token來生成節(jié)點(diǎn)對(duì)象。換句話說，每個(gè)Token被生成后，會(huì)立刻消耗這個(gè)Token創(chuàng)建出節(jié)點(diǎn)對(duì)象。注意：帶有結(jié)束標(biāo)簽標(biāo)識(shí)的Token不會(huì)創(chuàng)建節(jié)點(diǎn)對(duì)象。

接下來我們舉個(gè)例子，假設(shè)有段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>

會(huì)構(gòu)建為下方圖示：

構(gòu)建CSSOM

DOM會(huì)捕獲頁面的內(nèi)容，但瀏覽器還需要知道頁面如何展示，所以需要構(gòu)建CSSOM。

構(gòu)建CSSOM的過程與構(gòu)建DOM的過程非常相似，當(dāng)瀏覽器接收到一段CSS，瀏覽器首先要做的是識(shí)別出Token，然后構(gòu)建節(jié)點(diǎn)并生成CSSOM。

在這一過程中，瀏覽器會(huì)確定下每一個(gè)節(jié)點(diǎn)的樣式到底是什么，并且這一過程其實(shí)是很消耗資源的。因?yàn)闃邮侥憧梢宰孕性O(shè)置給某個(gè)節(jié)點(diǎn)，也可以通過繼承獲得。在這一過程中，瀏覽器得遞歸 CSSOM 樹，然后確定具體的元素到底是什么樣式。

注意：CSS匹配HTML元素是一個(gè)相當(dāng)復(fù)雜和有性能問題的事情。所以，DOM樹要小，CSS盡量用id和class，千萬不要過渡層疊下去。

構(gòu)建渲染樹

當(dāng)我們生成 DOM 樹和 CSSOM 樹以后，就需要將這兩棵樹組合為渲染樹。

在這一過程中，不是簡(jiǎn)單的將兩者合并就行了。渲染樹只會(huì)包括需要顯示的節(jié)點(diǎn)和這些節(jié)點(diǎn)的樣式信息，如果某個(gè)節(jié)點(diǎn)是display: none的，那么就不會(huì)在渲染樹中顯示。

布局與繪制

當(dāng)瀏覽器生成渲染樹以后，就會(huì)根據(jù)渲染樹來進(jìn)行布局（也可以叫做回流）。這一階段瀏覽器要做的事情是要弄清楚各個(gè)節(jié)點(diǎn)在頁面中的確切位置和大小。通常這一行為也被稱為“自動(dòng)重排”。

布局流程的輸出是一個(gè)“盒模型”，它會(huì)精確地捕獲每個(gè)元素在視口內(nèi)的確切位置和尺寸，所有相對(duì)測(cè)量值都將轉(zhuǎn)換為屏幕上的絕對(duì)像素。

布局完成后，瀏覽器會(huì)立即發(fā)出“Paint Setup”和“Paint”事件，將渲染樹轉(zhuǎn)換成屏幕上的像素。

總結(jié)：

  • 瀏覽器工作流程：構(gòu)建DOM -> 構(gòu)建CSSOM -> 構(gòu)建渲染樹 -> 布局 -> 繪制。
  • CSSOM會(huì)阻塞渲染，只有當(dāng)CSSOM構(gòu)建完畢后才會(huì)進(jìn)入下一個(gè)階段構(gòu)建渲染樹。
  • 通常情況下DOM和CSSOM是并行構(gòu)建的，但是當(dāng)瀏覽器遇到一個(gè)script標(biāo)簽時(shí)，DOM構(gòu)建將暫停，直至腳本完成執(zhí)行。但由于JavaScript可以修改CSSOM，所以需要等CSSOM構(gòu)建完畢后再執(zhí)行JS。
  • 如果你想首屏渲染的越快，就越不應(yīng)該在首屏就加載 JS 文件，建議將 script 標(biāo)簽放在 body 標(biāo)簽底部。

渲染頁面時(shí)常見哪些不良現(xiàn)象？

由于瀏覽器的渲染機(jī)制不同，在渲染頁面時(shí)會(huì)出現(xiàn)兩種常見的不良現(xiàn)象—-白屏問題和FOUS（無樣式內(nèi)容閃爍）

FOUC：由于瀏覽器渲染機(jī)制（比如firefox），在CSS加載之前，先呈現(xiàn)了HTML，就會(huì)導(dǎo)致展示出無樣式內(nèi)容，然后樣式突然呈現(xiàn)的現(xiàn)象；

白屏：有些瀏覽器渲染機(jī)制（比如chrome）要先構(gòu)建DOM樹和CSSOM樹，構(gòu)建完成后再進(jìn)行渲染，如果CSS部分放在HTML尾部，由于CSS未加載完成，瀏覽器遲遲未渲染，從而導(dǎo)致白屏；也可能是把js文件放在頭部，腳本會(huì)阻塞后面內(nèi)容的呈現(xiàn)，出現(xiàn)白屏問題。

參考文章

  • async 和 defer 的區(qū)別 | SegmentFault
  • 瀏覽器的渲染原理簡(jiǎn)介
  • 前端面試之道
  • 瀏覽器的渲染：過程與原理
  • 你真的了解回流和重繪嗎
  • 關(guān)鍵渲染路徑
  • 頁面重繪和回流以及優(yōu)化
  • 瀏覽器重繪(repaint)重排(reflow)與優(yōu)化[瀏覽器機(jī)制]

本文轉(zhuǎn)載自：

https://zhuanlan.zhihu.com/p/53913989?zhuanlan.zhihu.com

總結(jié)

以上是生活随笔為你收集整理的火狐浏览器title过长显示不全_浏览器渲染的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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