關(guān)于無樣式閃爍

一步一步...穩(wěn)穩(wěn)地...回頭你會發(fā)現(xiàn)每個??都非常清晰...

新的思考.

  1. CSS和JS在網(wǎng)頁中的放置順序
  2. 白屏和FOUC
  3. async和defer的作用和區(qū)別
  4. 網(wǎng)頁的渲染機(jī)制

CSS和JS在網(wǎng)頁中的放置順序

  • 通常情況,人們都會在<head></head>(Html頭部位置)里面以<link>來引入** Css **文件...

  • ** JavaScript **則不同,視情況而定:

通常的做法是將 JavaScript 代碼放置在 HTML 文檔的<head></head> 標(biāo)簽之間产场。因為 HTML 文檔是由瀏覽器從上到下依次載入的侣颂,所以將 JavaScript 代碼放置于<head></head>標(biāo)簽之間,可以確保在需要使用腳本之前,已經(jīng)被載入(最佳做法:只放置呈現(xiàn)頁面效果實現(xiàn)類的 javascript)奄薇。

另一種方法:將 JavaScript 代碼放置于 <body></body> 之間的菠赚。這樣做的目的脑豹,是考慮到如果我們有一段 JavaScript 代碼需要操作(動作、交互等) HTML 元素衡查。但由于 HTML 文檔是由瀏覽器從上到下依次載入的瘩欺,為避免 JavaScript 代碼操作 HTML 元素時,HTML 元素還未載入而報錯(對象不存在)拌牲,因此需要將這段代碼寫到 HTML 元素后面俱饿。

另外,運(yùn)用得最多的一種塌忽,是引用外部 script 的使用...跟引入外部 css 一個道理拍埠。

  • 引用好處:
  1. 便于管理..
  2. 避免在 JavaScript 代碼里使用
  3. 避免使用難看的 CDATA
  4. 公共的 JavaScript 代碼可以被復(fù)用于其他 HTML 文檔,也利于 JavaScript 代碼的統(tǒng)一維護(hù)
  5. HTML 文檔更小土居,利于搜索引擎收錄
  6. 可以壓縮枣购、加密單個 JavaScript 文件
  7. 瀏覽器可以緩存 JavaScript 文件,減少寬帶使用(當(dāng)多個頁面同時使用一個 JavaScript 文件的時候擦耀,通常只需下載一次)
  8. 避免使用復(fù)雜的 HTML 實體棉圈,如可以直接使用 document.write(2>1) 而無需寫作 document.write(2<1)

將 JavaScript 代碼形成為外部文件,也會增加服務(wù)器的 HTTP 請求負(fù)擔(dān)眷蜓,在超高并發(fā)請求的環(huán)境下迄损,這并不是一個好的策略。另外 在引用外部 js 文件時账磺,需注意文件的正確路徑芹敌。

  • 加載異步:
    <script defer src="script.js"></script>
    <script async src="script.js"></script>

defer和asnyc是腳本異步加載的兩種方式痊远。
defer,加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行(異步)氏捞,但 script.js 的執(zhí)行要在所有元素解析完成之后碧聪,DOMContentLoaded 事件觸發(fā)之前完成。
async液茎,加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行(異步)逞姿。


白屏和FOUC

  • 白屏和FOUC(無樣式內(nèi)容閃爍)的產(chǎn)生主要與瀏覽器的渲染機(jī)制有關(guān),有的瀏覽器是等待html和css全部加載完成后再進(jìn)行渲染(白屏問題)捆等,有的瀏覽器是先顯示已加載的html內(nèi)容滞造,等到css加載完成后重新對內(nèi)容添加樣式(FOUC問題)

  • 白屏的產(chǎn)生
    白屏的產(chǎn)生有三種情況:將css文件放在html文檔的最后、使用@import引入css(因為通過@import引入的css文件會被最后加載栋烤,因此也會導(dǎo)致白屏)或者將js文件放在頭部谒养,而未使用defer或async延遲或異步加載js文件,導(dǎo)致js阻塞html和css的加載

  • 原理分析:
    對于-webkit內(nèi)核的瀏覽器(IE也會產(chǎn)生)明郭,在進(jìn)行網(wǎng)頁渲染時买窟,會同時加載html和css分別構(gòu)建DOM樹和CSSOM,等兩者都構(gòu)建完成后薯定,再繪制渲染樹始绍,然后將頁面顯示出來。如果在html中將css文件放置在文檔最后话侄,那么將會導(dǎo)致CSSOM晚于DOM樹的建立亏推,瀏覽器需要等待CSSOM建立,然后才進(jìn)行網(wǎng)頁內(nèi)容的繪制年堆,這個等待的過程吞杭,沒有內(nèi)容顯示,就導(dǎo)致了白屏的產(chǎn)生嘀韧,因此在開發(fā)中篇亭,需要將CSS放在head標(biāo)簽內(nèi),讓其與html內(nèi)容同時被加載锄贷。

  • FOUC的產(chǎn)生
    主要是由于瀏覽器先顯示已加載的html內(nèi)容译蒂,等到css加載完成后重新對內(nèi)容添加樣式導(dǎo)致的,主要代表有Firefox


async和defer的作用和區(qū)別

