一、簡單介紹
這本書標榜的是現在前端技術，但是里面設計到的部分技術還是相對比較落后的，但不妨礙這本書成為一本好的查漏補缺的指南，如果是在實際的工作中這本書可以說是起不到什么的效果，但是對於即將畢業，或者剛剛出來工作，又或者是求職找工作的人來說可以起到極好的引導作用，日常面試的各個方面都有涉及(僅針對小公司的面試)，但是不深刻。里面重點展示的是技術的應用層面上的東西，所以也比較好理解，一些像設計模式，算法，數據結構，JS語法深入部分這本書不曾提及，所以如果為了全面了解，為了找工作，建議讀一讀這本書；為了更好地工作，還是建議大家抽空看看經典的讀物。
二、重點知識梳理
2.1 web Component
一種原生的支持模塊化的方法，但是目前僅僅在chrome新版得到全面的支持，其他瀏覽器暫時不支持此特性，這個特性的好處是可以直接將模塊與頁面進行解耦操作，目前雖然原生沒有全面的支持，但是通過webpack打包等形式都已經可以實現了，例如vue中的模塊化開發就是基於這個思想。目前雖然不是主流，但是未來可能會成為一種標准。
用法是通過document.registerElement接口來注冊。
例如，我們注冊一個插件名為X-foo，那么我們這樣操作
document.registerElement('x-foo', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() { ... }
},
...
})
})
如下形式去調用
<div> <x-foo></x-foo> </div>
2.2 怎樣加快頁面的顯示
1. 使用異步的方式來加載頁面，先讓一部分的內容先展示出來，再根據用戶的操作加載更多的內容
2. 將圖片替換成為壓縮比更高的webp格式圖片
3. 打開重復的頁面使用304狀態碼，達到利用瀏覽器緩存
2.3 頁面是怎樣從請求發起到展現出來的
1. 用戶輸入一個網址，瀏覽器開啟一個線程處理請求，對用戶輸入的URL進行分析處理，如果是使用了HTT協議的話，那么會用HTTP來處理
2. 調用JavaScript引擎的方法，例如，webview調用loadUrl方法，分析並加載這個URL
3. 連同瀏覽器的cookie,userAgent等信息向網站目的地IP發起GET請求
4. 進入后台web服務器處理請求
5. 進入部署好的后台應用，找到對應的處理邏輯，這期間可能會讀取服務器緩存或者讀取數據庫
6. 服務器處理請求並返回響應報文，瀏覽器的緩存資源的時間會跟服務器的最后修改記錄時間做對比，一致返回304，否則返回200
7. 如果為200的時候，下載對應的HTML文檔，304直接讀取緩存
2.4 瀏覽器的組成結構
示意圖如下：
1. 如圖我們可以知道瀏覽器引擎和JavaScript引擎不是同一回事，這個也就說明了為什么JavaScript是單線程但是瀏覽器可以異步發起請求的問題。
2. 我們重點關注的是渲染引擎和一些存儲，因為其他部分開發者無法操作
2.5 各個瀏覽器渲染引擎之間的差異與渲染引擎是怎樣工作的
以webkit內核和Gecko內核為例：
對比之后我們可以發現Gecko內核是需要先解析HTML然后再解析CSS，webkit內核是並行執行的。所以webkit內核在解析CSS這方面會相對高效
2.6 CSS的權重問題
!important(最高權重) > 內聯樣式規則(權重1000) > id選擇器(權重100) > 類選擇器(權重10) > 元素選擇器
2.7 cookie的種類與區別
cookie一般是有兩種:session cookie和持久型 cookie
1. session cookie一般未設置過期時間，只要關閉瀏覽器窗口，cookie就會消失
2. 持久型cookie一般會設置cookie過期時間，關閉后再次打開瀏覽器窗口都有效
2.8 前端開發工具
1. 前端高效開發工具：vscode、webstorm、sublime
2. 前端調試工具: chrome devtool
3. 網絡輔助工具:fiddler charles wireshark
4. 前端遠程調試工具：vorlon.js weinre VConsole
2.9 web安全知識有哪些？大致介紹一下？
主要的web安全有XSS,SQL注入，CSRF
XSS:通常是由頁面可解析的內容未經過處理就直接插入到頁面導致。例如插入document.cookie來獲取cookie
SQL注入：輸入框的內容未經過處理就直接傳給數據庫，導致SQL插入到數據庫中
CSRF：舉一個例子，假設有一個假冒網站，用戶向其中提交用戶名和密碼，這個時候假冒網站就會向真實的網站發起請求，跳轉到真實的網站，但是這個時候假冒網站已經就記錄下了用戶的用戶名和密碼。
2.10 網絡劫持
前端主要的網絡劫持有DNS劫持和HTTP劫持
1. DNS劫持：DNS被篡改解析的路徑導致網站解析出錯，目前這種劫持較少，這要發生這種劫持是運營商所為
2. HTTP劫持：一般來說這種劫持的HTML，CSS ,JS都是正常的。但是在網站response的時候，網絡運營商會劫持添加一些腳本，主要表現在使用HTTP請求有時候會莫名其妙的出現一些小廣告之類的。解決的方法是HTTP換成HTTPS
2.11 native交互協議
web調用native
主要web調用native的流程是通過uri和addJavascriptInterface接口來實現的
主要的途徑是uri，是通過url向native發起請求，native調用系統的底層來實現的
native協議調用web
原理是:HTML5編寫的Javascript暴露到全局中，然后在native中調用loadUrl方法來實現調用javascript
2.12 怎樣提交元素的加載解析？
1. 直接通過懶加載來實現
2. 通過使用AMP來實現HTML元素的懶加載（對於video,table等耗時的元素這樣做會加快頁面的加載速度，但是目前這些方案並不是前端的主流解決方法【博主觀點】）
2.13 HTML5中新增了哪些新的標簽或者屬性？
<header> <video> <source /> <article> <time> <datalist> <command />
<input>新增了 autocomplete，placeholder，autofocus,required屬性，新增了email,number,color,range,search,date
三、總體評價
這本書說不上好，也說不上特別的不好，總體上就是用來查漏補缺的，面試可用。書中的內容越往后越稀薄，建議讀讀前幾章就好了。