1、前端結構組織與檔案命名規范

前端結構組織具有如下原則：

• 同一專案中代碼的組織結構要清晰
• 同型別檔案歸類到相同的檔案夾中
• 檔案命名規則須統一并且命名要有意義

HTML 命名規范

• HTML 代碼所有的標簽名和屬性應該都為小寫
• 屬性值應該用引號括起來
• 元素的 id 與 class 按照特定規范命名
• 代碼縮進 4 個空格
• 給 HTML 代碼塊添加必要注釋

CSS 命名規范

• 盡量使用 class 選擇器進行樣式設定
• 類命名時取父元素的 class 名作為前綴，使用-連接
• 類名與樣式之間以空格進行分割
• 添加 CSS 代碼注釋

JavaScript 命名規范

• 變數名區分大小寫，第一個字符不允許是數字，不允許包含空格和其他標點符號
• 盡量使用有實際意義的命名
• 禁止使用 JavaScript 關鍵詞、保留字全名
• 添加 JavaScript 代碼注釋

2、 代碼及性能優化

1. HTML 代碼優化

優化 HTML 代碼的目的一方面是使網站對搜索引擎更友好，一個漂亮的前端網站是用戶友好的，并且在各方面都進行了優化的網站是搜索引擎友好的，是理想的網站，另一方面也是對代碼的維護提供便利，一個規范的網頁的 HTML 代碼應該盡可能滿足如下的條件：

1. 正確閉合 HTML 標簽，如 <div>盒子</div>，
2. HTML 代碼層級間合理縮進，統一用兩個或者四個空格縮進，
3. 屬性值需要使用雙引號，如<div id="mydiv">盒子</div>
4. 結構與樣式進行有效的分離，即 HTML 和 CSS 檔案的分離，
5. 結構與行為進行有效的分離，即 HTML 和 JS 檔案的分離，
6. 使用語意化標簽，如頭部標簽<header>，
7. 洗掉多余容器元素，代碼層次少，
8. 避免使用 table 進行頁面的布局，換成用 DIV+CSS，此外，還可以通過在線網站（http://validator.w3.org/）來對 HTML 代碼進行格式化驗證，

2. SEO優化

• 合理的 title 、 description 、 keywords ：搜索對著三項的權重逐個減小， title 值強調重點即可，重要關鍵詞出現不要超過2次，而且要靠前，不同頁面 title 要有所不同； description 把頁面內容高度概括，長度合適，不可過分堆砌關鍵詞，不同頁面 description 有所不同；keywords 列舉出重要關鍵詞即可
• 語意化的 HTML 代碼，符合W3C規范：語意化代碼讓搜索引擎容易理解網頁
• 重要內容 HTML 代碼放在最前：搜索引擎抓取 HTML 順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容一定會被抓取
• 重要內容不要用 js 輸出：爬蟲不會執行js獲取內容
• 少用 iframe ：搜索引擎不會抓取 iframe 中的內容
• 非裝飾性圖片必須加 alt
• 提高網站速度：網站速度是搜索引擎排序的一個重要指標

3. CSS優化

• CSS 樣式多余樣式去除、結構優化
• 將樣式表放在頁面頂部
• 使用 less scss 運算式
• 使用 link 不適用 @import 引入樣式
• 壓縮 css
• 禁止使用 gif 圖片實作 loading 效果（降低 CPU 消耗，提升渲染性能）
• 使用CSS3 代碼代替 JS 影片（盡可能避免重繪重排以及回流）
• 對于一些小圖示，可以使用 base64 位編碼，以減少網路請求，
• 頁面頭部的

4. server服務端優化

• 減少 HTTP 請求，合并檔案、雪碧圖
• 減少 DNS 查詢，使用快取
• 減少 Dom 元素的數量
• 使用 CDN
• 配置 ETag ,http快取的手段
• 對組件使用 Gzip 壓縮
• 減少 cookie 的大小

5. JavaScript方面優化

