前端知識點梳理（二）

1.內核

瀏覽器內核（Rendering Engine）最初分為：渲染引擎（layout engineer）或（Rendering Engine）和js引擎；后來 JS 引擎越來越獨立，內核就傾向于單指渲染引擎。
瀏覽器=shell+內核
Shell是指瀏覽器的外殼：例如菜單，工具欄等。主要是提供給用戶界面操作，參數設置等等。它是調用內核來實現各種功能的。內核才是瀏覽器的核心。

發展歷程：①Netscape王者（Gecko內核;開源）→ ②蝗蟲IE(伴隨操作系統，Trident) → ③烈士（網景）遺孤Mozilla （Gecko）→ ④蘋果Safari （WebKit）→ ⑤后起之秀-谷歌Chrome（Bink/Chromium）→ ⑥1+1>2，雙核時代 UC瀏覽器（WebKit+Trident）

為什么有些用戶寧愿瀏覽器雙開，也不愿意用國產的雙核瀏覽器呢？

可能存在以下原因：
1.chrome的界面設計甩雙核瀏覽器好幾條街。
2.chrome功能上更加安全可靠，雙核瀏覽器感覺會打折扣。
3.chrome有ie tab插件（插件會有Cookies丟失、假死現象），可以實現內核切換，沒必要用雙核。
4.用ie的場景不多了，網銀和各大電商都已支持chrome了。
5.雙核瀏覽器是一條死路，隨著web標準的推廣，ie內核也會越來越靠近標準。
6.國產雙核瀏覽器的花里胡哨的自帶插件各種彈窗廣告和自作聰明的復雜設計、無用功能、過度吹噓開始讓人生厭。
7.極客、技術發燒友的使用習慣和普通網友有本質區別。
8.國產的外殼，商業目的遠大于技術目的，第一目的是賺錢，而不是做一個好產品。

在這里插入圖片描述
瀏覽器內核歷史

2. !Doctype

!Doctype
瀏覽器模式
文檔模式

2.1 嚴格模式和混雜模式

所謂的標準模式是指，瀏覽器按W3C標準解析執行代碼；怪異模式則是使用瀏覽器自己的方式解析執行代碼，因為不同瀏覽器解析執行的方式不一樣，所以我們稱之為怪異模式。
1)當采用嚴格模式，任意瀏覽器效果相同；
2)當采用怪異模式，因瀏覽器而異；
3)采用哪種模式？取決于DTD聲明

HTML 4.01：嚴格模式、過渡模式、框架模式

嚴格模式：不包括展示性的和棄用的元素（比如font），不允許框架集（Framesets）
過渡模式：只不允許框架集（Framesets）
框架模式：都ok

2.2 document.compatMode

document.compatMode，可以用來判斷當前頁面采用的渲染方式。下面官方文檔的說明：

BackCompat：標準兼容模式關閉。
CSS1Compat：標準兼容模式開啟。

當document.compatMode等于BackCompat時，瀏覽器客戶區寬度是document.body.clientWidth；
當document.compatMode等于CSS1Compat時，瀏覽器客戶區寬度是document.documentElement.clientWidth。

2.3 用IE調試怪異模式

以上要用IE調，在chrome里我沒有看到不同模式的差別
是否可以理解成：怪異模式在IE不同的文檔模式中菜體現出區別？
是否可以理解成：怪異模式指的就是IE5？
深刻總結：
重要！
怪異模式（Quirks Mode）對 HTML 頁面的影響
IE“瀏覽器模式”和“文檔模式”的渲染測試
只有IE瀏覽器中才會有“瀏覽器模式”和“文檔模式”
IE下頁面樣式錯亂，其他瀏覽器正常

