標(biāo)識(shí)符
所謂標(biāo)識(shí)符是指變量、函數(shù)、屬性的名字，或者函數(shù)的參數(shù)。標(biāo)識(shí)符的書寫有幾個(gè)特征：
- 區(qū)分大小寫
- 第一個(gè)字符必須是字母、下劃線（_）、或者是$
- 后面的可以是字母、數(shù)字、下劃線、$
命名規(guī)約
- 使用是實(shí)際意義的單詞
- 變量使用駝峰規(guī)則，第一個(gè)單詞首字母小寫，后面單詞首字母大寫
- 變量使用名詞，方法函數(shù)使用動(dòng)詞開頭，常量全部用大寫字母，函數(shù)創(chuàng)建對(duì)象首字母大寫
var firstName;
var isSmall;
var hasClass;
var PI;
var MAX_COUNT;
function getName(){}
function Person(){}
變量
定義變量使用var運(yùn)算符，var 標(biāo)識(shí)符名稱
var message;
弱類型
- 強(qiáng)類型:在一些編譯語(yǔ)言（C、Java、C#）等變量的類型是固定的，變量的類型在聲明時(shí)就決定，在程序執(zhí)行前編譯階段變量的類型就確定了，而且不能改變。
- 弱類型：
一些解釋型語(yǔ)言（PHP、JavaScript）等變量的類型是松散的，一個(gè)變量可以用來(lái)保存任何類型的數(shù)據(jù)，變量的類型不是由聲明時(shí)決定（聲明的時(shí)候只是用了var運(yùn)算符），而是在程序執(zhí)行階段由其值的類型決定，隨著程序運(yùn)行值類型改變，變量類型也會(huì)發(fā)生改變。
var message = 1; //message 類型就是數(shù)字
message = "hello world!"; //message 類型變?yōu)樽址?語(yǔ)句
JavaScript中語(yǔ)句以;結(jié)束，一行可以包含多條語(yǔ)句，省略分號(hào)不會(huì)產(chǎn)生語(yǔ)法錯(cuò)誤，解釋器會(huì)自動(dòng)判斷語(yǔ)句結(jié)束.
變量提升
JavaScript引擎的工作方式是，先解析代碼，獲取所有被聲明的變量，然后再一行一行地運(yùn)行。造成所有的變量的聲明語(yǔ)句，都會(huì)被提升到代碼的頭部，這就叫做變量提升。
當(dāng)我們寫了一個(gè)賦值語(yǔ)句
var a = 2;
實(shí)際上執(zhí)行過程是解釋器先解析出變量聲明，給他初始值undefined，然后才逐句執(zhí)行程序
var a;
a = 2;
關(guān)鍵字和保留字
關(guān)鍵字有：
break else new var
case finally return void
catch for switch while
continue function this with
default if throw
delete in try
do instanceof typeof
保留字（未來(lái)可能會(huì)用到，故保留）：
abstract enum int short
boolean export interface static
bye extends long super
char final native synchronized
class float package throws
const goto private transient
debugger implements protected volatile
doubler import public
網(wǎng)頁(yè)
網(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)功能或者效果
javascript
- 是客戶端腳本語(yǔ)言
- JavaScript由三部分組成（ECMAScript, DOM, BOM）
- ECMAScript：核心語(yǔ)言功能
ECMAScript規(guī)定了語(yǔ)言的組成部分（語(yǔ)法、類型、關(guān)鍵字、保留字、操作符、對(duì)象）web瀏覽器只是ECMAScript實(shí)現(xiàn)的可能的宿主環(huán)境之一，宿主環(huán)境不僅提供基本的ECMAScript實(shí)現(xiàn)，同時(shí)也提供該語(yǔ)言的擴(kuò)展（比如DOM），以便語(yǔ)言與環(huán)境直接的對(duì)接交互。其他宿主環(huán)境包括Node（ Node.js 就是運(yùn)行在服務(wù)端的 JavaScript） - 文檔對(duì)象模型（DOM）：提供訪問和操作網(wǎng)頁(yè)內(nèi)容的方法和接口
DOM把整個(gè)頁(yè)面映射為一個(gè)多層節(jié)點(diǎn)結(jié)構(gòu)，HTML或XML頁(yè)面中的每個(gè)組成部分都是某種類型的節(jié)點(diǎn)，通過DOM創(chuàng)建的這個(gè)表示文檔的樹形圖，開發(fā)人員獲得了控制頁(yè)面內(nèi)容和結(jié)構(gòu)的主動(dòng)權(quán)。 - 瀏覽器對(duì)象模型（BOM）：提供與瀏覽器交互的方法和接口（彈出新瀏覽起窗口等）
- ECMAScript：核心語(yǔ)言功能
引入方式
可以放在html的任何地方引入（但建議將JS放在body標(biāo)簽內(nèi)的底部），兩種方式，使用時(shí)只能二者選其一
1.<script src="index.js"></script>
<script>
alert(1);
</script>
瀏覽器渲染機(jī)制(chrome)
- 解析 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)
解釋白屏問題和 無(wú)樣式內(nèi)容閃爍（FOUC）
白屏的根本原因是瀏覽器在渲染的時(shí)候請(qǐng)求時(shí)間過長(zhǎng)造成的。
Chrome的渲染流程大致是HTML-->Dom-->Css-->Cssom-->Render Tree-->進(jìn)行計(jì)算-->painting最終才是我們看到的網(wǎng)頁(yè)界面。
1.如果把樣式放在底部，對(duì)于IE瀏覽器，頁(yè)面會(huì)出現(xiàn)白屏，而不是內(nèi)容逐步展現(xiàn)
2.如果使用@import，即使css放入link，也可能出現(xiàn)白屏,因?yàn)閕mport會(huì)導(dǎo)致CSS文件不能并行下載。所以，要盡量避免使用css @import而盡量采用link標(biāo)簽的方式引入，讓多個(gè)css可以并行下載。
3.js腳本會(huì)阻塞后面內(nèi)容的呈現(xiàn)和其后組件的下載，對(duì)于圖片和CSS, 在加載時(shí)會(huì)并行加載，但在加載js時(shí)，會(huì)禁用并行，并且阻止其他內(nèi)容的下載。所以將js放在頁(yè)面的頂部也可能會(huì)導(dǎo)致白屏。建議將JS放在body標(biāo)簽內(nèi)的底部(當(dāng)操作dom節(jié)點(diǎn)時(shí)節(jié)點(diǎn)存在+防止白屏)
js上存在并發(fā)，而不存在并行。
并發(fā)的關(guān)鍵是你有處理多個(gè)任務(wù)的能力，不一定要同時(shí)。
并行的關(guān)鍵是你有同時(shí)處理多個(gè)任務(wù)的能力。
所以它們最關(guān)鍵的點(diǎn)就是：是否是『同時(shí)』。
并行:在一個(gè) js 線程上不存在并行（JavaScript語(yǔ)言的一大特點(diǎn)就是單線程，也就是說(shuō)，同一個(gè)時(shí)間只能做一件事），即同一個(gè)時(shí)間只能執(zhí)行一段 js 代碼。
并發(fā)是指這個(gè)系統(tǒng)擁有處理多個(gè)任務(wù)的能力，并不要求同時(shí)性。當(dāng)js的setTimeout執(zhí)行時(shí)，其實(shí)是把setTimeout里的函數(shù)加入了消息隊(duì)列，等系統(tǒng)空閑時(shí)再依次處理。此時(shí)系統(tǒng)利用消息隊(duì)列，相當(dāng)于擁有了并發(fā)的能力。
FOUC (Flash of Unstyled Content) 無(wú)樣式內(nèi)容閃爍
FOUC 指逐步加載無(wú)樣式的內(nèi)容,等CSS加載后頁(yè)面突然展現(xiàn)樣式，對(duì)于Firefox，渲染機(jī)制與chrome略有不同，因此會(huì)出現(xiàn)FOUC；把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(點(diǎn)擊鏈接,輸入U(xiǎn)RL,使用書簽進(jìn)入等),會(huì)出現(xiàn)FOUC現(xiàn)象，對(duì)于 Firefox 會(huì)一直表現(xiàn)出 FOUC .
同步加載
同步模式，又稱阻塞模式，會(huì)阻止瀏覽器的后續(xù)處理，停止了后續(xù)的解析，因此停止了后續(xù)的文件加載（如圖像）、渲染、代碼執(zhí)行。
<script src="script.js"></script>
沒有 defer 或 async即稱為同步模式，又稱阻塞模式。瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，也就是不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。js 之所以要同步執(zhí)行，是因?yàn)?js 中可能有輸出 document 內(nèi)容、修改dom、重定向等行為，所以默認(rèn)同步執(zhí)行才是安全的。所以一般建議把<script>標(biāo)簽放在<body>結(jié)尾處，這樣盡可能減少頁(yè)面阻塞。
異步加載
異步加載又叫非阻塞加載，瀏覽器在下載執(zhí)行js的同時(shí)，還會(huì)繼續(xù)進(jìn)行后續(xù)頁(yè)面的處理，就是并行處理
<script defer src="script1.js"></script>
<script defer src="script2.js"></script>
defer延遲執(zhí)行：腳本立即下載，延遲到文檔解析和顯示后執(zhí)行，保證腳本執(zhí)行順序，script1先于script2執(zhí)行。
<script async src="script.js"></script>
async異步屬性：腳本立即下載，延遲到文檔解析和顯示后執(zhí)行，不保證順序。這種加載方式執(zhí)行完之前會(huì)阻止onload事件的觸發(fā)，而現(xiàn)在很多頁(yè)面的代碼都在onload時(shí)還執(zhí)行額外的渲染工作，所以還是會(huì)阻塞部分頁(yè)面的初始化處理。
簡(jiǎn)單說(shuō)：同步加載的網(wǎng)絡(luò) timeline 是瀑布模型，而異步加載的 timeline 是并行模型。
基本調(diào)試
打開審查元素，看下報(bào)錯(cuò)提示，打個(gè)斷點(diǎn)，利用alert和console.log輸出中間的過程，看下每一步是不是和預(yù)期一樣
- alert
- console.log 相比alert更優(yōu)，一般都是采用console.log
- 打斷點(diǎn) 點(diǎn)擊source，打開JS文件，打斷點(diǎn)，運(yùn)行查找錯(cuò)誤
- 二分法 每次將代碼注釋掉一半，幾次之后，必能定位到錯(cuò)誤點(diǎn)
參考
高性能網(wǎng)站建設(shè)指南, Steve Sounders
Render-tree construction, layout, and paint渲染樹構(gòu)造，布局和繪畫
How browsers work
