前端開發基礎知識 – 總結
1. HTML
- 常用的 meta 頭
html 中的 meta 標籤總是位於 head 標籤中，用於定義關於頁面的一些原數據
meta 標籤中的屬性是以屬性名=屬性值的形式定義的
meta標籤的兩大屬性：name(頁面描述信息)、http-equiv（http標題信息）
- name屬性
（1）keywords(關鍵字)
（2）description(頁面內容描述)
（3）author(作者)
（4）viewport(視口)
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no">
2.http-equive屬性
（1）content-type(頁面字符集的設定)
（2）expires(期限，網頁的到期時間)
（3）pragma(cache模式)
（4）refresh(刷新)
（5）set-cookie(cookie設定)
（6）window-target(顯示窗口的設定)
- 對標籤語義化的理解
（1）清晰的頁面結構
（2）便於團隊開發和維護
（3）支持更多的設備（比如：屏幕閱讀器）
（4）有利於SEO儘可能少的使用無語義的標籤div和span；在語義不明顯時，既可以使用div或者p時，儘量用p, 因爲p在默認情況下有上下間距，對兼容特殊終端有利；
不要使用純樣式標籤，如：b、font、u等，改用css設置。需要強調的文本，可以包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；
表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；每個input標籤對應的說明文本都需要使用label標籤，並且通過爲input設置id屬性，在lable標籤中設置for=someld來讓說明文本和相對應的input關聯起來。
html5新增的一些語義化標籤
- HTML 5 新增的能力
繪畫 canvas 元素
audio、video標籤
localStorage（本地數據持久化存儲，即使關閉瀏覽器，數據也存在）
一系列語義化的標籤，如：header、nav、article、section、sider、footer
線性漸變（grandient）
邊框圓角（border-radius）
陰影（shadow）
- HTML的渲染解析知識（比如：爲什麼CSS放前面，JS放後面；怎樣理解並行加載串行執行）
- CSS 要放在 HTML 的body標籤前面，也就是 head 標籤中
因爲這樣的話，瀏覽器會先讀取CSS樣式，將樣式文件準備好。然後再讀取body標籤中的結構內容。此時，邊渲染DOM元素的同時，也就把樣式添加上了。
如果把CSS放在後面，可能會出現白屏問題（IE、Chrome），也可能出現無樣式閃爍(Firefox)- JS要放在HTML的後面，也就是body的結束標籤之前。
因爲在加載JS的時候，會阻塞其他一切的活動，包括：其他資源的下載和頁面的呈現。如何用戶的網速很慢或者JS文件過大，可能所需的加載時間比較長，此時，可能帶給用戶頁面老是刷不出來的感覺，用戶體驗會很差。因此，要把它放在後面，先加載HTML和CSS，在靜態頁面出來了以後，再讀取加載JS，讓頁面動起來。- CSS阻塞：當CSS放在JS之前時，會出現CSS阻塞（因爲，瀏覽器爲了保持HTML中CSS和JS的順序，會在將CSS加載完畢以後纔去加載JS，而加載JS具有阻塞其他資源下載的特性，故而會出現CSS阻塞的現象。而將JS放在CSS之前時，就不會出現CSS阻塞）
4.JS阻塞：JS無論放在哪，都會阻塞其他資源的下載。不同的一點是，放在HTML的head標籤中時，會阻止其它資源的加載以及頁面的呈現；而放在HTML的後面，也就是body結束標籤時，則只會阻塞其後的資源的加載。
2. CSS
- 怎樣寫出更好的CSS，
（0）reset(初始化樣式表)
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
（1）如層級不宜過深
一般不宜超過3層。層級過深會導致查詢> >DOM節點耗時耗資源；在瀏覽器渲染頁面>的過程中，DOM樹和CSSOM樹的關聯成>本會更高；CSS代碼易讀性較差。
（2）何時用 ID 和何時用 class
只有一個獨立樣式的元素適合用 id，而有>多個元素擁有的相同的樣式的元素適合用 >class。
（3）怎麼拆分組織
儘量使用CSS外部樣式文件，少使用內聯>樣式和內部樣式。
- 盒模型
盒模型有 IE 盒模型和 W3C 盒模型(標準盒模型)。
無論是哪種，都有：content(內容)、padding(內邊距)、border(邊框)、margin(外邊距)
不同之處：
W3C盒模型中，元素的寬度指的就是content的寬度
IE盒模型中，元素的寬度指的是（content的寬度+兩邊padding的寬度+兩邊border的寬度）通過設置box-sizing這個屬性，可以確定盒模型中元素尺寸的計算方式
/* box-sizing 的默認值是content-box。
尺寸計算公式：width = 內容的寬度，height = 內容的高度。*/
。contentBox{
box-sizing: content-box;
}
/* 推薦使用border-box。
width = border + padding + 內容的 width，
height = border + padding + 內容的 height。*/
.borderBox{
box-sizing: border-box;
}
- 非常常用的 CSS3 知識
（1）比如 CSS3 動畫（2）彈性佈局
/* 彈性盒子的一般使用方法 */
.container{
display: -webkit-flex;
display: flex;
}
.flex1{
-webkit-flex: 1;
flex: 1;
}
.flex2{
-webkit-flex: 2;
flex: 2;
}
/* 彈性盒子實現元素居中 */
.center{
height: 100px;
-webkit-align-item: center;
align-item: center;
-webkit-justify-content: center;
justify-content: center;
}
3. JavaScript
- 事件模型
JS 中的事件模型包括三種：DOM0事件模型（原始事件模型）、DOM2事件模型、IE事件模型
（1）DOM0事件模型
特點：
- 沒有事件傳播。事件一旦觸發，就會立即執行事件處理函數。
- 一個DOM元素上只能綁定一種類型的事件的一個事件處理程序。若爲同一事件綁定了兩個事件處理程序，則後面那個事件處理程序會覆蓋前面那一個。
- 事件句柄名：on + 事件名
<div id="myDiv" onClick="alert('hello world')">myDiv</div>
document.getElementById('myDiv').onClick = function(e){
alert(e);
};
// 移除事件處理程序
document.getElementById('myDiv').onClick = null;
（2）DOM2事件模型
特點：
- 一個DOM元素上可以爲同一事件綁定多個事件處理程序
- 事件會傳播
- 方法：
[dom].addEventListener( [event]，[function]，[true/false] ) --> 綁定事件監聽
[dom].removeEventListener( [event]，[function]，[true/false] ) --> 移除事件監聽
event.stopPropagation() --> 取消事件冒泡
event.preventDefault() --> 取消事件的默認行爲
DOM2事件模型中，事件傳播被分爲3個階段：捕獲階段（不具體的元素-》具體的目標元素）、處於目標階段（到達目標元素）、冒泡階段（具體的元素-》不具體的元素）
DOM2中的方法的第3個參數，指定的是：是否在捕獲階段調用事件處理函數，默認爲 false，即在冒泡階段調用事件處理函數。
（3）IE事件模型
特點：- 一個DOM元素可以針對一個事件可以綁定多個事件處理程序
- 事件處理程序的調用都是在事件冒泡階段
方法：
[dom].attach( [event]，[function] ) -->綁定事件
[dom].detach( [event]，[function] ) --> 移除事件
- 閉包
指的是：可以訪問另一個函數作用域中的變量的函數。創建閉包的最簡單的方式就是在一個函數的內部再創建另一個函數。
特點：
- 內部的函數可以訪問外部函數的變量，反之則不行。
- 返回的內部函數，保存有狀態。
用途：
它的最大用處有兩個，一個是可以讀取函數內部的變量，另一個就是讓這些變量的值始終保持在內存中。- 返回一個函數，延遲執行；
- 將多參數的函數簡化爲單參數的函數；
- 突破作用域鏈，保存函數狀態；
- …
使用閉包的注意點
1）由於閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題，在IE中可能導致內存泄露。解決方法是，在退出函數之前，將不使用的局部變量全部刪除。
2）閉包會在父函數外部，改變父函數內部變量的值。所以，如果你把父函數當作對象（object）使用，把閉包當作它的公用方法（Public Method），把內部變量當作它的私有屬性（private value），這時一定要小心，不要隨便改變父函數內部變量的值。
- 原型鏈
每個實例對象（object ）都有一個私有屬性（稱之爲 proto）指向它的原型對象（prototype）。該原型對象也有一個自己的原型對象 ，層層向上直到一個對象的原型對象爲 null。根據定義，null 沒有原型，並作爲這個原型鏈中的最後一個環節。
幾乎所有 JavaScript 中的對象都是位於原型鏈頂端的Object的實例。
- 瀏覽器的解析渲染原理
簡要來說：
- 解析HTML標籤，生成DOM樹；
- 解析CSS規則，生成CSS規則樹；
- 解析JS文件，根據CSSOM API 和 DOM API 來操作CSS 規則樹和 DOM 樹；
- 將DOM樹與CSS規則樹關聯起來，構造渲染樹（rendering tree）(渲染樹中會去除了一些不可見的節點)；
- 計算渲染樹的節點的幾何結構（位置，尺寸等）（layout 和 reflow 的過程）；
- 調用操作系統的Native GUI 的 API，渲染繪製頁面。
瀏覽器工作大流程：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-fBEYpcSA-1587351247775)(https://coolshell.cn/wp-content/uploads/2013/05/Render-Process-768x250.jpg)]
參考文章：參考文章
- DOM樹、渲染樹、重排重繪、分層渲染、爲什麼DOM操作過多會影響性能等
（1）DOM樹：DOM是針對HTML和XML文檔的一個API。DOM可以將任何的HTML文檔和XML文檔描繪成一個層次化的節點樹。
操作DOM的一些常用方法：
document.documentElement();
document.head();
document.body();
[context].querySelector();
[context].querySelectorAll();
document.getElementById();
[context].getElementsByTagName();
[context].getElementsByClassName();
[context].getElementsByName();
（2）渲染樹：
一般來說，在瀏覽器對頁面文件進行解析渲染的過程中，在將文件解析完成之後，將DOM樹和CSS規則樹關聯起來，構造出來的用於後面的頁面渲染的樹，就是渲染樹。
- 渲染樹並不等同與DOM樹，因爲一些像header 或 display: none 的節點就沒有必要放在渲染樹中了。
- CSS規則樹主要是爲了完成匹配，並將CSS 規則附加到渲染樹的每一個節點（也就是DOM節點）上。DOM節點 + CSS規則 = 渲染樹的節點，也就是Frame。
（3）重繪和重排：
repaint(重繪)：屏幕的一部分需要重畫。比如：某個元素的CSS的背景顏色發生了變化，但是元素的幾何尺寸沒有發生改變。
reflow(layout / 重排)：意味着元素的幾何尺寸發生了變化（是渲染樹的一部分或全部發生了變化），需要重新驗證並計算。HTML的佈局是基於流式佈局的，所以，如果某元素的幾何尺寸發生了變化的話，就會需要重新佈局，這也就是 reflow
頁面會發生重繪或重排的幾種情況有：
- 增加、刪除、修改DOM節點；
- 移動DOM的位置；
- 修改CSS樣式；
- 滾動窗口；
- 修改頁面的默認字體；
- …
/* 觸發重排 reflow */
display: none;
/* 觸發重繪 repaint */
visibility: hidden;
（4）分層渲染：
（5）爲什麼DOM操作過多會影響性能：
DOM操作會觸發瀏覽器頁面的重繪或重排，這兩個操作對於瀏覽器的性能都是極大的損耗，重排更是。
4. HTTP
- 常見的 HTTP 狀態碼
（1）1xx 消息
- 100 客戶端可以繼續發送請求
（2）2xx 成功
- 200 請求已成功處理，請求的資源也已經返回
- 204 no content，請求已成功處理，但沒有內容返回
（3）3xx 重定向
- 300 請求的資源可以從多個地址獲得
- 301 重定向，資源永久移除，客戶端不應該再繼續通過該 url 訪問該資源
- 302 重定向，資源臨時移除，以後可能仍然使用該 url
- 303 see other，請求的資源在另一個URI，應該使用GET定向獲取資源
- 304 not modefined，瀏覽器可以使用本地緩存
（4）4xx 客戶端錯誤
- 400 bad request，客戶端發送的請求不能理解
- 401 unauthorized，表示發送的請求需要有HTTP認證信息或是認證失敗了
- 403 forbidden，服務器拒絕提供服務
- 404 not found，沒找到資源
（5）5xx 服務器端錯誤
- 500 internal server error ，服務器內部錯誤
- 503 server unavaliable，服務暫不可用
- 不同請求類型的區別
（1）GET請求
向服務器請求資源，從服務器取回數據。
（2）POST請求
向服務器提交數據。
（3）PULL請求
向服務器推送數據，提交的數據量通常要比POST請求的多。
（4）PUT請求
向服務器更新數據。通過把已經存在的資源的ID和新的實體用PUT請求上傳到服務器來更新資源。
（5）DELETE請求
刪除服務器上的指定的資源
（6）HEAD請求
HEAD請求與GET請求類似，但僅僅返回相應的頭部，沒有具體的響應體。
（7）OPTIONS請求
OPTIONS允許客戶端請求一個服務所支持的請求方法。它所對應的響應頭是Allow，它非常簡潔地列出了支持的方法。下面爲服務端成功處理了OPTIONS請求後，響應的內容：
Allow: HEAD,GET,PUT,DELETE,OPTIONS
（8）CONNECT請求
主要用來建立一個對資源的網絡連接。一旦建立連接後，會響應一個200狀態碼和一條"Connectioin Established"的消息。