一晶框、什么是JavaScript
JavaScript 是一種具有面向?qū)ο竽芰Φ呐盘А⒔忉屝偷某绦蛟O(shè)計語言。更具體一點授段，它是基于對象和事件驅(qū)動并具有相對安全性的客戶端腳本語言 蹲蒲。因為他不需要在一個語言環(huán)境下運行，而只需要支持它的瀏覽器即可侵贵。它的主要目的是届搁，驗證發(fā)往服務(wù)器端的數(shù)據(jù)、增加 Web 互動窍育、加強用戶體驗度等卡睦。
二、JavaScript的特點
松散性
JavaScript 語言核心與 C漱抓、C++表锻、Java 相似，比如條件判斷辽旋、循環(huán)浩嫌、運算符等檐迟。但补胚，它 卻是一種松散類型的語言，也就是說追迟，它的變量不必具有一個明確的類型溶其。
對象屬性
JavaScript 中的對象把屬性名映射為任意的屬性值。它的這種方式很像哈希表或關(guān)聯(lián)數(shù) 組敦间，而不像 C 中的結(jié)構(gòu)體或者 C++瓶逃、Java 中的對象。
繼承機制
JavaScript 中的面向?qū)ο罄^承機制是基于原型的廓块，這和另外一種不太為人所知的 Self 語 言很像厢绝，而和 C++以及 Java 中的繼承大不相同。
三带猴、JavaScript 歷史
1994年10月昔汉，NCSA的一個主要程序員Marc Andreessen聯(lián)合風(fēng)險投資家Jim Clark，成立了Mosaic通信公司（Mosaic Communications）拴清，不久后改名為Netscape靶病。這家公司的方向会通，就是在Mosaic的基礎(chǔ)上，開發(fā)面向普通用戶的新一代的瀏覽器Netscape Navigator娄周。
1994年12月涕侈，Navigator發(fā)布了1.0版，市場份額一舉超過90%煤辨。
Netscape公司很快發(fā)現(xiàn)裳涛，Navigator瀏覽器需要一種可以嵌入網(wǎng)頁的腳本語言，用來控制瀏覽器行為掷酗。當(dāng)時调违，網(wǎng)速很慢而且上網(wǎng)費很貴，有些操作不宜在服務(wù)器端完成泻轰。比如技肩，如果用戶忘記填寫“用戶名”，就點了“發(fā)送”按鈕浮声，到服務(wù)器再發(fā)現(xiàn)這一點就有點太晚了虚婿，最好能在用戶發(fā)出數(shù)據(jù)之前，就告訴用戶“請?zhí)顚懹脩裘庇净印＿@就需要在網(wǎng)頁中嵌入小程序然痊，讓瀏覽器檢查每一欄是否都填寫了。
管理層對這種瀏覽器腳本語言的設(shè)想是：功能不需要太強屉符，語法較為簡單剧浸，容易學(xué)習(xí)和部署。那一年矗钟，正逢Sun公司的Java語言問世唆香，市場推廣活動非常成功。Netscape公司決定與Sun公司合作吨艇，瀏覽器支持嵌入Java小程序（后來稱為Java applet）躬它。但是，瀏覽器腳本語言是否就選用Java东涡，則存在爭論冯吓。后來，還是決定不使用Java疮跑，因為網(wǎng)頁小程序不需要Java這么“重”的語法组贺。但是，同時也決定腳本語言的語法要接近Java祖娘，并且可以支持Java程序失尖。這些設(shè)想直接排除了使用現(xiàn)存語言，比如Perl、Python和TCL雹仿。1995年增热，Netscape公司雇傭了程序員Brendan Eich開發(fā)這種網(wǎng)頁腳本語言。Brendan Eich有很強的函數(shù)式編程背景胧辽，希望以Scheme語言（函數(shù)式語言鼻祖LISP語言的一種方言）為藍(lán)本峻仇，實現(xiàn)這種新語言。
1995年5月邑商，Brendan Eich只用了10天摄咆，就設(shè)計完成了這種語言的第一版。它是一個大雜燴人断，語法有多個來源：
基本語法：借鑒C語言和Java語言吭从。
數(shù)據(jù)結(jié)構(gòu)：借鑒Java語言，包括將值分成原始值和對象兩大類恶迈。
函數(shù)的用法：借鑒Scheme語言和Awk語言涩金，將函數(shù)當(dāng)作第一等公民，并引入閉包暇仲。
原型繼承模型：借鑒Self語言（Smalltalk的一種變種）步做。
正則表達(dá)式：借鑒Perl語言。
字符串和數(shù)組處理：借鑒Python語言奈附。
為了保持簡單全度，這種腳本語言缺少一些關(guān)鍵的功能，比如塊級作用域斥滤、模塊将鸵、子類型（subtyping）等等，但是可以利用現(xiàn)有功能找出解決辦法佑颇。這種功能的不足顶掉，直接導(dǎo)致了后來JavaScript的一個顯著特點：對于其他語言，你需要學(xué)習(xí)語言的各種功能漩符，而對于JavaScript一喘，你常常需要學(xué)習(xí)各種解決問題的模式驱还。而且由于來源多樣嗜暴，從一開始就注定，JavaScript的編程風(fēng)格是函數(shù)式編程和面向?qū)ο缶幊痰囊环N混合體议蟆。
Netscape公司的這種瀏覽器腳本語言闷沥，最初名字叫做Mocha，1995年9月改為LiveScript咐容。12月舆逃，Netscape公司與Sun公司（Java語言的發(fā)明者和所有者）達(dá)成協(xié)議，后者允許將這種語言叫做JavaScript。這樣一來路狮，Netscape公司可以借助Java語言的聲勢虫啥，而Sun公司則將自己的影響力擴展到了瀏覽器。
之所以起這個名字奄妨，并不是因為JavaScript本身與Java語言有多么深的關(guān)系（事實上涂籽，兩者關(guān)系并不深），而是因為Netscape公司已經(jīng)決定砸抛，使用Java語言開發(fā)網(wǎng)絡(luò)應(yīng)用程序评雌，JavaScript可以像膠水一樣，將各個部分連接起來直焙。當(dāng)然景东，后來的歷史是Java語言的瀏覽器插件失敗了，JavaScript反而發(fā)揚光大奔誓。
1995年12月4日斤吐，Netscape公司與Sun公司聯(lián)合發(fā)布了JavaScript語言。
1996年3月厨喂，Navigator 2.0瀏覽器正式內(nèi)置了JavaScript腳本語言曲初。
四、ECMAScript的誕生
- 1996年11月杯聚，JavaScript的創(chuàng)造者Netscape公司臼婆，決定將JavaScript提交給國際標(biāo)準(zhǔn)化組織ECMA，希望這種語言能夠成為國際標(biāo)準(zhǔn)幌绍。ECMA是European Computer Manufacturers Association的縮寫颁褂，即歐洲計算機制造商協(xié)會，ECMA是制定信息傳輸與通訊的國際化標(biāo)準(zhǔn)組織傀广。 ECMA的第39號技術(shù)專家委員會（Technical Committee 39颁独，簡稱TC39）負(fù)責(zé)制訂ECMAScript標(biāo)準(zhǔn)，成員包括Netscape伪冰、Sun誓酒、Microsoft、Mozilla贮聂、Google等大公司靠柑。
- 1997年，ECMA發(fā)布262號標(biāo)準(zhǔn)文件（ECMA-262）的第一版吓懈，規(guī)定了瀏覽器腳本語言的標(biāo)準(zhǔn)歼冰，并將這種語言稱為ECMAScript，這個版本就是1.0版耻警。 該標(biāo)準(zhǔn)從一開始就是針對JavaScript語言制定的隔嫡，但是之所以不叫JavaScript甸怕，有兩個原因。一是商標(biāo)腮恩，Java是Sun公司的商標(biāo)梢杭，根據(jù)授權(quán)協(xié)議，只有Netscape公司可以合法地使用JavaScript這個名字秸滴，且JavaScript本身也已經(jīng)被Netscape公司注冊為商標(biāo)式曲。二是想體現(xiàn)這門語言的制定者是ECMA，不是Netscape缸榛，這樣有利于保證這門語言的開放性和中立性吝羞。
因此，ECMAScript和JavaScript的關(guān)系是内颗，前者是后者的規(guī)格钧排，后者是前者的一種實現(xiàn)。Jscript和ActionScript也算是ECMAScript的一種實現(xiàn)均澳。
五恨溜、ECMAScript的發(fā)展
1997年，ECMAScript 1.0發(fā)布找前。
1998年糟袁，ECMAScript 2.0發(fā)布
1999年，ECMAScript 3.0發(fā)布躺盛。3.0版是一個巨大的成功项戴，在業(yè)界得到廣泛支持，成為通行標(biāo)準(zhǔn)槽惫，奠定了JavaScript語言的基本語法周叮，以后的版本完全繼承。直到今天界斜，初學(xué)者一開始學(xué)習(xí)JavaScript仿耽，其實就是在學(xué)3.0版的語法。
2000年各薇，ECMAScript 4.0開始醞釀项贺。這個版本最后沒有通過。為什么ES4沒有通過呢峭判？因為這個版本太激進(jìn)了开缎，對ES3做了徹底升級，導(dǎo)致標(biāo)準(zhǔn)委員會的一些成員不愿意接受朝抖。
2007年啥箭，ECMAScript 4.0版草案發(fā)布谍珊，本來預(yù)計次年8月發(fā)布正式版本治宣。但是急侥，各方對于是否通過這個標(biāo)準(zhǔn)，發(fā)生了嚴(yán)重分歧侮邀。以Yahoo坏怪、Microsoft、Google為首的大公司绊茧，反對JavaScript的大幅升級铝宵，主張小幅改動；以JavaScript創(chuàng)造者Brendan Eich為首的Mozilla公司华畏，則堅持當(dāng)前的草案鹏秋。
2008年，由于對于4.0版本應(yīng)該包括哪些功能亡笑，各方分歧太大侣夷，爭論過于激烈，ECMA開會決定仑乌，中止ECMAScript 4.0的開發(fā)百拓，將其中涉及現(xiàn)有功能改善的一小部分，發(fā)布為ECMAScript 3.1（會后不久晰甚，ECMAScript 3.1就改名為ECMAScript 5）衙传，而將其他激進(jìn)的設(shè)想擴大范圍，放入以后的版本厕九。由于會議的氣氛蓖捶，4.0版本的項目代號起名為Harmony（和諧）。
2009年扁远，ECMAScript 5.0版正式發(fā)布腺阳。Harmony項目則一分為二，一些較為可行的設(shè)想定名為JavaScript.next繼續(xù)開發(fā)穿香，后來演變成ECMAScript 6亭引；一些不是很成熟的設(shè)想，則被視為JavaScript.next.next皮获，在更遠(yuǎn)的將來再考慮推出焙蚓。
2011年，ECMAscript 5.1版發(fā)布洒宝，并且成為ISO國際標(biāo)準(zhǔn)购公。
2013年3月，ECMAScript 6草案凍結(jié)雁歌，不再添加新功能宏浩。
2013年12月，ECMAScript 6草案發(fā)布靠瞎。
2015年6月比庄，ECMAScript 6正式通過求妹，成為國際標(biāo)準(zhǔn)。從2000年算起佳窑，這時已經(jīng)過去了15年制恍。
ECMAScript 6 提出了很多新的特性，重點加強了模塊神凑、類聲明净神、詞法塊定界、迭代器和生成器溉委、異步編程的回調(diào)鹃唯、模式解析以及合適的尾調(diào)用，另外還擴展了ECMAScript的內(nèi)置庫以支持更多的抽象數(shù)據(jù)結(jié)構(gòu)瓣喊。其目的就是使JavaScript可以用來編寫復(fù)雜的應(yīng)用程序俯渤，成為企業(yè)級開發(fā)語言。
六型宝、JavaScript 核心
1.核心(ECMAScript)
2.文檔對象模型 (DOM)
3.瀏覽器對象模型 (BOM)
七八匠、瀏覽器渲染機制
1、解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹
2趴酣、解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM 樹
3梨树、把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
4、在渲染樹的基礎(chǔ)上進(jìn)行布局, 計算每個節(jié)點的幾何結(jié)構(gòu)
5岖寞、把每個節(jié)點繪制到屏幕上 (painting)
一抡四、DOM解析
解析由兩部分組成：標(biāo)記化和樹構(gòu)建
標(biāo)記化是詞法分析過程，將輸入內(nèi)容解析成多個標(biāo)記仗谆。HTML 標(biāo)記包括起始標(biāo)記指巡、結(jié)束標(biāo)記、屬性名稱和屬性值隶垮。
-
標(biāo)記生成器識別標(biāo)記藻雪，傳遞給樹構(gòu)造器，然后接受下一個字符以識別下一個標(biāo)記狸吞；如此反復(fù)直到輸入的結(jié)束勉耀。
<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>
DOM Tree解析如下：
二、css解析
八蹋偏、JavaScript在 HTML 中如何放置
一便斥、把JavaScript文件放在head中
<head>
<script type="text/javascript" src="style.js"></script>
</head>
JavaScript文件外部加載的好處
1.避免使用<! -- ... // -->，駭客技術(shù)威始。
2.避免使用CDATA枢纠。
3.統(tǒng)一定義JavaScript代碼，方便查看黎棠，方便維護(hù)晋渺。
4.使代碼更安全镰绎，可以壓縮，加密單個JavaScript文件些举。
5.瀏覽器可以緩存JavaScript文件跟狱，減少寬帶使用（當(dāng)多個頁面同時使用一個JavaScript文件的時候俭厚，通常只需下載一次）户魏。
二、把JavaScript文件放在body前
為防止網(wǎng)頁加載緩慢挪挤，也可以把非關(guān)鍵的JavaScript放到網(wǎng)頁底部叼丑，例如下面的代碼：
<script type="text/javascript" src="style.js"></script>
</body>
</html>
九、白屏和 FOUC
首先
- 在寫HTML代碼時扛门，我們都是將CSS文件的引入位置放在頭部（<head>標(biāo)簽內(nèi)部）鸠信，將js文件的引入位置放在底部（</body>前面）.
白屏：
- 當(dāng)css文件引入位置放置頭部時，Chrome（谷歌瀏覽器）會先把css文件全部加載完成论寨，再對HTML進(jìn)行渲染星立、展示。
- 如果把js文件放在頭部葬凳，腳本會阻塞后面內(nèi)容的呈現(xiàn)(如：文字)绰垂，腳本會阻塞其后組件的下載(如:圖片)，出現(xiàn)白屏問題火焰。
FOUC（無樣式內(nèi)容閃爍）：
- 當(dāng)css文件引入位置放置頭部時劲装，F(xiàn)irefox（火狐瀏覽器）先展示出HTML中的內(nèi)容，等待css加載完成再對HTML進(jìn)行渲染昌简。
十占业、異步加載腳本
1、async : 腳本延遲到文檔解析和顯示后執(zhí)行纯赎，有順序
<script async src="script.js"></script>
有 async谦疾，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。
2犬金、defer:不保證順序
<script defer src="script.js"></script>
有 defer餐蔬，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步），但 script.js 的執(zhí)行要在所有元素解析完成之后佑附，DOMContentLoaded 事件觸發(fā)之前完成樊诺。
- 注：自由轉(zhuǎn)載-非商用-非衍生-保持署名
