簡(jiǎn)單介紹 JavaScript的發(fā)展歷史
- JavaScript 最初是在1994年召边，網(wǎng)景公司的Navigator瀏覽器粪滤，需要一種可以嵌入網(wǎng)頁(yè)的腳本語(yǔ)言官套，用來(lái)控制瀏覽器的行為盛正，在客戶端完成一些功能删咱。不需要很強(qiáng)大，語(yǔ)法最好簡(jiǎn)單點(diǎn)豪筝，容易學(xué)習(xí)和部署痰滋。Java能勝任，但是殺雞不需要牛刀续崖。浪費(fèi)資源敲街。
- 因此在1995年，雇傭了布蘭登·艾克袜刷，負(fù)責(zé)開(kāi)發(fā)期望的網(wǎng)頁(yè)腳本語(yǔ)言聪富。于是十天后莺丑，在1995年5月著蟹，誕生了JavaScript的第一版。
- 一開(kāi)始名字是叫做梢莽，Mocha萧豆，為了蹭熱點(diǎn)，雙方也為了合作共贏昏名，于是網(wǎng)景公司和Sun公司達(dá)成協(xié)議涮雷，改名為 JavaScript。
- 在發(fā)展了一段時(shí)間后轻局。微軟公司在1996年洪鸭，模仿JavaScript開(kāi)發(fā)了一種類似的語(yǔ)言，取名為JScript仑扑。這一行為览爵，使得網(wǎng)景公司不再獨(dú)自主導(dǎo)瀏覽器腳本語(yǔ)言。
- 1996年镇饮，網(wǎng)景公司覺(jué)得微軟這樣子發(fā)展不行蜓竹，對(duì)自己太不利，因此找到了國(guó)際標(biāo)準(zhǔn)化組織，ECMA, 希望能把自己的JavaScript指定為國(guó)際標(biāo)準(zhǔn)俱济。
- 1997年嘶是，第一版的標(biāo)準(zhǔn)文件出來(lái)，但是名字不是JavaScript蛛碌，而是叫做ECMA聂喇，一方面JavaScript是注冊(cè)商標(biāo)，另一方面左医，ECMA也要掛個(gè)自己的名字授帕，畢竟是自己團(tuán)隊(duì)建立的標(biāo)準(zhǔn)，所以叫做ECMAScript浮梢。
- 此后幾年跛十，ECMAScript逐步更新到了2015年的 5.1版本，并且成為了ISO國(guó)際標(biāo)準(zhǔn)秕硝。到了2012年底芥映，所有的主要瀏覽器都已經(jīng)支持ECMAScript5.1版的全部功能。
- 2015年远豺，ECMASCript 6 正式發(fā)布奈偏，更名為ECMAScript 2015。
- 2016年躯护， 已經(jīng)出現(xiàn)了 ECMAScript 7 這是目前最新的版本惊来。
介紹瀏覽器的渲染機(jī)制
- 解析HTML以構(gòu)建DOM樹(shù)：渲染引擎開(kāi)始解析HTML文檔，轉(zhuǎn)換樹(shù)中的html標(biāo)簽或js生成的標(biāo)簽到DOM節(jié)點(diǎn)棺滞，它被稱為 -- 內(nèi)容樹(shù)裁蚁。
- 構(gòu)建渲染樹(shù)：解析CSS（包括外部CSS文件和樣式元素以及js生成的樣式），根據(jù)CSS選擇器計(jì)算出節(jié)點(diǎn)的樣式继准，創(chuàng)建另一個(gè)樹(shù) —- 渲染樹(shù)枉证。
- 布局渲染樹(shù): 從根節(jié)點(diǎn)遞歸調(diào)用，計(jì)算每一個(gè)元素的大小移必、位置等室谚，給每個(gè)節(jié)點(diǎn)所應(yīng)該出現(xiàn)在屏幕上的精確坐標(biāo)。
- 繪制渲染樹(shù): 遍歷渲染樹(shù)崔泵，每個(gè)節(jié)點(diǎn)將使用UI后端層來(lái)繪制
瀏覽器渲染流程圖
瀏覽器的工作原理,可參考How browsers work
樣式秒赤、JS 在 HTML 中如何放置?
使用 link 標(biāo)簽將樣式表放在頂部
將JS放在底部
原因如下：
- 腳本會(huì)阻塞后面內(nèi)容的呈現(xiàn)
- 腳本會(huì)阻塞其后組件的下載
解釋白屏和 FOUC
- 白屏就是，瀏覽器窗口中憎瘸，無(wú)任何內(nèi)容入篮，呈現(xiàn)白色空白。
- FOUC含思，全稱是 Flash of Unstyled Content崎弃，叫做無(wú)樣式內(nèi)容閃爍甘晤。
以上兩種現(xiàn)象，存在于不同瀏覽器的不同加載機(jī)制上饲做。
- 白屏线婚，如chrome瀏覽器，當(dāng)腳本阻塞盆均，或者認(rèn)為設(shè)定不同加載延遲時(shí)間塞弊。會(huì)呈現(xiàn)白屏狀態(tài)，以等待相應(yīng)內(nèi)容的加載泪姨。
- 而FOUC游沿， 比如Firefox瀏覽器，如果css樣式被延遲加載或者阻塞肮砾，不會(huì)影響到前面的html dom 的展現(xiàn)诀黍，但是會(huì)出現(xiàn)無(wú)樣式狀態(tài)。
介紹下 repaint和 reflow的概念
首先仗处，要明白的是眯勾，repaint，和reflow婆誓，都是瀏覽器內(nèi)部的處理機(jī)制吃环。你無(wú)法該表瀏覽器的處理行為, 但是你可以改變自己的代碼，從而在瀏覽器的機(jī)制下洋幻，寫(xiě)出更好的代碼郁轻。
- reflow：DOM中每個(gè)元素都有自己的盒模型，這些都需要瀏覽器根據(jù)已經(jīng)默認(rèn)和認(rèn)為定義的樣式文留，來(lái)計(jì)算每個(gè)元素應(yīng)該安放的位置好唯，這個(gè)過(guò)程就是reflow。
- 當(dāng)盒子位置厂庇，大小渠啊，和其他屬性输吏，比如顏色权旷、字體大小等確定后，瀏覽器把這些元素全按照各有的特性繪制一遍贯溅，于是出現(xiàn)了頁(yè)面拄氯，這個(gè)過(guò)程稱之為repaint。
二者的關(guān)系上它浅，是reflow必然伴隨著repaint译柏，而repaint未必有reflow的參與。
- 比如滾動(dòng)屏幕姐霍，這是reflow 和repaint同時(shí)在作用鄙麦，因?yàn)轫?yè)面上位置改變了典唇。需要重新布局渲染樹(shù)，然后重新繪制胯府。
- 但是如果只修改了顏色介衔，這種不影響布局的屬性，那么就不會(huì)用reflow的參與骂因，是需要repaint重新繪制即可炎咖。
如何異步加載腳本
-
<script src="script.js"></script>
沒(méi)有 defer 或 async，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本寒波，“在渲染該 script 標(biāo)簽之下的文檔元素之前乘盼，不會(huì)等待后續(xù)要載入的文檔元素，此刻讀到script標(biāo)簽就會(huì)加載并執(zhí)行俄烁。 -
<script async src="script.js"></script>
有 async绸栅，加載和渲染后續(xù)文檔元素的過(guò)程將和 script.js 的加載與執(zhí)行并行進(jìn)行（同時(shí)進(jìn)行，并行页屠，也就是異步阴幌，雙管齊下）。 -
<script defer src="script.js"></script>
有 defer卷中，加載后續(xù)文檔元素的過(guò)程將和 script.js 的加載并行進(jìn)行（異步）矛双，但 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成蟆豫。
defer & async
注意到async和defer的異同點(diǎn)了嗎议忽？
- 它們都會(huì)在加載腳本的過(guò)程中，允許后續(xù)文檔元素的加載和渲染十减。
- 但是 async栈幸，是加載到腳本的時(shí)候屏箍，就會(huì)立即執(zhí)行沪摄，盡管此時(shí)粹断，后續(xù)文檔正在異步加載哗伯。
- 而defer疹鳄，則保證了腳本執(zhí)行的順序赛蔫，腳本加載和后續(xù)文檔元素的加載渲染是同時(shí)的逝嚎。但是想要執(zhí)行僻弹，則必須等后續(xù)所有文檔元素全部解析完成之后蔓榄。
