一、加載優化（減少http請求數）

常用的減少HTTP請求的方法有以下幾種：

1.合并圖片：當頁面圖片較多時，可以將相似的圖片合并為一張大圖，從而減少HTTP請求次數。對于不經常變化的圖片，使用精靈圖或雪碧圖進行合并，可以充分利用瀏覽器緩存提升性能。

2.合并壓縮CSS樣式表和JS腳本：將相似或通用的CSS和JS文件進行合并，壓縮后減少HTTP連接數。這種方法可以減少資源文件的大小，從而提升網頁加載速度。

3.去掉不必要的請求：在代碼編寫或系統升級之后，可能會有一些無效的鏈接殘留在頁面中，應該及時清理這些無效鏈接，以減少HTTP請求的次數。

4.首屏加載優化：優化首屏的加載，使得頁面能夠快速顯示，可以提高用戶對頁面速度的感知。這一點非常重要，因為用戶對首屏的體驗印象會直接影響到頁面的整體評價。

5.充分利用緩存：將靜態資源放在服務器端，并設置合適的緩存策略，可以減少向服務器發送的請求數，節省網絡資源。對于長期不變的靜態資源，建議開啟長緩存，使得瀏覽器能夠更好地緩存這些資源文件，進一步加速頁面加載速度

6.預加載：對于大型資源頁面，可以先使用Loading進行資源預加載，資源加載完成后再顯示頁面。這不僅可以提前緩存資源，還可以完美展現Loading界面。需要注意的是，過長的加載時間可能會影響用戶的體驗。

7.異步加載第三方資源：第三方資源的加載時間不可控，可能會影響頁面的加載速度，因此建議使用異步加載的方式，使得第三方資源不會影響主頁面的加載速度。

二、圖片優化

優化圖片的方法如下：

1.使用PNG格式的圖片：相對于其他圖片格式，PNG格式的圖片體積較小，可以使用壓縮工具對其進行優化。在上線之前，應該對圖片進行一定的壓縮和優化。

2.延遲加載圖片：使用延遲加載技術，也稱為賴加載，在代碼中進行圖片的延遲加載，可以有效地提高頁面的加載速度。

3.避免空src屬性：應該避免在img、iframe等標簽中使用空的src屬性，因為空的src屬性會重新加載當前頁面，影響頁面速度和效率。

4.避免使用DataURL：在加載圖片時，盡量避免使用DataURL格式的圖像。因為DataURL圖像沒有使用圖像壓縮算法，文件會變得很大，并且需要解碼后再渲染圖片，加載速度變慢，耗時長。

三、使用CDN

內容分發網絡，即CDN，可將內容從中心媒體服務器分發到邊緣服務器的網絡架構。使用CDN有許多好處，例如低網絡延遲和丟包率，負載分配，帶寬節省和網站性能提升，用戶能夠就近獲取所需內容，避免網絡擁塞，從而提高了用戶對網站的訪問響應速度。

但是，如果網站的安全性對你來說非常重要，那么不應該使用公共CDN。在從CDN遠程請求文件時，你的訪問來源信息也會被發送過去，一些遠程的JavaScript文件可能被修改用來收集用戶或系統信息。此外，當你使用https協議時，可用的CDN就更加有限了。

四、開啟Gzip（代碼壓縮）

Gzip是一種數據壓縮技術，在前端生產環境中可用于壓縮js、css、圖片等文件。通過減小數據傳輸量，Gzip可有效縮短傳輸時間，減輕服務器的網絡帶寬壓力，同時提升了前端性能。

五、樣式表和JS文件的優化

1.頭部內聯的樣式和腳本可能會阻塞頁面的渲染。為避免這種情況，通常我們可以使用link標簽將CSS樣式表文件放置在頁面頭部進行引入，以確保盡早地完成下載。

2.對于JS腳本文件，通常會將其放置在頁面尾部，同時使用異步加載方式，以最/大程度地減少樣式和腳本對頁面渲染的阻塞。

六、減少不必要的Cookie

Cookie存儲在客戶端，伴隨著HTTP請求在瀏覽器和服務器之間傳遞，由于cookie在訪問對應域名下的資源時都會通過HTTP請求發送到服務器，從而會影響加載速度，所以盡量減少不必要的Cookie。

七、腳本優化

1.如果需要實現復雜的動畫效果，建議使用絕對定位，使其脫離文檔流，避免對DOM元素進行循環操作。此外，使用transform:translate代替position left、right等屬性可盡量減少回流和重繪帶來的性能損失。

2.為了減少腳本對并發下載的影響，建議將腳本放置在頁面底部進行加載。

3.為了減少每次計算緩存.length的性能開銷，可以使用一個變量保存其值。

4.為了減少內存消耗和DOM操作，建議盡量使用事件委托。將事件監聽器設置在父節點上，利用冒泡原理來設置每個子節點。

5.為了提高選擇器的速度，建議盡量使用id選擇器，因為其具有唯/一性、靈活性和優先級高的特點。

八、前端代碼結構的優化

1.為了加速頁面渲染，我們需要設置HTML的viewport。

2.DOM結點過多會降低頁面的渲染性能，因此應盡量減少DOM結點的數量。

3.CSS3動畫比setTimeout更加高效，應盡可能地使用requestAnimationFrame動畫。

4.高頻事件（如scroll、touchmove）應該進行優化，使用函數防抖和函數節流等技術來限制它們的執行頻率。

5.避免過度使用WEB字體，因為它們需要下載、解析和重繪，這會影響頁面的性能。

6.統一的文件命名規則和分類方式可以幫助我們更容易地維護項目中的文件。

九、SEO優化

1.在編寫標題時，應避免過長，關注核心關鍵詞和網站主題相關內容。

2.頁面描述是對整個頁面的綜合說明，其作用和重要性僅次于頁面標題。建議描述文字盡量吸引人，加入公司品牌和電話聯系方式，并包括目標關鍵詞。

3.對關鍵詞進行優化，有助于用戶在搜索時準確地找到所需的內容和網站，同時也有助于更多的有需要的人發現和訪問網站。

4.對于大型網站來說，盡可能精簡網站代碼是非常重要的，因為這可以節省百度蜘蛛的爬行時間。