優秀前端須要具有的經驗

一位優秀的前端工程師不只要考慮 web 技術和語言，而且還要了解全部不一樣的組件、系統和概念 。

頂級前端工程師須要具有的經驗和最佳實踐（這纔是市場急需的前端）：

1. 瞭解 DNS 解析，充分利用 CDN，使用多個域名來完成資源的請求以縮短加載時間；

一、在瀏覽器中輸入www.qq.com域名，操做系統會先檢查本身本地的hosts文件是否有這個網址映射關係，若是有，就先調用這個IP地址映射，完成域名解析。 

二、若是hosts裏沒有這個域名的映射，則查找本地DNS解析器緩存，是否有這個網址映射關係，若是有，直接返回，完成域名解析。 

三、若是hosts與本地DNS解析器緩存都沒有相應的網址映射關係，首先會找TCP/ip參數中設置的首選DNS服務器，在此咱們叫它本地DNS服務器，此服務器收到查詢時，若是要查詢的域名，包含在本地配置區域資源中，則返回解析結果給客戶機，完成域名解析，此解析具備權威性。 

四、若是要查詢的域名，不禁本地DNS服務器區域解析，但該服務器已緩存了此網址映射關係，則調用這個IP地址映射，完成域名解析，此解析不具備權威性。 

五、若是本地DNS服務器本地區域文件與緩存解析都失效，則根據本地DNS服務器的設置（是否設置轉發器）進行查詢，若是未用轉發模式，本地DNS就把請求發至13臺根DNS，根DNS服務器收到請求後會判斷這個域名(.com)是誰來受權管理，並會返回一個負責該頂級域名服務器的一個IP。本地DNS服務器收到IP信息後，將會聯繫負責.com域的這臺服務器。這臺負責.com域的服務器收到請求後，若是本身沒法解析，它就會找一個管理.com域的下一級DNS服務器地址(qq.com)給本地DNS服務器。當本地DNS服務器收到這個地址後，就會找qq.com域服務器，重複上面的動做，進行查詢，直至找到www.qq.com主機。 

六、若是用的是轉發模式，此DNS服務器就會把請求轉發至上一級DNS服務器，由上一級服務器進行解析，上一級服務器若是不能解析，或找根DNS或把轉請求轉至上上級，以此循環。不論是本地DNS服務器用是是轉發，仍是根提示，最後都是把結果返回給本地DNS服務器，由此DNS服務器再返回給客戶機。 

來源： http://369369.blog.51cto.com/319630/812889/

CDN的全稱是Content Delivery Network，即內容分發網絡。其目的是經過在現有的Internet中增長一層新的網絡架構，將網站的內容發佈到最接近用戶的網絡「邊緣」，使用戶能夠就近取得所需的內容，提升用戶訪問網站的響應速度。CDN有別於鏡像，由於它比鏡像更智能，或者能夠作這樣一個比喻：CDN=更智能的鏡像+緩存+流量導流。於是，CDN能夠明顯提升Internet網絡中信息流動的效率。從技術上全面解決因爲網絡帶寬小、用戶訪問量大、網點分佈不均等問題，提升用戶訪問網站的響應速度。
      爲更好地理解CDN，讓咱們看一下CDN的工做流程。當用戶訪問已經加入CDN服務的網站時，首先經過DNS重定向技術肯定最接近用戶的最佳CDN節點，同時將用戶的請求指向該節點。當用戶的請求到達指定節點時，CDN的服務器（節點上的高速緩存）負責將用戶請求的內容提供給用戶。具體流程爲: 用戶在本身的瀏覽器中輸入要訪問的網站的域名，瀏覽器向本地DNS請求對該域名的解析，本地DNS將請求發到網站的主DNS，主DNS根據一系列的策略肯定當時最適當的CDN節點，並將解析的結果（IP地址）發給用戶，用戶向給定的CDN節點請求相應網站的內容。

       CDN的實現須要依賴多種網絡技術的支持，其中負載均衡技術、動態內容分發與複製技術、緩存技術是比較主要的幾個，下面讓咱們簡單看一下這幾種技術。

來源： http://blog.csdn.net/ligaofeng/article/details/17139481

國內百度、新浪、360等都有可用的 前端 CND資源庫；百度 官網：http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs

1. 設置 HTTP Headers（Expires, Cache-Control, If-Modified-Since）；
2. 遵循 Steve Souders 給出的所有規則（High Performance Websites）

　　規則一：減小HTTP請求。這本書的規則順序是按照其重要性來排名的，減小HTTP請求做爲第一個規則，足見其重要性。根據黃金法則，減小組件數量從而減小HTTP請求是最有效的性能優化方式，其中有幾項技術值得提一下：

