讀《現代前端技術解析》有感

1、簡單介紹

這本書標榜的是如今前端技術，可是裏面設計到的部分技術仍是相對比較落後的，但不妨礙這本書成爲一本好的查漏補缺的指南，若是是在實際的工做中這本書能夠說是起不到什麼的效果，可是對於即將畢業，或者剛剛出來工做，又或者是求職找工做的人來講能夠起到極好的引導做用，平常面試的各個方面都有涉及(僅針對小公司的面試)，可是不深入。裏面重點展現的是技術的應用層面上的東西，因此也比較好理解，一些像設計模式，算法，數據結構，JS語法深刻部分這本書未曾說起，因此若是爲了全面瞭解，爲了找工做，建議讀一讀這本書；爲了更好地工做，仍是建議你們抽空看看經典的讀物。

 2、重點知識梳理

 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

 

3、整體評價

這本書說不上好，也說不上特別的很差，整體上就是用來查漏補缺的，面試可用。書中的內容越日後越稀薄，建議讀讀前幾章就行了。