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規範: github.com/airbnb/java…
• Eslint規範: eslint.org/docs/rules/
• Beachmark.js性能測試: benchmarkjs.com/docs#toc