• 代碼與結構分離：即把 HTML 和 JavaScript 進行有效分離，這里有兩種意義上的分離，一種是就在 HTML 中分離 JavaScript，另外一種是在JavaScript 中分離HTML，
• 樣式與結構的分離：即把 CSS 和 HTML 進行有效分離，這里指在 JavaScript 中將CSS 和 HTML 進行分離，
• 資料與代碼分離：也可以認為是前后端分離的表現，后臺介面只負責回傳json 格式的資料，不會回傳帶標簽甚至是帶樣式或帶 JavaScript 的組合資料，而且模擬資料可以用 json 檔案或者相關插件如 mock，這樣的好處就是將資料從代碼中抽離出來，當資料變化時不能影響代碼，
• JavaScript DOM 優化：盡可能減少重排和重繪；用 cssText 改變樣式；批量修改 DOM；提升檔案加載速度，
• 將腳本放到頁面底部
• 將 js 外部引入
• 壓縮 js
• 使用 Eslint 語法檢測
• 減少 Dom 的操作
• 熟練使用設計模式
• 禁止使用 iframe （阻塞父檔案 onl oad 事件）
• 頁面中空的 href 和 src 會阻塞頁面其他資源的加載
• 網頁 gzip ， CDN 托管， data 快取 ，圖片服務器

6.Webpack優化

• 代碼壓縮插件 UglifyJsPlugin
• 服務器啟用 gzip 壓縮
• 按需加載資源檔案 require.ensure
• 優化 devtool 中的 source-map
• 剝離 css 檔案，單獨打包
• 去除不必要插件，通常就是開發環境與生產環境用同一套組態檔導致
• 開發環境不做無意義的作業如提取 css 計算檔案hash等
• 配置 devtool
• 優化構建時的搜索路徑 指明需要構建目錄及不需要構建目錄

7. 加載優化：

• 合并CSS、JavaScript
• 合并小圖片、使用精靈圖
• 快取一切可快取的資源
• 使用外鏈式參考CSS、JavaScript
• 壓縮HTML、CSS、JavaScript
• 啟用GZip
• 使用首屏加載、按需加載、滾屏加載
• 通過Media Query加載
• 增加Loading進度條
• 減少Cookie
• 避免重定向
• 異步加載第三方資源

8. 頁面渲染優化

• HTML 檔案結構層次盡量少，最好不深于 6 層
• 腳本盡量放后邊，避免組織頁面加載
• 少量首屏樣式可以放在便簽內
• 樣式結構層次盡量簡單
• 腳本減少 DOM 操作，減少回流，盡量快取訪問 DOM 的樣式資訊
• 盡量減少 JS 修改樣式，可以通過修改 class 名的方式解決
• 減少 DOM 查找，快取 DOM 查找結果
• 影片在螢屏外或頁面滾動時，盡量停止

9. 圖片優化

• 使用智圖
• 使用（CSS3、SVG、IconFont）代替圖片
• 使用Srcset
• webP優于JPG
• PNG8優于GIF
• 圖片不寬于640

10. 腳本優化

• 減少重繪和回流
• 快取Dom選擇與計算
• 盡量使用事件處理，避免批量系結事件
• 盡量使用ID選擇器
• 使用touchstart、touchend代替click

3、前端資源優化

• Sprite 拼合圖: CSS Sprite，中文也叫 CSS 精靈、雪碧圖，是一種將零散的背景圖合并成一張大圖，再利用 CSS 的 background-position 屬性進行背景的定位從而達到減少圖片請求數量達到加快加載速度的網頁應用處理方式，
• 壓縮：代碼壓縮、打包工具(壓縮 JavaScript、壓縮 CSS)
• 預加載：預加載簡單來說就是將所有所需的資源提前請求加載到本地，這樣后面在需要用到時就直接從快取取資源，
• 懶加載：首屏加載，技術上顯示要用的技術就是圖片懶加載，即到可視區域再加載，