WEB前端開發最佳實踐(1)

NO IMAGE

前端程式碼重構

  • 刪除無用程式碼,精簡程式碼(不起作用的CSS樣式和廢棄的JavaScript函式)
  • 前端程式碼規範化,把CSS程式碼放到獨立的檔案中,在JS定義區域性變數,把部分全域性變數改變成區域性變數
  • 整理基礎類庫
  • 前端程式碼模組化,引入物件導向的思想來重構JavaScript程式碼,進一步明確公有介面和私有介面
  • 提高頁面效能:
    • 將部分不影響首頁展示的JS檔案延遲到頁面的載入後載入
      • 延遲載入

        setTimeout(“document.getElementById(‘my’).src=’include/php100.php’; “,3000);//延時3秒

        • 最後載入:把js外部引入的檔案放到頁面底部,來讓js最後引入,從而加快頁面載入速度
        • 動態載入

前端框架的使用

  • 專案需求
    • 調查專案是否需要AJAX操作
    • 是否需要模組化
    • 資料傳輸格式JSON或者XML
    • 需要支援的瀏覽器
    • 移動還是普通網站
    • 需要的UI模組(模態視窗,滑塊控制元件,進度條,提示框,分割框,幻燈顯示,自動填充)
  • 專案的特點
  • 框架的特點

HTML5相容

  • 編寫高質量,標準的HTML(標準校驗工具,JSLint)
  • 明確瀏覽器支援範圍
    • Chrome和Safari(Webkit核心)IE Tester(IE相容測試工具)IE9(IE DevToolbar)
  • 避免瀏覽器相容性的問題
    • 先考慮更改方案,使用沒有相容問題的程式碼
    • 考慮如何相容的問題
    • 相容IE,使用IE特有的條件表示式
    • 讓相容的程式碼獨立,提高程式碼的可維護性
  • HTML5新特性
    • 新標籤的相容,CSS3的相容,新增的API(使用html5shiv框架)
    • 新增加的介面的使用,必須新增條件判斷(Modernizr)
    • 多看Can I use

web效能分析

  • YSlow,pagespeed
    • 基於不同的規則評定網站整體效能評分
    • 給出提高網頁效能的建議
    • 統計頁面載入的元件
    • 頁面的統計資訊檢視
    • 相關效能分析工具集:JSLint,Smush.it
  • Chrome開發工具中有Network,Timeline,Profiles,Aidits
    • Network中可以檢視各資源請求和下載所用的時間
    • Timeline可以檢視網頁渲染和互動過程中個步驟所花費的時間,從資源到JS的解析執行,樣式的應用和繪製
    • Profiles中可以檢視網頁的CPU及記憶體佔有情況報告
    • Audits中提供了各種資源和配置優化的建議和未使用CSS規則的列表

程式碼和資源的壓縮和合並

  • 加快程式碼和資原始檔傳輸的方式
    • CDN分發
    • 快取
    • 壓縮程式碼和資原始檔(最優)
    • Gzip演算法(壓縮,header可以檢查是否開啟)
    • JS壓縮(UglifyJS壓縮和優化,YUI Compressor 僅壓縮,Closure Compiler壓縮和優化)
    • CSS(CSS Compressor,YUI Compressor)
    • HTML(HtmlCompressor使用時仔細調查和測試,避免壓縮工具和破壞)
    • 圖片資源壓縮(TinyPNG,JPEGmini,ImageOptim)
    • 使用ANT(構建程式碼和資源壓縮任務)
    • grunt壓縮(js:grunt-contrib-uglify,css:grunt-contrib-cssmin,圖片:grunt-contrib-imagemin)