標識符
所謂標識符是指變量、函數、屬性的名字，或者函數的參數。標識符的書寫有幾個特征
1.區分大小寫: var a=1;
2.第一個字符必須是字母、下劃線（_）、或者是$ :var _aa =3; var$$cd=100
3.后面的可以是字母、數字、下劃線、$
命名規約
1.使用是實際意義的單詞
2.變量使用駝峰規則，第一個單詞首字母小寫，后面單詞首字母大寫
3.變量使用名詞，方法函數使用動詞開頭，常量全部用大寫字母，函數創建對象首字母大寫
var firstName;
var isSmall;
var hasClass;
var PI;
var MAX_COUNT;
function getName(){}
function Person(){}
變量
在JavaScript中變量是用來保存值的占位符，定義變量的時候要使用var運算符，
后面跟一個作為名稱的標識符即可
var message;
弱類型
在一些編譯語言（C、Java、C#）等變量的類型是固定的，在聲明變量的時候就要標識其類型，
在程序執行前編譯階段變量的類型就確定了，而且不能改變，我們稱之為強類型
int a = 2;
string b = "hello";
一些常見的解釋型語言（PHP、JavaScript）等變量的類型是松散的，一個變量可以用來保存任何類型的數據，
變量的類型不是由聲明時決定（聲明的時候只是用了var運算符），而是在程序執行階段由其值的類型決定，
隨著程序運行其值類型改變，變量類型也會發生改變
var message = 1; //message 類型就是數字
message = "hello world!"; //message 類型變為字符串
語句
語句（statement）是為了完成某種任務而進行的操作，比如下面就是一行賦值語句
var a = 1 + 2;
這條語句先用var運算符，聲明了變量a，然后將 1+2 的運算結果賦值給變量a。
JavaScript中語句以;結束，一行可以包含多條語句，如果省略分號不會產生語法錯誤，
解釋器會自動判斷語句結束
var sum = 1 + 2
var diff = 3 - 4;
變量提升
JavaScript引擎的工作方式是，先解析代碼，獲取所有被聲明的變量，然后再一行一行地運行。
這造成的結果，就是所有的變量的聲明語句，都會被提升到代碼的頭部，這就叫做變量提升
我們寫了一個賦值語句
var a = 2;
實際上執行過程是解釋器在未執行的時候先解析出變量聲明，然后給他初始值undefined，
然后才逐句執行程序
var a;
a = 2;
：：：：全局變量
申明前置：
var a=100;
b=10;
console.log(a)
console.log(c)
var c =4
var d =200
注釋
并不是所有的語句都會執行，我們可以通過注釋功能讓js引擎忽略部分語句，
這個功能經常用來解釋我們的部分語句，和讀書做標注一樣
Javascript提供兩種注釋：一種是單行注釋，用//起頭；另一種是多行注釋，放在/* 和 */之間。
//為變量賦值
var a = 1; //賦值成功
/*
下面定義個函數
至于什么是函數
且聽下回分解
*/
function getName(id){
return 'Byron';
}
（HTML的注釋 <!-- --> CSS的注釋：/* */）
關鍵字和保留字
關鍵字是JavaScript引擎會用到的一些字，我們標識符不能再使用，比如定義變量的關鍵字var，關鍵字有
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
保留字
除了這些不能用作標識符的關鍵字，js還規定了一些不能用作標識符的保留字，
這些字符沒有什么意義，但是未來會用到
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
實際上一些保留字在新的ECMAscript已經得到使用
認識 JavaScript
網頁?
網頁 = Html+CSS+JavaScript
Html: 網頁元素內容
CSS: 控制網頁樣式
JavaScript：操作網頁內容，實現功能或者效果
javascript
javascript !== java
是客戶端腳本語言（指瀏覽器）
ECMAScript, DOM, BOM, NodeJS（變量，函數，語句，操作瀏覽器頁面上的內容，交互）
引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
<link href="index.css" rel="stylesheet">
<style>
body{
background: red;
}
</style>
</head>
<body>
<p>
</p>
<script src="index.js"></script>
<script>
alert(1);
</script>
</body>
</html>
瀏覽器渲染機制
解析 HTML 標簽, 構建 DOM 樹
解析 CSS 標簽, 構建 CSSOM 樹
把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
在渲染樹的基礎上進行布局, 計算每個節點的幾何結構
把每個節點繪制到屏幕上 (painting)
render-tree-construction
白屏問題
如果把樣式放在底部,對于IE瀏覽器,在某些場景下(新窗口打開,刷新等)頁面會出現白屏,而不是內容逐步展現
如果使用 @import 標簽,即使 CSS 放入 link, 并且放在頭部,也可能出現白屏（一般情況下不用@import）
chrome是等html，css都出現后的渲染的一個結果
css一般放在body的前面，放到head里面
FOUC (Flash of Unstyled Content) 無樣式內容閃爍
如果把樣式放在底部,對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進入等),
會出現 FOUC 現象(逐步加載無樣式的內容,等CSS加載后頁面突然展現樣式).對于 Firefox
會一直表現出 FOUC .
將JS放在底部
腳本會阻塞后面內容的呈現
腳本會阻塞其后組件的下載
對于圖片和CSS, 在加載時會并發加載(如一個域名下同時加載兩個文件). 但在加載 JavaScript 時,
會禁用并發,并且阻止其他內容的下載. 所以把 JavaScript 放入頁面頂部也會導致 白屏 現象.
加載異步
<script src="script.js"></script>
沒有 defer 或 async，瀏覽器會立即加載并執行指定的腳本，“立即”指的是在渲染該 script
標簽之下的文檔元素之前，也就是說不等待后續載入的文檔元素，讀到就加載并執行。
<script async src="script.js"></script>
有 async，加載和渲染后續文檔元素的過程將和 script.js 的加載與執行并行進行（異步）。
<script defer src="script.js"></script>
有 defer，加載后續文檔元素的過程將和 script.js 的加載并行進行（異步），
但 script.js 的執行要在所有元素解析完成之后，DOMContentLoaded 事件觸發之前完成。
defer:腳本延遲到文檔解析和顯示后執行，有順序
async:不保證順序
基本調試
alert
console.log
打斷點
二分法（分成兩份，注釋點一份，再查找）
（報錯是什么，報錯的點在哪里，分析問題，解決問題的能力）
參考
高性能網站建設指南, Steve Sounders
Render-tree construction, layout, and paint
How browsers work（http://taligarsiel.com/Projects/howbrowserswork1.htm）
