標(biāo)識符

所謂標(biāo)識符是指變量氢惋、函數(shù)洞翩、屬性的名字，或者函數(shù)的參數(shù)焰望。標(biāo)識符的書寫有幾個(gè)特征：

1. 區(qū)分大小寫
2. 第一個(gè)字符必須是字母骚亿、下劃線（_）、或者是$
3. 后面的可以是字母熊赖、數(shù)字来屠、下劃線、$

命名規(guī)約

1. 使用是實(shí)際意義的單詞
2. 變量使用駝峰規(guī)則震鹉，第一個(gè)單詞首字母小寫俱笛，后面單詞首字母大寫
3. 變量使用名詞，方法函數(shù)使用動詞開頭传趾，常量全部用大寫字母迎膜，函數(shù)創(chuàng)建對象首字母大寫

var firstName;
var isSmall;
var hasClass;
var PI;
var MAX_COUNT;
function getName(){}
function Person(){}

變量

定義變量使用var運(yùn)算符，var 標(biāo)識符名稱
var message;

弱類型

• 強(qiáng)類型:在一些編譯語言（C浆兰、Java磕仅、C#）等變量的類型是固定的，變量的類型在聲明時(shí)就決定簸呈，在程序執(zhí)行前編譯階段變量的類型就確定了榕订，而且不能改變。
• 弱類型：
  一些解釋型語言（PHP蜕便、JavaScript）等變量的類型是松散的劫恒，一個(gè)變量可以用來保存任何類型的數(shù)據(jù)，變量的類型不是由聲明時(shí)決定（聲明的時(shí)候只是用了var運(yùn)算符）轿腺，而是在程序執(zhí)行階段由其值的類型決定两嘴，隨著程序運(yùn)行值類型改變，變量類型也會發(fā)生改變吃溅。

var message = 1; //message 類型就是數(shù)字
message = "hello world!"; //message 類型變?yōu)樽址?

語句

JavaScript中語句以;結(jié)束溶诞，一行可以包含多條語句，省略分號不會產(chǎn)生語法錯(cuò)誤决侈，解釋器會自動判斷語句結(jié)束.

變量提升

JavaScript引擎的工作方式是螺垢，先解析代碼，獲取所有被聲明的變量赖歌，然后再一行一行地運(yùn)行枉圃。造成所有的變量的聲明語句，都會被提升到代碼的頭部庐冯，這就叫做變量提升孽亲。

當(dāng)我們寫了一個(gè)賦值語句
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
保留字（未來可能會用到返劲，故保留）：
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)頁

網(wǎng)頁 = Html+CSS+JavaScript
Html: 網(wǎng)頁元素內(nèi)容
CSS: 控制網(wǎng)頁樣式
JavaScript：操作網(wǎng)頁內(nèi)容玲昧，實(shí)現(xiàn)功能或者效果

javascript

• 是客戶端腳本語言
• JavaScript由三部分組成（ECMAScript, DOM, BOM）
  • ECMAScript：核心語言功能
    ECMAScript規(guī)定了語言的組成部分（語法、類型篮绿、關(guān)鍵字孵延、保留字、操作符亲配、對象）web瀏覽器只是ECMAScript實(shí)現(xiàn)的可能的宿主環(huán)境之一尘应，宿主環(huán)境不僅提供基本的ECMAScript實(shí)現(xiàn)，同時(shí)也提供該語言的擴(kuò)展（比如DOM）吼虎，以便語言與環(huán)境直接的對接交互犬钢。其他宿主環(huán)境包括Node（ Node.js 就是運(yùn)行在服務(wù)端的 JavaScript）
  • 文檔對象模型（DOM）：提供訪問和操作網(wǎng)頁內(nèi)容的方法和接口
    DOM把整個(gè)頁面映射為一個(gè)多層節(jié)點(diǎn)結(jié)構(gòu)，HTML或XML頁面中的每個(gè)組成部分都是某種類型的節(jié)點(diǎn)思灰，通過DOM創(chuàng)建的這個(gè)表示文檔的樹形圖玷犹，開發(fā)人員獲得了控制頁面內(nèi)容和結(jié)構(gòu)的主動權(quán)。
  • 瀏覽器對象模型（BOM）：提供與瀏覽器交互的方法和接口（彈出新瀏覽起窗口等）

