而整個WPO其實是對瀏覽器(browser)的加載(load)和解析(parse)過程中的一些消耗行為進行優化, 而load和parse在整個瀏覽器工作過程中又互相糾結互相作用.

　　在這篇文字中討論的更多是FE們能夠伸手處理或者通過達成共識的方法來進行快速推動Tech們協助的一些事情.

　　OK, 我們慢慢把瀏覽器的工作過程掰細了看吧.

　　首先, 我們先整一個瀏覽器如何找到一個網站的簡易工作原理 – DNS查詢:

　　首先當用戶在瀏覽器的地址欄中敲入了網站的網址 ( 比如: alibaba.com ) ,這時瀏覽器會首先通過訪問的域名來定位到IP (DNS) 從而找到去哪里獲取資源, 這時, 瀏覽器會依次進行如下查找:

　　1. 瀏覽器緩存 :

　　瀏覽器首先會在自己的緩存中查找有沒有對應的域名 – IP匹配, 如果好運的話, 這里就可以直接嘗試去訪問資源了, 如果運氣平平則往下走吧.

　　2. 系統緩存 :

　　瀏覽器緩存中沒有命中, 瀏覽器會告訴操作系統:”嘿, 我在我自己口袋里沒找到, 可能丟了, 我得去你那看看”, 然后, 一個系統進程(?)調取系統中的DNS緩存進行查詢, 重復上一條的運氣判斷…

　　3. 路由器緩存 :

　　走到這, 運氣還真不太好啊, 操作系統也沒轍了, 那怎么辦呢, 向路由去要要看吧… 重復運氣判斷…

　　4. ISP DNS緩存 :

　　好吧, 真不知道說運氣好還是運氣不好了, 不廢話, 去ISP (網絡提供商) 的DNS緩存服務器中尋找了, 一般情況下, 在ISP端的緩存中都能找到相應的緩存記錄了, 不該這么背了, 或者… 您的ISP有夠菜…

　　5. 遞歸搜索…

　　最無奈的情況發生了, 在前面都沒有辦法命中的DNS緩存的情況下, ISP的DNS服務器開始從root域名服務器開始進行遞歸, 順序是從.com頂級域名服務器到alibaba的域名服務器, 再沒找到…好吧, 您認為您要去的網站真的公開存在么…?

　　要強調的是, 不只是對網站第一次的域名訪問需要做這樣一次查詢工作, 在對頁面中的資源引用的域名解析時一樣會有這樣的一系列工作. 最明顯的就是啟用全新域名來做靜態資源存儲服務時, 基本上上述的1 – 5個步驟都得走上幾遍. 才能讓新域名在各DNS緩存服務器上留下記錄.

　　在這個話題上, 關于DNS的類似系統級的解決方案不是FE能夠控制得了的, 我們q可以在涉及到DNS時有些小Tips來從中做些事情.

　　好吧, 第一項.DNS相關的優化:

　　常規實踐 : DNS解析的復雜性決定了不當的使用多域名獲取資源會造成不必要的性能開銷. 在WPO中, 很多優化工作是很藝術的, 在DNS和HTTP這兩方面優化是就可以看到這個神奇的藝術性:

　　DNS的優化, 當然是盡可能少的造成DNS查詢開銷, 而在HTTP優化的策略中有一項優化措施是避免單域名下連接數的缺陷來進行資源多通道下載, 實施的細節會在 中詳細介紹, 在這里只是簡單的提一下, 靜態資源多域名服務可以繞過瀏覽器單域名載入資源時并行連接數的限制, DNS優化需要我們盡可能少的域名解析, HTTP優化時需要我們適當的使用多域名服務, 那怎么樣讓兩個優化實踐都能夠比較好的實施呢? [todo]

　　優雅降級 : 在某些現代瀏覽器 ( Google Chrome, Firefox 3.5+ ) 中, 已經能夠支持DNS的預取了, 怎么個預取呢? 就是在瀏覽器加載網頁時, 對網頁中的或者的href屬性中的域名進行后臺的預解析(上文中的 1- 5步), 并且將解析結果緩存在瀏覽器端, 當用戶在真正點擊鏈接時, 省去在當下的DNS解析消耗, 把這個消耗過程轉嫁到用戶無法感知的瀏覽過程中去.

　　第一, 現代瀏覽器已經支持且默認打開了DNS Prefetch的功能. 當然也可以通過瀏覽器的配置來管理該功能:

　　用Firefox3.5+可以這樣: 瀏覽器默認就打開了HTTP協議下的DNS預取功能, 默認關閉HTTPS協議下的DNS預取功能, 可通過 about:config 的 network.dns.disablePrefetch 和network.dns.disablePrefetchFromHTTPS <兩個選項來控制兩種協議下的預取功能.

　　Chrome管理DNS Prefetch方法暫時缺少.

　　第二, 可以通過用meta信息來告知瀏覽器, 我這頁面要做DNS預取:

　　第三,可以使用link標簽來強制對DNS做預取:

　　[todo DEMO]

        注：更多精彩教程請關注武林網電腦教程欄目，武林網電腦辦公群:(已滿！)歡迎你的加入