前端優化清單（一）：之首屏優化

Nosee 發布于2019-08-26 11:50 / 624人閱讀

摘要：前端性能優化清單前端優化項優化內容備注首屏首屏優化到，前端優化首選。首屏最小化首屏盡量小，控制節點數請求數外鏈數，可視區域盡快顯示。首屏廣告優化重點減少廣告的下載次數，減少狀態上報次數，避免。

前端性能優化清單：

前端優化項	優化內容	備注
首屏	首屏優化到0.5-2s，前端優化首選。	優化切入口，目標<2s
內容	圖片、JS、Script、Flash等元素是頁面和應用的主要構成，也是前端優化的重點。	網頁元素過多
請求	頁面元素的數量、加載文件的多少、大小，決定了頁面的加載時間和效率。優化和規避請求。	域名數量和解析
CSS	頁面樣式，動畫的實現，特效的實現，決定頁面外在表現和交互效果。	靜態頁面布局
JavaScript	JS串行加載等特殊性，是影響頁面性能的主要原因之一，而且比重大，無論大小、邏輯、數量都需嚴格控制。	性能殺手
圖片	頁面中，60%以上的請求和大小都是由圖片構成，圖片加載決定了頁面加載的快與慢。	成本優化

首屏優化原則

首屏（above the fold）：名字來源（報紙）頭版，原指報紙折疊之后仍能看見的頁面。Web中只網站加載后，用戶不用滾動屏幕所看到的所有信息。

首屏最小化：
首屏HTML盡量小，控制DOM節點數、請求數、外鏈數，可視區域盡快顯示。

元素優化
優化落在首屏內的元素性能和結構，包括基礎頁、元素請求、圖片、JS、是否調用第三方內容、層次機構等。

頁面靜態化
首屏頁包含了頁面基礎頁時間（第一次請求），以屏內的元素總的DNS解析時間，建立連接時間，SSL握手時間，發出請求時間，重定向時間，內容下載時間等。

基礎頁優化
以靜態頁面的形式存放，用戶相關數據依賴Ajax，比如登錄信息。用戶默認顯示未登錄狀態，異步獲取到用戶數據后更新。

首屏廣告優化
重點減少廣告JS的下載次數，減少狀態上報次數，避免iframe。同時處理腳本放在頁面底部，修改廣告的載入順序，避免影響頁面顯示。

首屏按需加載
隱藏tab頁，用了異步加載的方式，只有當用戶正在要看這塊內容的時候才去拉取。

多帶帶合并素材
將代發布的源文件進行壓縮合并，減少文件數量，授權請求最少原則。

統計代碼優化
針對用戶行為統計代碼如（CNZZ，百度統計等），進行去除冗余，統一放到首屏后加載。

GPU云服務器云服務器前端優化網頁前端優化前端頁面優化前端代碼優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107652.html

前端每周清單：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 組件技巧

摘要：前端每周清單第期微服務實踐，與，組件技巧，攻防作者王下邀月熊編輯徐川前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。前端每周清單第 26 期：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 組件技巧，HeadlessChrome 攻防作者：王下邀月熊編輯：徐川...

wall2flower 2019-08-21 11:55 評論0 收藏0
前端每周清單第 18 期：Firefox、Chrome、React、Angular發布新版本；提升R

摘要：本文即以簡單的回歸擬合為例，從最基礎的庫安裝數據導入數據預處理到模型訓練模型預測介紹了如何使用進行簡單的機器學習任務。前端每周清單第 18 期：Firefox、Chrome、React、Angular發布新版本；提升RN應用性能的方法為InfoQ中文站特供稿件，首發地址為這里；如需轉載，請與InfoQ中文站聯系。從屬于筆者的 Web 前端入門與工程實踐的前端每周清單系列系列；部分...

Lemon_95 2019-08-20 17:24 評論0 收藏0
前端每周清單半年盤點之 PWA 篇

摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于...

崔曉明 2019-08-20 19:01 評論0 收藏0
前端每周清單第 29 期：Web 現狀分析與優化策略、Vue 單元測試、Headless Chrom

摘要：前端每周清單第期現狀分析與優化策略單元測試爬蟲作者王下邀月熊編輯徐川前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清單第 29 期：Web 現狀分析與優化策略...

HackerShell 2019-08-21 12:05 評論0 收藏0
前端開發清單

摘要：它基于前端開發人員多年的經驗沉淀，以及其他優秀的開源清單。在上投票或推薦來幫助前端清單的推廣。跨站點請求偽造防范清單跨站腳本攻擊頁面或網站沒有攻擊的可能性。原文地址：Front-End-Checklist 原文作者：David Dias 譯者：JohnsenZhou 文章地址：https://github.com/JohnsenZhou/Front-End-Checklist...

W_BinaryTree 2019-08-30 13:49 評論0 收藏0