引入方式

可以放在html的任何地方引入（但建議將JS放在body標(biāo)簽內(nèi)的底部）官辈，兩種方式箱舞，使用時(shí)只能二者選其一
1.<script src="index.js"></script>

<script>
    alert(1); 
</script>

瀏覽器渲染機(jī)制(chrome)

1. 解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹
2. 解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM 樹
3. 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
4. 在渲染樹的基礎(chǔ)上進(jìn)行布局, 計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)
5. 把每個(gè)節(jié)點(diǎn)繪制到屏幕上 (painting)

解釋白屏問題和 無樣式內(nèi)容閃爍（FOUC）

白屏的根本原因是瀏覽器在渲染的時(shí)候請求時(shí)間過長造成的。

Chrome的渲染流程大致是HTML-->Dom-->Css-->Cssom-->Render Tree-->進(jìn)行計(jì)算-->painting最終才是我們看到的網(wǎng)頁界面拳亿。
1.如果把樣式放在底部，對于IE瀏覽器愿伴，頁面會出現(xiàn)白屏肺魁，而不是內(nèi)容逐步展現(xiàn)
2.如果使用@import，即使css放入link隔节，也可能出現(xiàn)白屏,因?yàn)閕mport會導(dǎo)致CSS文件不能并行下載鹅经。所以，要盡量避免使用css @import而盡量采用link標(biāo)簽的方式引入怎诫，讓多個(gè)css可以并行下載瘾晃。
3.js腳本會阻塞后面內(nèi)容的呈現(xiàn)和其后組件的下載，對于圖片和CSS, 在加載時(shí)會并行加載幻妓，但在加載js時(shí)蹦误，會禁用并行，并且阻止其他內(nèi)容的下載肉津。所以將js放在頁面的頂部也可能會導(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語言的一大特點(diǎn)就是單線程牵寺，也就是說，同一個(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) 無樣式內(nèi)容閃爍

FOUC 指逐步加載無樣式的內(nèi)容,等CSS加載后頁面突然展現(xiàn)樣式壮啊，對于Firefox嫉鲸，渲染機(jī)制與chrome略有不同，因此會出現(xiàn)FOUC歹啼；把樣式放在底部,對于IE瀏覽器,在某些場景下(點(diǎn)擊鏈接,輸入U(xiǎn)RL,使用書簽進(jìn)入等),會出現(xiàn)FOUC現(xiàn)象玄渗，對于 Firefox 會一直表現(xiàn)出 FOUC .

同步加載

同步模式，又稱阻塞模式狸眼，會阻止瀏覽器的后續(xù)處理藤树，停止了后續(xù)的解析，因此停止了后續(xù)的文件加載（如圖像）拓萌、渲染岁钓、代碼執(zhí)行。
<script src="script.js"></script>
沒有 defer 或 async即稱為同步模式微王，又稱阻塞模式屡限。瀏覽器會立即加載并執(zhí)行指定的腳本，也就是不等待后續(xù)載入的文檔元素炕倘，讀到就加載并執(zhí)行钧大。js 之所以要同步執(zhí)行，是因?yàn)?js 中可能有輸出 document 內(nèi)容罩旋、修改dom啊央、重定向等行為，所以默認(rèn)同步執(zhí)行才是安全的瘸恼。所以一般建議把<script>標(biāo)簽放在<body>結(jié)尾處劣挫，這樣盡可能減少頁面阻塞。

異步加載

異步加載又叫非阻塞加載东帅，瀏覽器在下載執(zhí)行js的同時(shí)压固，還會繼續(xù)進(jìn)行后續(xù)頁面的處理，就是并行處理
<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í)行完之前會阻止onload事件的觸發(fā)芬为，而現(xiàn)在很多頁面的代碼都在onload時(shí)還執(zhí)行額外的渲染工作萄金，所以還是會阻塞部分頁面的初始化處理。
簡單說：同步加載的網(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