1.背景介紹
大概從2000年以來，互聯網在中國發展越來越快，隨著高層提出“互聯網+”的概念以后，互聯網的發展更是迎來了一個很大的發展契機。隨之而來的，是網名數量的增加，網站日訪問量的提升。這些繁榮的背后，需要的是良好的網站性能的提高，以滿足較好的用戶體驗和降低日常維護的成本。如何做到呢？今天同大家分享、討論一下前端這方面值得注意的地方！
2.知識剖析
2.1什么是網站的性能？
用戶訪問網站的整個流程中：用戶輸入網站域名，通過DNS解析，找到目標服務器IP，請求數據經互聯網達到目標服務器，目標服務器收到請求數據，進行處理（執行程序、訪問數據庫、文件服務器等）。處理完成，將響應數據又經互聯網返回給用戶瀏覽器，瀏覽器得到結果進行計算渲染顯示給用戶。這個整個過程就時刻就體現著網站的性能。更直觀地講，訪問一個網頁的快慢，與之交互得到的回饋的快慢，就是網站的性能好壞的體現。
一般把整個過程，分為三段路徑：
1、第一段在用戶和瀏覽器端，主要負責發出用戶請求，以及接受響應數據進行計算渲染顯示給用戶；
2、第二段在網絡上，負責對請求數據、響應數據的傳輸；
3、第三段在網站服務器端，負責對請求數據進行處理（執行程序、訪問數據庫、文件等），并將結果返回；
2.2 前端有哪些可以進行優化的地方
從上邊的分析中我們可以看出，如果要優化一個網站的性能，它將是一個綜合性的處理過程，涉及到前端，后端，網絡等各種因素。對于我們前端而言，可以做些什么呢？
一、 我們可以想辦法減少一個頁面訪問所產生的http連接次數。一個完整的請求需要經過 DNS尋址、與服務器建立連接、發送數據、等待服務器響應、接收數據這樣一個 “漫長” 而復雜的過程。每一次的請求，都意味著時間上和資源上的一次整體消耗。減少請求，對于提升性能，是個不錯的出發點。
減少HTTP請求的途徑：
1. 簡化頁面：保持頁面簡潔、減少資源的使用是最直接的辦法。不過追求華麗的當下，做到這一點似乎有些為難。
2. 合理設置 HTTP緩存：盡可能的讓資源能夠在緩存中待得更久，越多的緩存，意味著越少的向后端發送的請求數量。
3. 圖片的壓縮：我們做任務時遇到用到過的CSS Sprites。將網站的圖片，尤其一些小圖標合并為一張圖片，通過背景圖片和背景定位的方法渲染到頁面。還有iconfont阿里矢量圖標庫，將圖片轉化成樣式，或者字體等方法，也是個不錯的實現方法。
4. 資源合并與壓縮：在引入外部js、css文件時，想辦法減少js、css文件的數量，將多個js或者css文件可能地進行合并。使用框架的js時，選擇min版來引入，不使用完整版。提高css代碼的復用性等。使用一些壓縮工具對其大小進行壓縮。
二、 使用外部CSS樣式，并將外部CSS樣式的放在HEAD中。不使用內聯樣式。減少使用內部樣式。
三、 可以將外部腳本js文件置底。在body結束標簽之前加載，比影響整個靜態頁面的渲染工作。
使用CDN加載一些框架中的js或者css文件，CDN（content distribute network）的本質仍然是一個緩存
四、 Lazy Load懶加載的方法，用在對圖片和js文件的加載處理上。
五、 使用異步請求，在幕后進行數據的傳輸，不影響頁面的加載渲染過程。
六、 在js文件中減少使用“+”進行字符串的拼接。因為每次運行都會開辟新的內存并生成新的字符串變量，然后將拼接結果賦值給新變量。如果字符串不多的情況下可以使用“+”進行拼接。但是內容過多時，相比更為高效的做法是使用數組的 join方法，即將需要拼接的字符串放在數組中最后調用其 join方法得到結果。
七、 減少作用域鏈查找，將全局作用域中的變量通過在局部作用域中賦值給局部變量的方法，來減少變量向上查找的次數。
2.3 控制器的作用
控制器的作用主要有兩個：第一個，scope作用域對象初始化 ；第二個，給scope作用域對象通過一些方法或者函數增加行為 。
3.常見問題
問題: 網頁中影響性能的地方在哪里？
4.解決方案
網頁的生成過程，大致可以分成五步：
1. HTML代碼轉化成DOM
2. CSS代碼轉化成CSSOM（CSS Object Model）
3. 結合DOM和CSSOM，生成一棵渲染樹（包含每個節點的視覺信息）
4. 生成布局（layout），即將所有渲染樹的所有節點進行平面合成
5. 將布局繪制（paint）在屏幕上
以上這五步里面，第一步到第三步都非常快，耗時的是第四步和第五步。 "生成布局"（flow）和"繪制"（paint）這兩步，合稱為"渲染"（render）。重新渲染，就需要重新生成布局和重新繪制。前者叫做"重排"（reflow），后者叫做"重繪"（repaint）。重排和重繪會不斷觸發，這是不可避免的。但是，它們非常耗費資源，是導致網頁性能低下的根本原因。 提高網頁性能，就是要降低"重排"和"重繪"的頻率和成本，盡量少觸發重新渲染。
5.編碼實戰
本次小課堂理論講解較多，暫無demo！
6.擴展思考
問題: 在網站的性能中，前端網頁性能所占的比重？
7.參考文獻
參考一：web前端性能優化總結
參考二:網頁性能管理詳解
參考四：百度百科
8.更多討論
討論點：大家對于網站性能的優化還有哪些認識，分享一下？
視頻鏈接：https://v.qq.com/x/page/l0504c6rp0r.html
PPT鏈接：https://ptteng.github.io/PPT/PPT/js-10-Website%20performance%20optimization.html#/
文本鏈接：http://www.jnshu.com/daily/23455