1. CSS Sprites。應該前端人都比較熟悉了，把圖片整合到一個大圖裏，利用background-position來定位。

2. data:URL。值得一說把圖片變爲內聯的，減小了圖片請求，webpack裏圖片小於8kb就會轉爲base64的data:URL。

3. 合併腳本和CSS。

　　規則二：使用CDN。這個規則不用多說，分發內容使之更靠近終端用戶，減小了請求時間。

　　規則三：添加Expires頭。善用緩存，給長久不變的內容組件設置有效期較久的Expires頭。

　　規則四：壓縮組件。利用gzip等內容編碼對文檔或組件進行壓縮，一般能將相應數據量減小70%左右。

　　規則五：將樣式表放在頂部。頁面在打開工程中逐步呈現，用戶會以爲頁面快一些，也讓用戶在等待過程當中有一個良好的反饋。把CSS放在底部的話有可能出現白屏現象。

　　規則六：將腳本放在底部。頁面下載腳本時會阻止其餘內容下載與呈現，以防止瀏覽器的重繪重排。因此把腳本放在頁面的底部不會阻止頁面內容的呈現，並且頁面一些可視化組件能夠儘早下載而不被阻塞。

　　規則七：避免使用CSS表達式。CSS表達式會進行頻繁的求值，致使了性能低下。

　　規則八：使用外部JavaScript和CSS。純粹而言，內聯更快一些，由於知足了規則一的減小HTTP請求，可是這個問題上，必定要考慮緩存帶來的性能優化，外部文件頗有可能被緩存下來，從而提高了性能。

　　規則九：減小DNS查找。善用DNS緩存，好比持久鏈接。

　　規則十：精簡JavaScript。移除沒必要要的字符空格，咱們常見的.min.js就是如此。

　　規則十一：避免重定向。3xx的響應狀態碼錶明着一股重定向的響應。其中URL結尾缺乏斜線形成的重定向須要特別注意，不要由於這一點失誤損傷性能。

　　規則十二：刪除重複腳本。

　　規則十三：配置ETag。提及這個不得不說條件請求If-Modified-Since和If-None-Match，都是用來進行緩存再驗證。ETag的問題是服務器構造ETag時，儘管兩個文件徹底同樣，但若是處於不一樣的服務器的話仍是會有不一樣的ETag，增長了HTTP進行請求下載的次數，這對於後臺是服務器集羣的網站性能損傷很大。

　　規則十四：使Ajax可緩存。雖然Ajax是異步的，但也不能讓等待響應的時間過長。優化準則的話參見上面的性能準則，其中善用緩存依然是咱們重點關注的。

來源： http://www.phpxs.com/post/4326

1. 知道如何解決 PageSpeed、YSlow、Chrome Dev Tools Audit、Chrome Dev Tools Timeline 顯示的全部問題；
2. 知道什麼任務該放在服務端，什麼任務該放在客戶端；
3. 知道使用緩存，DNS 預取和資源預加載技巧；
4. 精通 JavaScript，知道什麼時候本身寫什麼時候借組別人的框架或代碼，優劣明辨；
5. 熟練使用現代 MVC JavaScript 框架（例如 AngularJS EmberJS React 等），圖形庫（D三、SnapSVG 等），DOM 操做類庫（jQuery、Zepto 等），惰性加載或者模塊管理類庫（例如 RequireJS、CommonJS 等），任務調用工具（例如 Grunt Gulp 等），包管理工具（Bower Componentjs）以及測試工具（Protractor、Selenium 等）；
6. 掌握圖片的格式，每種格式的優勢，適用的場景；知道圖片優化技巧以及加載策略（雪碧圖、懶加載、緩存刷新以及 PNG 交錯）；
7. 熟悉 CSS 標準、最新的轉換工具積極策略規範（好比 BEM、SMACSS、OOCSS 等）；
8. JavaScript 的計算機科學（內存管理、單進程特性、垃圾回收算法、定時器、做用域、提高以及設計模式）。

換句話說，若是說精通 HTML+CSS+JS，瞭解後端知識，只是60分的合格前端；那麼要想成爲受追捧、拿高薪的80分優秀前端，要對業務需求和、架構設計有真正的運用；而100分的頂級前端，則必需要可以兼顧技術和設計，更接近「之前端開發爲主的全棧工程師」了。

http://zhuanlan.zhihu.com/FrontendMagazine/20598089?

來自爲知筆記(Wiz)