Web最佳實踐閱讀總結(1)

smilesoul發表於2017-10-08
Web

介紹

最近開始刷一些書和題,此係列是介紹在讀Web最佳實踐的一些收穫和體會。

web前端發展現狀
  • 存在問題：
    • 程式碼組織混亂
    • 程式碼格式的問題突出
    • 頁面佈局隨意
    • 網站整體效能差，沒有意識到應用諸如快取，動態載入，指令碼壓縮，圖片壓縮等提高效能技術
  • 推薦做法：
    • 壓縮樣式表和指令碼檔案
    • 減少HTTP請求次數
    • 簡潔和符合W3C標準的HTML和CSS程式碼能減少瀏覽器解析的時間，加快渲染過程
    • 頁面請求數量越少，相對頁面的載入速度更快
    • 在JS程式碼中選擇效能更好的實現方案，如延遲載入，動態載入等技術;

  • 延遲載入

     <script type=”text/javascript” src=”" id=”my”></script> 
 <script type=”text/javascript”> 
 setTimeout(“document.getElementById(‘my').src='include/php100.php'; “,3000);//延時3秒 
 </script>複製程式碼
  • 最後載入
    • 引入外部js指令碼檔案時，如果放入html的head中,則頁面載入前該js指令碼就會被載入入頁面，而放入body中，則會按照頁面從上倒下的載入順序來執行javascript的程式碼，所以可以把js外部引入的檔案放到頁面底部，來讓js最後引入，從而加快頁面載入速度

  • 動態載入

    
     <scrīpt src='' id="s1"></scrīpt> 
     <scrīpt language="javascrīpt"> 
     s1.src="test.js" 
     </scrīpt>複製程式碼
    前端程式碼重構
  • 刪除無用程式碼，精簡程式碼（不起作用的CSS樣式和廢棄的JavaScript函式）
  • 前端程式碼規範化，把CSS程式碼放到獨立的檔案中，在JS定義區域性變數，把部分全域性變數改變成區域性變數
  • 前端程式碼模組化，引入物件導向的思想來重構JavaScript程式碼，進一步明確公有介面和私有介面
  • 提高頁面效能：
    • 將部分不影響首頁展示的JS檔案延遲到頁面的載入後載入
    • 刪除頁面中初始隱藏的區域，改為通過JS按需動態生成
    • 頁面中的部分圖片延遲載入
    • 調整CSS和JS檔案引用順序，即CSS在前，JS在後
    • 給靜態檔案設定快取，使用CSS Sprite，合併背景圖
    • 合併和壓縮釋出後的CSS和JS程式碼模組
  • 前端重構最佳實踐
    • 重構前一定要預測風險，最好先完善自動化測試程式碼
    • 重構的目的和範圍要明確，提高程式碼的可維護性，可讀性和效能
    • 最好先易後難，循序漸進。先修改諸如命名，格式等不涉及具體邏輯的內容
    • 重構過程中要持續測試，在多個瀏覽器測試，確保重構的部分功能正確。切記大量重構後再進行測試，因為大量重構後基本很難記得重構的邏輯，也可能遺漏部分測試用例
    • 效能提升，先進行檢測網站的整體效能並量化，找出效能瓶頸。重構過程中要持續監控效能，並進行對比
      前端框架的使用
  • 專案需求
    • 調查專案是否需要AJAX操作
    • 是否需要模組化
    • 資料傳輸格式JSON或者XML
    • 需要支援的瀏覽器
    • 移動還是普通網站
    • 需要的UI模組（模態視窗，滑塊控制元件，進度條，提示框，分割框，幻燈顯示，自動填充）
  • 專案的特點
  • 框架的特點
    程式碼質量
  • 編寫高質量，標準的HTML（標準校驗工具，ESLint, Flow, JSDoc, ts）
  • 明確瀏覽器支援範圍
    • Chrome和Safari IE Tester（IE相容測試工具
  • 避免瀏覽器相容性的問題
    • 先考慮更改方案，使用沒有相容問題的程式碼
    • 考慮如何相容的問題
    • 相容IE，使用IE特有的條件表示式(hack)
    • 讓相容的程式碼獨立，提高程式碼的可維護性
  • HTML5新特性
    • 新標籤的相容，CSS3的相容，新增的API（使用html5shiv框架）
    • CSS3本身不支援，會直接忽略
    • 新增加的介面的使用，必須新增條件判斷（Modernizr）
    • 多看Can I use
      web效能分析
  • YSlow，pagespeed
    • 基於不同的規則評定網站整體效能評分
    • 給出提高網頁效能的建議
    • 統計頁面載入的元件
    • 頁面的統計資訊檢視
    • 相關效能分析工具集：Smush.it
  • Chrome開發工具
    • Network中可以檢視各資源請求和下載所用的時間
    • Timeline可以檢視網頁渲染和互動過程中個步驟所花費的時間，從資源到JS的解析執行，樣式的應用和繪製
    • Profiles中可以檢視網頁的CPU及記憶體佔有情況報告
    • Audits中提供了各種資源和配置優化的建議和未使用CSS規則的列表
  • 加快程式碼和資原始檔傳輸的方式
    • CDN分發
    • 快取(meta)
    • 壓縮程式碼和資原始檔（最優）
    • Gzip演算法（壓縮，header可以檢查是否開啟）
    • JS壓縮（UglifyJS壓縮和優化，YUI Compressor 僅壓縮，Closure Compiler壓縮和優化）
    • CSS(CSS Compressor,YUI Compressor)
    • HTML(HtmlCompressor使用時仔細調查和測試，避免壓縮工具和破壞)
    • 圖片資源壓縮（TinyPNG，JPEGmini，ImageOptim)

相關文章