說(shuō)明：
之前通過(guò)學(xué)習(xí)html+css用寫博客的方式記錄知識(shí)點(diǎn)，因?yàn)榉椒嚼蠋煟ǚ綉?yīng)杭老師）的緣故有幸獲得一些人的關(guān)注眶熬，其實(shí)我是惶恐妹笆，在前端學(xué)習(xí)的路上块请，熱愛的同時(shí)也走過(guò)很多彎路，這樣的方式能夠幫上正在學(xué)習(xí)前端的你固然好拳缠，不過(guò)梳理記錄時(shí)難免會(huì)有知識(shí)點(diǎn)遺落或?qū)戝e(cuò)墩新，切勿當(dāng)成權(quán)威學(xué)習(xí)范本。
前言：
開始學(xué)javascript了窟坐，其實(shí)覺得CSS還有很多沒學(xué)透海渊，也沒學(xué)完，:-( o(TωT)o ╭(╯^╰)╮哭唧唧啊~所以CSS學(xué)好并不簡(jiǎn)單吶哲鸳，需要大量地試錯(cuò)練習(xí)俺家伞！ａ悴ぁ讯沈！過(guò)后，我還是會(huì)繼續(xù)配合大量實(shí)際項(xiàng)目去更新CSS知識(shí)婿奔。學(xué)習(xí)js缺狠，我是聽著老師的課，再結(jié)合阮一峰js教程一起看萍摊，同樣是適合前端新手使用的js手冊(cè)儒老，通俗易懂。
一记餐、網(wǎng)頁(yè)的構(gòu)成
- 網(wǎng)頁(yè) = Html+CSS+JavaScript
- Html: 網(wǎng)頁(yè)元素內(nèi)容
- CSS: 控制網(wǎng)頁(yè)樣式
- JavaScript：操作網(wǎng)頁(yè)內(nèi)容驮樊，實(shí)現(xiàn)功能或者效果
- 瀏覽器端（web應(yīng)用）、服務(wù)端（nodejs）片酝。囚衔。。
二雕沿、JavaScirpt 發(fā)展歷史
參考：阮一峰js標(biāo)準(zhǔn)教程
- 1995年5月练湿，Brendan Eich只用了10天，就設(shè)計(jì)完成了這種語(yǔ)言的第一版审轮。
- 1996年8月肥哎，微軟模仿JavaScript開發(fā)了一種相近的語(yǔ)言单旁，取名為JScript（JavaScript是Netscape網(wǎng)景公司的注冊(cè)商標(biāo)涤垫，微軟不能用），首先內(nèi)置于IE 3.0席镀。
- 1996年11月榴捡，Netscape公司決定將JavaScript提交給國(guó)際標(biāo)準(zhǔn)化組織ECMA（European Computer Manufacturers Association）杈女，希望JavaScript能夠成為國(guó)際標(biāo)準(zhǔn)，以此抵抗微軟。
- 1997年7月达椰，ECMA組織發(fā)布262號(hào)標(biāo)準(zhǔn)文件（ECMA-262）的第一版翰蠢，規(guī)定了瀏覽器腳本語(yǔ)言的標(biāo)準(zhǔn)，并將這種語(yǔ)言稱為ECMAScript啰劲。這個(gè)版本就是ECMAScript 1.0版梁沧。
基本上，JavaScript這個(gè)名字的原意是“很像Java的腳本語(yǔ)言”蝇裤。在JavaScript語(yǔ)言中廷支，函數(shù)是一種獨(dú)立的數(shù)據(jù)類型，以及采用基于原型對(duì)象（prototype）的繼承鏈猖辫。這是它與Java語(yǔ)法最大的兩點(diǎn)區(qū)別酥泞。JavaScript語(yǔ)法要比Java自由得多砚殿。 - 1999年12月啃憎，ECMAScript 3.0版發(fā)布，成為JavaScript的通行標(biāo)準(zhǔn)似炎，得到了廣泛支持辛萍。
- 2008年7月，由于對(duì)于下一個(gè)版本應(yīng)該包括哪些功能羡藐，各方分歧太大贩毕，爭(zhēng)論過(guò)于激進(jìn)，ECMA開會(huì)決定仆嗦，中止ECMAScript 4.0的開發(fā)（即廢除了這個(gè)版本）辉阶，將其中涉及現(xiàn)有功能改善的一小部分，發(fā)布為ECMAScript 3.1瘩扼，會(huì)后不久谆甜，ECMAScript 3.1就改名為ECMAScript 5。
- 2009年12月集绰，ECMAScript 5.0版正式發(fā)布规辱。
Harmony項(xiàng)目則一分為二，一些較為可行的設(shè)想定名為JavaScript.next繼續(xù)開發(fā)栽燕，后來(lái)演變成ECMAScript 6罕袋； - 2006年，jQuery函數(shù)庫(kù)誕生碍岔，作者為John Resig浴讯。jQuery為操作網(wǎng)頁(yè)DOM結(jié)構(gòu)提供了非常強(qiáng)大易用的接口，成為了使用最廣泛的函數(shù)庫(kù)蔼啦，并且讓JavaScript語(yǔ)言的應(yīng)用難度大大降低兰珍，推動(dòng)了這種語(yǔ)言的流行。
- 2009年，Node.js項(xiàng)目誕生掠河，創(chuàng)始人為Ryan Dahl亮元，它標(biāo)志著JavaScript可以用于服務(wù)器端編程，從此網(wǎng)站的前端和后端可以使用同一種語(yǔ)言開發(fā)唠摹。并且爆捞，Node.js可以承受很大的并發(fā)流量，使得開發(fā)某些互聯(lián)網(wǎng)大規(guī)模的實(shí)時(shí)應(yīng)用變得容易勾拉。
- 2012年煮甥，微軟發(fā)布TypeScript語(yǔ)言。該語(yǔ)言被設(shè)計(jì)成JavaScript的超集藕赞，這意味著所有JavaScipt程序成肘，都可以不經(jīng)修改地在TypeScript中運(yùn)行。同時(shí)斧蜕，TypeScript添加了很多新的語(yǔ)法特性双霍，主要目的是為了開發(fā)大型程序，然后還可以被編譯成JavaScript運(yùn)行批销。
- 2013年5月洒闸，F(xiàn)acebook發(fā)布UI框架庫(kù)React，引入了新的JSX語(yǔ)法均芽，使得UI層可以用組件開發(fā)丘逸。
- 2015年4月，Angular框架宣布掀宋，2.0版將基于微軟公司的TypeScript語(yǔ)言開發(fā)深纲，這等于為JavaScript語(yǔ)言引入了強(qiáng)類型。
三劲妙、JS引入使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標(biāo)題</title>
/*這里引入css代碼*/
<link href="index.css" rel="stylesheet">
<style>
body{
background: red;
}
</style>
</head>
<body>
<p>
</p>
/*一般來(lái)說(shuō)湃鹊，這里引入js代碼*/
<script src="index.js">/*空*/</script>
或
<script>
alert(1);
</script>
</body>
</html>
*四、瀏覽器渲染機(jī)制
你所看到的瀏覽器網(wǎng)頁(yè)是趴，瀏覽器是經(jīng)歷了什么你才能看到涛舍？
- 解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹
? - 解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM 樹
? - 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
? - 在渲染樹的基礎(chǔ)上進(jìn)行布局, 計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)
? - 把每個(gè)節(jié)點(diǎn)繪制到屏幕上 (painting)
當(dāng)發(fā)一個(gè)請(qǐng)求到服務(wù)器之后，服務(wù)器會(huì)把頁(yè)面上的html發(fā)給瀏覽器唆途，瀏覽器收到之后則會(huì)解析該html標(biāo)簽富雅，解析的過(guò)程中遇到了類似需要加載的樣式，如link肛搬，則會(huì)再次發(fā)送請(qǐng)求到服務(wù)器没佑。這樣一來(lái)，如此循環(huán)温赔，標(biāo)簽屬性的請(qǐng)求不斷被發(fā)出到服務(wù)器蛤奢，資源不斷被獲取
資源獲取之后，如何被用戶看見？
首先啤贩，先對(duì)html標(biāo)簽進(jìn)行解析待秃。解析成一個(gè)dom樹（即類似于樹狀結(jié)構(gòu)，dom痹屹，即文檔章郁、模型）同時(shí)，也對(duì)css樣式進(jìn)行解析志衍，同時(shí)也解析成cssom樹暖庄，將css樣式（默認(rèn)+添加）匯聚一起形成css樹——dom樹元素和css樹元素結(jié)合起來(lái)獲得一個(gè)對(duì)象，該對(duì)象所擁有的元素和具體位置都有其相互關(guān)系楼肪，對(duì)應(yīng)節(jié)點(diǎn)和對(duì)應(yīng)數(shù)據(jù)形成一個(gè)渲染樹——執(zhí)行l(wèi)ayout（布局）計(jì)算它的位置和樣式——繪制——排列形成頁(yè)面
五培廓、瀏覽器引起的Repaint 和 Reflow問題
1、Repaint問題：
重新繪制春叫。將css樣式改變的話肩钠，其他元素并未改變，只需要重新繪制某一處就行象缀。
2蔬将、Reflow問題：
重新回流爷速，重新計(jì)算央星。即自身位置發(fā)生變化，給其他元素帶來(lái)了影響惫东，要重新進(jìn)行計(jì)算莉给。
從一個(gè)外網(wǎng)中截取出來(lái)的關(guān)于Repaint 和 Reflow分辨片段：
Anything that changes input information used to construct the rendering tree can cause a repaint or a reflow, for example:
Adding, removing, updating DOM nodes
Hiding a DOM node with display: none (reflow and repaint) or visibility: hidden(repaint only, because no geometry changes)
Moving, animating a DOM node on the page
Adding a stylesheet, tweaking style properties
User action such as resizing the window, changing the font size, or (oh, OMG, no!) scrollin
Let's see a few examples:
var bstyle = document.body.style; // cache
bstyle.padding = "20px"; // reflow, repaint
bstyle.border = "10px solid red"; // another reflow and a repaint
bstyle.color = "blue"; // repaint only, no dimensions changed
bstyle.backgroundColor = "#fad"; // repaint
bstyle.fontSize = "2em"; // reflow, repaint
/* new DOM element - reflow, repaint */
document.body.appendChild(document.createTextNode('dude!'));
六、白屏和FOUC
1廉沮、即指影響瀏覽器頁(yè)面加載順序的兩種場(chǎng)景
- 白屏：特指一種場(chǎng)景颓遏，打開頁(yè)面是一片白色，突然頁(yè)面出現(xiàn)滞时，樣式正確叁幢。那么一片白色的時(shí)間，則稱之為白屏坪稽。
- FOUC (Flash of UnstyledContent)：無(wú)樣式內(nèi)容閃爍曼玩，網(wǎng)速情況差，打開頁(yè)面時(shí)仍有樣式窒百，之后樣式時(shí)有時(shí)無(wú)黍判，甚至一開始并無(wú)出現(xiàn)樣式，突然樣式恢復(fù)篙梢。（常出現(xiàn)在firefox瀏覽器）
此類現(xiàn)象顷帖，在不同瀏覽器進(jìn)行的資源加載和頁(yè)面渲染時(shí)，所采用的不同的處理方式，并不是bug贬墩。
2榴嗅、寫一個(gè)server，驗(yàn)證白屏和fouc效果
在index.html中
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fouc & 白屏</title>
<!--在下面模擬一個(gè)延時(shí)裝置-->
<link rel="stylesheet" href="b.css?t=10"> //設(shè)置這個(gè)工具陶舞，當(dāng)請(qǐng)求該文件時(shí)录肯，服務(wù)器會(huì)延遲請(qǐng)求10s再去加載這個(gè)資源，以此可以模擬一個(gè)網(wǎng)速特別慢的情況
<link rel="stylesheet" href="a.css?t=3">
</head>
<body>
<p>hello</p>
<p>饑人谷</p>
<!-- <script src="A.js?t=5"></script>
-->
<img src="https://user-gold-cdn.xitu.io/2018/8/15/1653c442f35af77c?w=211&h=200&f=png&s=8004" alt="">
<!-- <link rel="stylesheet" href="c.css?t=6"> -->
<!-- <script src="http://a.jrg.com:8080/B.js?t=4" ></script>
<script src="http://b.jrg.com:8080/A.js?t=8" ></script> -->
</body>
</html>
（1）關(guān)于白屏吊说，
需要注意的是论咏，瀏覽器對(duì)于樣式和js的處理，即CSS和JS放置順序颁井。推薦：將樣式放在 <head>里面,將JS放在<body>內(nèi)部下方厅贪。
如上面代碼所示，html頁(yè)面里引入了兩個(gè)css：a.css和b.css雅宾。b.css引用了c.ss（@import"./c.css?t=5";）b.css中加入了一個(gè)10s的延時(shí)文件（<link rel="stylesheet" href="b.css?t=10">）养涮，加載這個(gè)10s的css樣式文件，瀏覽器是如何完成加載工作眉抬，有兩種方式：
第1種： html解析完成贯吓，此時(shí)10s延時(shí)的css文件先不管，先展示<body>里所展示的內(nèi)容蜀变，等css文件全加載后再去計(jì)算樣式悄谐，再去重新渲染一次
第2種： 即使html的dom樹已經(jīng)解析、渲染都完成库北，對(duì)未加載完成的樣式都必須等待爬舰，即css樣式要全部加載、獲取寒瓦，img資源加載完成情屹，此時(shí)底部JS立刻執(zhí)行，才一次性展示出頁(yè)面杂腰。例子中展示這種方法垃你，即為白屏很久的原因。
（2）不同瀏覽器的不同處理機(jī)制所出現(xiàn)的場(chǎng)景不同
A喂很、白屏場(chǎng)景（常出現(xiàn)在chrome）：
打開一個(gè)國(guó)外網(wǎng)站惜颇，使用國(guó)外服務(wù)器，嵌在css的字體使用的是谷歌字體恤筛，運(yùn)行特別慢官还，等了好久突然出現(xiàn)頁(yè)面樣式效果。這是因?yàn)轫?yè)面需要等待css樣式加載所有完成毒坛，甚至出現(xiàn)404加載失敗望伦，最后才展示出頁(yè)面林说。那么那段加載時(shí)間，等待了幾秒左右的白色一片的頁(yè)面屯伞，就是白屏
B腿箩、Fouc場(chǎng)景（常出現(xiàn)在Firefox）：
一開始的時(shí)候，先讓你看見樣式劣摇，如字的小號(hào)樣式珠移，樣式加載完后看到所規(guī)定字號(hào)的大字。對(duì)用戶來(lái)說(shuō)末融，同樣的樣式钧惧，突然從小變大，則這個(gè)場(chǎng)景就是Fouc（無(wú)樣式內(nèi)容閃爍）勾习。
總結(jié)：不管是css樣式浓瞪，還是js文件，只要加長(zhǎng)延時(shí)巧婶，都會(huì)造成白屏
（3）CSS 和 JS 最佳放置順序
- 使用 link 標(biāo)簽將樣式表放在頂部
- 將JS放在底部
（3.1）場(chǎng)景：假設(shè)JS文件頁(yè)面頂部：
- JS腳本會(huì)阻塞后面內(nèi)容的呈現(xiàn)
- JS腳本會(huì)阻塞其后組件（如圖片）的下載
- JS加載時(shí)間過(guò)長(zhǎng)乾颁，css需等待，則會(huì)出現(xiàn)一段時(shí)間白屏
- 場(chǎng)景說(shuō)明：引入一個(gè)JS文件在頂部艺栈，設(shè)置一個(gè)延時(shí)時(shí)間英岭。
- 加載順序：css—js—img—全部獲取到展現(xiàn)頁(yè)面效果
此時(shí)，img和css加載時(shí)會(huì)并發(fā)加載湿右，即如一個(gè)域名下同時(shí)加載兩個(gè)文件（并發(fā)是有限度的）诅妹，加載在頂部的js時(shí)，會(huì)禁用并發(fā)img和css诅需，并阻止其他內(nèi)容下載和渲染漾唉。
js并不影響css加載荧库，但是會(huì)影響css樣式的一個(gè)計(jì)算堰塌。當(dāng)js加載時(shí)，css已經(jīng)獲取到（不過(guò)此時(shí)頁(yè)面還是一片空白）分衫，直到j(luò)s獲取立即執(zhí)行后场刑，圖片立刻出現(xiàn)，頁(yè)面才展示效果蚪战。所以js文件放入頁(yè)面頂部<head>里牵现，也會(huì)導(dǎo)致白屏現(xiàn)象出現(xiàn)
（3.2）JS加載特點(diǎn)總結(jié)
A、優(yōu)先加載js文件邀桑，加載后js立刻去執(zhí)行瞎疼，展示頁(yè)面（CSS樣式則是全部加載完，然后一次性展示出頁(yè)面）
注：
- css放前面壁畸，優(yōu)先加載贼急；
- 若放后面茅茂，其他資源則會(huì)阻礙css加載，那么時(shí)機(jī)就太晚太抓。
B空闲、由于渲染線程和js腳本線程是互斥的，白屏是渲染進(jìn)程被阻塞的原因走敌，當(dāng)碰到script標(biāo)簽的時(shí)候碴倾，會(huì)先執(zhí)行js腳本，然后再渲染掉丽。
（放頂部時(shí)）JS加載時(shí)機(jī)過(guò)晚導(dǎo)致一系列問題跌榔，腳本會(huì)阻塞后面內(nèi)容的呈現(xiàn)、腳本會(huì)阻塞其后組件的下載（主要指img資源下載）捶障、白屏等矫户。
而（放底部）則可以先讓其他先加載完成，JS立刻執(zhí)行的特點(diǎn)可以“掃尾”最后的頁(yè)面效果
C残邀、JS腳本操作頁(yè)面上的html+css元素皆辽，（放頂部時(shí)）JS先執(zhí)行，元素都未加載到（即不存在）芥挣，未出現(xiàn)在文檔流中【加載驱闷，這里指資源加載和資源是否出現(xiàn)在文檔流中】，所以也不能操作相應(yīng)JS功能空免，此時(shí)后臺(tái)將會(huì)報(bào)錯(cuò)空另。
D、（放頂部時(shí)）其他JS若作為一種框架語(yǔ)言蹋砚，則能提前形成一個(gè)初步的框架有效構(gòu)成頁(yè)面結(jié)構(gòu)扼菠。
七、JS腳本的異步加載
1坝咐、一個(gè)問題循榆？
即一個(gè)放在<head>的js文件，如下：
<script src="script.js">
</script>
原本放在頂部的這個(gè)js文件墨坚，會(huì)提前加載秧饮，如何使它在頂部仍然稍后加載呢？
2泽篮、解決方法：async和defer
（1）作用：
沒有 defer 或async盗尸，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該script標(biāo)簽之下的文檔元素之前帽撑，也就是說(shuō)不等待后續(xù)載入的文檔元素泼各，讀到就加載并執(zhí)行。也就是說(shuō)亏拉，使用defer 或async后能夠改變這種加載扣蜻、執(zhí)行的時(shí)機(jī)寸癌。常應(yīng)用在引用了廣告和統(tǒng)計(jì)的頁(yè)面中，不會(huì)影響弱贼、堵塞蒸苇，更不會(huì)影響到到頁(yè)面其他元素
（2）async
HTML5里為script標(biāo)簽里新增了async屬性，用于異步加載腳本：不保證順序（獨(dú)立的個(gè)體）
<script async src="script.js"></script>
或
<script type="text/javascript" src="alert.js" async="async"></script>
瀏覽器解析到HTML里的該行script標(biāo)簽吮旅，發(fā)現(xiàn)指定為async溪烤，會(huì)異步下載解析執(zhí)行腳本（即加載后續(xù)文檔元素的過(guò)程將和script.js的加載并行進(jìn)行）。
頁(yè)面的DOM結(jié)構(gòu)里假設(shè)<script>在img之前庇勃，如果你的瀏覽器支持async的話檬嘀，就會(huì)異步加載腳本。此時(shí)DOM里已經(jīng)有img了责嚷，所以腳本里能順利取到img的src并彈框鸳兽。
（3）defer
script標(biāo)簽里可以設(shè)置defer，表示延遲加載腳本：
腳本先不執(zhí)行罕拂，延遲到文檔解析和顯示后執(zhí)行揍异，有順序
<script defer src="script.js">
</script>
或
<script type="text/javascript" src="alert.js" defer="defer">
</script>
瀏覽器解析到HTML里該行script標(biāo)簽，發(fā)現(xiàn)指定為defer爆班，會(huì)暫緩下載解析執(zhí)行腳本衷掷，等到頁(yè)面文檔解析并加載執(zhí)行完畢后，才會(huì)加載該腳本（更精確地說(shuō)柿菩，是在DOM樹構(gòu)建完成后戚嗅，在DOMContentLoaded 事件觸發(fā)前，加載defer的腳本）枢舶。
頁(yè)面的DOM結(jié)構(gòu)里假設(shè)script在img圖片之前懦胞，如果你的瀏覽器支持defer的話，就會(huì)延遲到頁(yè)面加載完后才下載腳本凉泄。此時(shí)DOM里已經(jīng)有img元素了躏尉，所以腳本里能順利取到img的src并彈框。
總結(jié)： JS實(shí)質(zhì)采用一種可以更自由地選擇加載時(shí)機(jī)和任何位置旧困，讓處于頂部的js文件能夠像在底部時(shí)醇份，在頁(yè)面必要元素加載完成時(shí)進(jìn)行“異步”加載。
