常見前端項目性能優(yōu)化方案
一、頁面內(nèi)容優(yōu)化
- 減少http請求次數(shù)
- 減少DNS查詢次數(shù)
- 避免頁面跳轉(zhuǎn)
- 緩存ajax
- 延遲加載（一般用在圖片多的頁面中，滾動時才加載）
- 預加載
- 減少DOM元素數(shù)量
- 減少iframe數(shù)量
- 避免404
二、css優(yōu)化
- 將樣式表置頂將 （CSS放在 HEAD中，防止瀏覽器有可能還未下載和解析到 CSS就已經(jīng)開始渲染頁面）
- 避免css表達式
- 用link代替@import ; 使用css@import會造成額外的請求
- 避免使用filters
- css文件合并與壓縮
三、js代碼優(yōu)化
- 將腳本置底（將腳本內(nèi)容在頁面信息內(nèi)容加載后再加載）
- 使用外部javascript和css文件
- 去除重復腳本，避免重復的資源請求
- 減少DOM訪問（修改和訪問DOM元素會造成頁面的重繪和重排，循環(huán)對DOM操作更是減慢頁面加載速度）
- js文件合并與壓縮
四、圖片優(yōu)化
- 優(yōu)化圖片大小
- 盡量使用css sprite（精靈圖也叫雪碧圖）
- 不要在html中縮放圖片
- 使用小且可緩存的favicon.ico
- 在代碼中進行圖片的延遲加載，也叫做賴加載。
- 避免img、iframe等標簽的src屬性為空：空src會重新加載當前頁面，影響速度和效率。
- 圖像盡量避免使用DataURL：DataURL圖像沒有使用圖像壓縮算法，文件會變大，并且要解碼后再渲染，加載慢耗時長。
五、減少Cookie傳輸
- Cookie包含在每次請求和響應中，太大的Cookie會嚴重影響數(shù)據(jù)傳輸，因此哪些數(shù)據(jù)需要寫入Cookie需要慎重考慮，盡量
減少Cookie中傳輸?shù)臄?shù)據(jù)量。
六、瀏覽器端使用緩存
- CSS、JavaScript、Logo、圖標這些靜態(tài)資源文件更新的頻率都比較低，而這些文件又幾乎是每次HTTP請求都需要的，如果將這些文件緩存在瀏覽器中，可以極好地改善性能。
- 用法：通過設置HTTP頭中的Cache-Control和Expires屬性，可設定瀏覽器緩存，緩存時間可以是數(shù)天，甚至是數(shù)月。
七、服務器端使用壓縮
- 在服務器端對文件進行壓縮，在瀏覽器對文件解壓縮，可有效減少通信傳輸?shù)臄?shù)據(jù)量。文本文件的壓縮率可達80%以上，因此
HTML、CSS、JavaScript文件啟用GZip壓縮可達到較好的效果。但是壓縮對服務器和瀏覽器產(chǎn)生一定的壓力，在通信帶寬良好，而服務器資源不足的情況下要權衡考慮。
八、減少資源大小
html壓縮
html代碼壓縮就是壓縮在文本文件中有意義，但是在html中不顯示的字符，包括空格，制表符
css壓縮
css壓縮包括無效代碼刪除與css語義合并
js壓縮與混亂
js壓縮與混亂包括無效字符及注釋的刪除、代碼語義的縮減和優(yōu)化、降低代碼的可讀性、實現(xiàn)代碼的保護
圖片壓縮
九、優(yōu)化網(wǎng)絡連接
1 使用CDN
CDN是內(nèi)容分發(fā)網(wǎng)絡，它能夠?qū)崟r地根據(jù)網(wǎng)絡流量和各個節(jié)點的連接、負載狀況以及到用戶的距離和響應時間等綜合信息將用戶的請求重新導向離用戶最近的服務節(jié)點上，其目的是使用戶可以就近的取得所需內(nèi)容，解決網(wǎng)絡擁擠的狀況，提高網(wǎng)站的響應速度
2 使用DNS預解析
當瀏覽器訪問一個域名的時候，需要解析一次DNS,獲得對應域名的ip地址，在解析過程中，按照瀏覽器緩存、系統(tǒng)緩存、路由器換算、DNS緩存、域名服務器的順序，逐步讀取緩存，直到拿到ip地址
3 持久連接
使用keep-alive或者persistent來建立持久連接，降低了延時和連接建立的開銷
十、優(yōu)化資源加載
1 資源加載位置
通過優(yōu)化資源加載位置，更改資源加載時機，使盡可能快地展示出頁面內(nèi)容，盡可能快地使用功能可用
2 資源加載時機
3.異步script標簽
defer：異步加載，在html解析完成后執(zhí)行。defer的實際效果與將代碼放在body底部類似
async：異步加載，加載完成后立即執(zhí)行
4.模塊按需加載
5.使用資源預加載preload和資源預讀取prefetch
preload讓瀏覽器提前加載指定資源，需要執(zhí)行時候再執(zhí)行，可以加快當前頁面的加載速度
prefetch告訴瀏覽器加載下一個頁面可能會用到的資源，可以加速下一個頁面的加載速度
6.資源懶加載與資源預加載(錯峰操作)
資源延遲加載也稱為資源懶加載，延遲加載資源或符合某些條件的時候才加載某些資源
資源預加載是提前加載用戶所需的資源，保證良好的用戶體驗
資源懶加載和資源預加載都是一種錯峰操作，在瀏覽器忙碌的時候不能操作，瀏覽器空閑的時候再加載資源，優(yōu)化了網(wǎng)絡性能
十一**、**減少重繪回流
十二**、**用對選擇器
id選擇器選擇元素是最快的
十三**、**不濫用WEB字體
WEB字體需要下載、解析、重繪當前頁面，盡量減少使用。
十四**、**選用性能更好的api
十五、使用web worker
Web Worker是HTML5提供的一個javascript多線程解決方案，可以將一些大計算量的代碼交由web Worker運行，從而避免阻塞用戶界面，在執(zhí)行復雜計算和數(shù)據(jù)處理時，這個API非常有用。但是，要注意其瀏覽器兼容性。
十六**、**減少重定向
盡量避免使用重定向，當頁面發(fā)生了重定向，就會延遲整個HTML文檔的傳輸。在HTML文檔到達之前，頁面中不會呈現(xiàn)任何東西，也沒有任何組件會被下載，降低了用戶體驗
如果一定要使用重定向，如http重定向到https，要使用301永久重定向，而不是302臨時重定向。因為，如果使用302，則每一次訪問http，都會被重定向到https的頁面。而永久重定向，在第一次從http重定向到https之后 ，每次訪問http，會直接返回https的頁面
十七、開啟Gzip（代碼壓縮）
Gzip即數(shù)據(jù)壓縮，前端生產(chǎn)環(huán)境中將js、css、圖片等文件進行壓縮，通過減少數(shù)據(jù)傳輸量減小傳輸時間，節(jié)省服務器網(wǎng)絡帶寬，提高前端性能。
十八、事件代理(事件委托)
事件代理的原理是DOM元素的事件冒泡
- 可以大量節(jié)省內(nèi)存占用，減少事件注冊，比如在table上代理所有td的click事件就非常棒
- 可以實現(xiàn)當新增子對象時無需再次對其綁定
十九、防抖和節(jié)流
使用函數(shù)節(jié)流（throttle）或函數(shù)去抖（debounce），限制某一個方法的頻繁觸發(fā)
二十、webpack優(yōu)化
【打包公共代碼】
使用CommonsChunkPlugin插件，將公共模塊拆出來，最終合成的文件能夠在最開始的時候加載一次，便存到緩存中供后續(xù)使用。這會帶來速度上的提升，因為瀏覽器會迅速將公共的代碼從緩存中取出來，而不是每次訪問一個新頁面時，再去加載一個更大的文件
webpack 4 將移除 CommonsChunkPlugin, 取而代之的是兩個新的配置項 optimization.splitChunks 和 optimization.runtimeChunk
通過設置 optimization.splitChunks.chunks: “all” 來啟動默認的代碼分割配置項
【動態(tài)導入和按需加載】
webpack提供了兩種技術通過模塊的內(nèi)聯(lián)函數(shù)調(diào)用來分離代碼，優(yōu)先選擇的方式是，使用符合 ECMAScript 提案 的 import() 語法。第二種，則是使用 webpack 特定的 require.ensure
【剔除無用代碼】
tree shaking 是一個術語，通常用于描述移除 JavaScript 上下文中的未引用代碼(dead-code)。它依賴于 ES2015 模塊系統(tǒng)中的靜態(tài)結構特性，例如 import 和 export。這個術語和概念實際上是興起于 ES2015 模塊打包工具 rollup
JS的tree shaking主要通過uglifyjs插件來完成，CSS的tree shaking主要通過purify CSS來實現(xiàn)的
【長緩存優(yōu)化】
1、將hash替換為chunkhash，這樣當chunk不變時，緩存依然有效
2、使用Name而不是id
每個 module.id 會基于默認的解析順序(resolve order)進行增量。也就是說，當解析順序發(fā)生變化，ID 也會隨之改變
下面來使用兩個插件解決這個問題。第一個插件是 NamedModulesPlugin，將使用模塊的路徑，而不是數(shù)字標識符。雖然此插件有助于在開發(fā)過程中輸出結果的可讀性，然而執(zhí)行時間會長一些。第二個選擇是使用 HashedModuleIdsPlugin，推薦用于生產(chǎn)環(huán)境構建
【公用代碼內(nèi)聯(lián)】
使用html-webpack-inline-chunk-plugin插件將mainfest.js內(nèi)聯(lián)到html文件中
【縮小構建目標,排除 Webpack 不需要解析的模塊】文章來源：http://www.zghlxwxcb.cn/news/detail-581185.html
排除 Webpack 不需要解析的模塊。即使用 loader 的時候，在盡量少的模塊中去使用。我們可以借助 include 和 exclude 這兩個參數(shù)，規(guī)定 loader 只在那些模塊應用和在哪些模塊不應用。文章來源地址http://www.zghlxwxcb.cn/news/detail-581185.html
到了這里，關于常見前端項目性能優(yōu)化方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
