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

介紹

---

最近開始刷一些書和題,此係列是介紹在讀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)

---

• Airbnb規範: https://github.com/airbnb/jav...
• Eslint規範: https://eslint.org/docs/rules/
• Beachmark.js性能測試: https://benchmarkjs.com/docs#toc