嚴格模式的div渲染大小不同（更大）：因為IE盒模型=內容+padding+border，當寬度設置為500，同時又有padding和border，那么內容的寬度便小于500；而嚴格模式下，按W3C標準盒模型，繪制出的div，內容寬度=500，再加上padding和border，實際渲染大小 > IE5 ；
嚴格模式：圖片底端3px空白(IE5的vertical-align是bottom 而嚴格模式是baseline) ；
嚴格模式：table中的font屬性會繼承于body的樣式（斜體、顏色、加粗、字體都會）；而怪異模式下，只繼承字體；
怪異模式下，行內元素（除了img，input，textarea，select，object）可以設置寬高！想象一下一個< span>標簽內無內容，但可以設置寬高，像div一樣顯示出來；
百分比的高度必須在父元素有聲明高度時使用
這點在以上分享的文章里分明是睜眼說瞎話，我在IE5-11中調出了不同的效果：
怪異模式子元素溢出：父元素也跟隨子元素調整高度

css：

        table.a {height: 300px;background-color: pink;}div.b {background-color: orange;width: 300px;height: 90%;display: block;}div.c {width: 200px;height: 200px;background-color: blue;}

html：

<body><table class="a"><tr><td><div class="b"><div class="c"></div></div></td></tr></table>
</body>

在這里插入圖片描述

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

2.4 css hack

不同瀏覽器，或同一瀏覽器的不同版本，會導致生成的頁面效果不一樣。CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。

史上最全的CSS hack方式一覽

hack 英[h?k]
v. 砍; 劈; 猛踢; 非法侵入(他人計算機系統);

3 網頁相關

3.1 meta標簽的屬性

常用meta整理

三個維度：
1） SEO優化：name屬性 - description / keywords
2）移動設備：name屬性 - viewport

name=“viewport” content=“initial-scale=1.0,maximum-scale=1.0 或者user-scalable=no”
用戶將不能放大/縮小網頁來看到全部的內容

3）網頁相關： charset、http-equiv - Content-Type屬性

<meta charset='utf-8' /> （聲明編碼）

http-equiv
content
content 屬性始終要和 name 屬性或 http-equiv 屬性一起使用。

優先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 關于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

3.2 響應式布局

（不同設備）
需要通過練習，改造項目代碼來加深理解。
用CSS實現響應式布局
響應式布局

3.3 自適應布局

（某塊固定，其余自適應）
自適應布局
（這個晚點看看）
這可能是史上最全的CSS自適應布局總結### 3.4 提高網頁加載速度

3.4 字符編碼方式

關于幾種編碼詳解（Unicode，UTF-8，GB系列）

歷史：
在這里插入圖片描述

如何才能區別 Unicode 和 ASCII ？計算機怎么知道三個字節表示一個符號，而不是分別表示三個符號呢？ → UTF-8的出現（Unicode 是一個符號集，規定了符號的二進制代碼，UTF-8規定了這個二進制代碼應該如何存儲。）
UTF-8 是 Unicode 的實現方式之一。

大神這篇必須要轉：
字符編碼筆記：ASCII，Unicode 和 UTF-8

3.5 頁面性能優化

3.5.1 CDN托管（京東配送服務）

教你如何使用免費的CDN服務

當您訪問托管在CDN上的網站時，網絡將使用離您地理位置最近的服務器智能地向您提供內容。

在這里插入圖片描述

3.5.2 利用多個域名來存儲網站資源

利用多個域名來存儲網站資源

3.5.3 圖片懶加載

存儲圖片真實src，當距離↓，替換
圖片懶加載實現及其原理

web前端頁面性能優化（提升頁面加載速度）

3.棄用元素

htm5新特性新增與棄用元素1
htm5新特性新增與棄用元素2

4.框架

4.1 iframe 行內（html5支持）

Web前端之iframe詳解
關注使用iframe的缺點
優點:

程序調入靜態頁面比較方便;
頁面和程序分離;

缺點：