<pre><script src="script.js"></script></pre>

  • 沒有 defer 或 async谊却,瀏覽器會立即加載并執(zhí)行指定的腳本柔昼,“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前,也就是說不等待后續(xù)載入的文檔元素炎辨,讀到就加載并執(zhí)行捕透。
    <script async src="script.js"></script>
  • 有 async,加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行(異步)。
    <script defer src="myscript.js"></script>
  • 有 defer乙嘀,加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行(異步)末购,但是 script.js 的執(zhí)行要在所有元素解析完成之后,DOMContentLoaded 事件觸發(fā)之前完成虎谢。

然后從實用角度來說呢盟榴,首先把所有腳本都丟到 </body> 之前是最佳實踐,因為對于舊瀏覽器來說這是唯一的優(yōu)化選擇婴噩,此法可保證非腳本的其他一切元素能夠以最快的速度得到加載和解析擎场。


網(wǎng)頁的渲染機(jī)制

  • 瀏覽器會解析這么三個東西:

  • 一個是HTML/SVG/XHTML,解析他們會產(chǎn)生DOM tree
    CSS文件几莽,構(gòu)建CSS Rule Tree(產(chǎn)生CSSOM:CSS object Model)
    JavaScript腳本迅办,主要通過DOM API 和CSSOM API來操作DOM樹和CSS Rule Tree

  • 解析完成后,會通過DOM Tree和CSS Rule Tree來構(gòu)建
    Rendering Tree章蚣,注意:

  • Rendering Tree并不等同于DOM Tree站欺,因為像header和display:none相關(guān)的東西就沒有必要放在Rendering 渲染樹中了
    CSS Rule Tree主要是為了將CSS Rule添加到Rendering Tree中的每一個element中,也就是DOM節(jié)點
    然后計算每個DOM節(jié)點的位置究驴,這個過程叫做layout
    最后將頁面繪制出來镊绪,呈現(xiàn)引擎會遍歷Rendering Tree匀伏,由用戶界面后端層將每個節(jié)點繪制出來洒忧。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市够颠,隨后出現(xiàn)的幾起案子熙侍,更是在濱河造成了極大的恐慌,老刑警劉巖履磨,帶你破解...
    沈念sama閱讀 212,542評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蛉抓,死亡現(xiàn)場離奇詭異,居然都是意外死亡剃诅,警方通過查閱死者的電腦和手機(jī)巷送,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,596評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來矛辕,“玉大人笑跛,你說我怎么就攤上這事×钠罚” “怎么了飞蹂?”我有些...
    開封第一講書人閱讀 158,021評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長翻屈。 經(jīng)常有香客問我陈哑,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,682評論 1 284
  • 正文 為了忘掉前任惊窖,我火速辦了婚禮刽宪,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘界酒。我一直安慰自己纠屋,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,792評論 6 386
  • 文/花漫 我一把揭開白布盾计。 她就那樣靜靜地躺著售担,像睡著了一般。 火紅的嫁衣襯著肌膚如雪署辉。 梳的紋絲不亂的頭發(fā)上族铆,一...
    開封第一講書人閱讀 49,985評論 1 291
  • 那天,我揣著相機(jī)與錄音哭尝,去河邊找鬼哥攘。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的挠将。 我是一名探鬼主播缓待,決...
    沈念sama閱讀 39,107評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼栅葡!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起尤泽,我...
    開封第一講書人閱讀 37,845評論 0 268
  • 序言:老撾萬榮一對情侶失蹤欣簇,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后坯约,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體熊咽,經(jīng)...
    沈念sama閱讀 44,299評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,612評論 2 327
  • 正文 我和宋清朗相戀三年闹丐,在試婚紗的時候發(fā)現(xiàn)自己被綠了横殴。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,747評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡卿拴,死狀恐怖衫仑,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情巍棱,我是刑警寧澤惑畴,帶...
    沈念sama閱讀 34,441評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站航徙,受9級特大地震影響如贷,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,072評論 3 317
  • 文/蒙蒙 一杠袱、第九天 我趴在偏房一處隱蔽的房頂上張望尚猿。 院中可真熱鬧,春花似錦楣富、人聲如沸凿掂。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,828評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽庄萎。三九已至,卻和暖如春塘安,著一層夾襖步出監(jiān)牢的瞬間糠涛,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,069評論 1 267
  • 我被黑心中介騙來泰國打工兼犯, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留忍捡,地道東北人。 一個月前我還...
    沈念sama閱讀 46,545評論 2 362
  • 正文 我出身青樓切黔,卻偏偏與公主長得像砸脊,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子纬霞,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,658評論 2 350

推薦閱讀更多精彩內(nèi)容

  • 前端開發(fā)面試知識點大綱: HTML&CSS: 對Web標(biāo)準(zhǔn)的理解凌埂、瀏覽器內(nèi)核差異、兼容性险领、hack侨舆、CSS基本功:...
    秀才JaneBook閱讀 2,341評論 0 25
  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    程序員poetry閱讀 114,317評論 24 450
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案秒紧? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評論 1 92
  • 法語共有35個音素绢陌,大致可以分為以下幾類: 元音 口腔元音(發(fā)音時舌頭的用力部位細(xì)分)前元音:[i],[e]熔恢,[ε...
    heamon7閱讀 18,399評論 3 24
  • 整個哺乳期陸陸續(xù)續(xù)的斷奶幾次 每次看到熊孩子撕心裂肺的哭鬧心就軟了下來脐湾。這次竟然這么安靜的度過了沒有母乳的第一時光...
    透心涼綠薄荷閱讀 848評論 0 0