iframe有不好之處：樣式/腳本需要額外鏈入，會增加請求。
另外用js防盜鏈只防得了小偷，防不了大盜。
iframe好在能夠把原先的網頁全部原封不動顯示下來,但是如果用在首頁,是搜索引擎最討厭的.那么你
的網站即使做的在好,也排不到好的名次!
如果是動態網頁，用include還好點！
但是必須要去除他的標簽！
框架結構有時會讓人感到迷惑，特別是在多個框架中都出現上下、左右滾動條的時候。這些滾動條除了會擠占已經特別有限的頁面空間外，還會分散訪問者的留心力。訪問者遇到這種站點往往會立刻轉身離開。他們會想，既然你的主頁如此混亂，那么站點的其他部分也許更不值得閱讀。
鏈接導航疑問。運用框架結構時，你必須保證正確配置所有的導航鏈接，如不然，會給訪問者帶來很大的麻煩。比如被鏈接的頁面出現在導航框架內，這種情況下訪問者便被陷住了，因為此時他沒有其他地點可去。
調用外部頁面,需要額外調用css,給頁面帶來額外的請求次數;

4.2 frameset框架集（多個框架frame）（html5廢棄）

frameset使用時要將body刪除，使用frameset代替body；
frame和frameset組合使用，且frame沒有結束標簽；
frameset可以嵌套使用；
html5廢棄使用frameset、frame、noframes，他們的使用破壞了可使用性和可訪問性；
HTML框架（frameset框架集和iframe內嵌框架）

框架的優點

重載頁面時不需要重載整個頁面，只需要重載頁面中的一個框架頁(減少了數據的傳輸，增加了網頁下載速度)
方便制作導航欄

框架的缺點

會產生很多頁面，不容易管理
不容易打印
瀏覽器的后退按鈕無效
代碼復雜,無法被一些搜索引擎索引到
多數小型的移動設備（PDA 手機）無法完全顯示框架
多框架的頁面會增加服務器的http請求
由于上面諸多缺點，因此不符合標準網頁設計的理念,已經被標準網頁設計拋棄

4.3 相關：window的onload事件

window.onload 是窗口（頁面）加載事件，當文檔內容完全加載完成會觸發該事件（包括圖像，腳本文件，css文件等），就調用的處理函數

window常見事件onload

網頁中的某些JavaScript腳本代碼往往需要在文檔加載完成后才能夠去執行，否則可能導致無法獲取對象的情況，為了避免類似情況的發生，可以使用以下兩種方式:
（1) 將腳本代碼放在網頁的底端，運行腳本代碼的時候，可以確保要操作的對象已經加載完成。
（2）通過window.onload來執行腳本代碼。

解釋以上

5. table布局

5.1 table布局案例

html中使用table元素
html頁面布局之table布局
display: table| table-cell | table-row
配合居中對齊
text-align: center;
vertical-align: middle;
table布局指南

5.2 優缺點

Table布局的優缺點
table要等其中的內容完全下載之后才會顯示出來，顯示比div+css布局慢。

6. 了解漸進增強和優雅降級

出發點是針對高/低版本瀏覽器

6.1 漸進增強和優雅降級之間有什么不同

漸進增強和優雅降級之間有什么不同
在這里插入圖片描述

6.2 前綴css3

當屬性超過一個參數值的時候，不同的屬性產生的作用是不一樣的。

渲染為每個角都是30像素寬10像素高的圓弧：

-webkit-border-radius: 30px 10px;

左上和右下角為30像素圓弧，左下角和右上是10像素圓弧：

 border-radius: 30px 10px;

將無前綴的css寫后面！
需警惕CSS3屬性的書寫順序

表示xx瀏覽器的私有屬性：

 1、-moz代表firefox瀏覽器私有屬性2、-ms代表ie瀏覽器私有屬性3、-webkit代表-webkit內核瀏覽器  常見瀏覽器有-safari、chrome

7. 微格式

什么是微格式？在前端構建中應該考慮微格式嗎？

在這里插入圖片描述