網(wǎng)站的性能的指標：

• 白屏時間
• 首屏時間
• 整頁時間
• DNS時間
• CPU占用率

---

一、網(wǎng)絡傳輸性能優(yōu)化

重定向→拉取緩存→DNS查詢→建立TCP鏈接→發(fā)起請求→接收響應→處理HTML元素→元素加載完成。

(1)設置瀏覽器緩存

去除network面板頂部的Disable cache 勾選，查看緩存數(shù)據(jù)來源（from memory cache 和 from
disk cache）

在瀏覽器接收到服務器響應后，會檢測響應頭部（Header），如果有Etag字段，那么瀏覽器就會將本次緩存寫入硬盤中。

nginx配置緩存

etag on; //開啟etag驗證expires 7d; //設置緩存過期時間為7天

4. 為我們的靜態(tài)資源添加md5 hash后綴，避免資源更新而引起的前后端文件無法同步的問題。

---

(2)資源打包壓縮
瀏覽器緩存工作，只有在用戶第二次訪問我們的頁面才能起到效果，如果要在用戶首次打開頁面就實現(xiàn)優(yōu)良的性能，必須對資源進行優(yōu)化。

優(yōu)化措施：

• 減少請求數(shù)
• 減小請求資源體積
• 提升網(wǎng)絡傳輸速率

對上線文件進行自動化打包編譯時，通常都需要打包工具：
webpack，Gulp和Grunt、Parcel

①JS壓縮

optimization: {minimizer: [new UglifyJsPlugin({cache: true,parallel: true,sourceMap: true // set to true if you want JS source maps}),...Plugins]}

②HTML壓縮：

new HtmlWebpackPlugin({template: __dirname + '/views/index.html', // new 一個這個插件的實例，并傳入相關的參數(shù)filename: '../index.html',minify: {removeComments: true,collapseWhitespace: true,removeRedundantAttributes: true,useShortDoctype: true,removeEmptyAttributes: true,removeStyleLinkTypeAttributes: true,keepClosingSlash: true,minifyJS: true,minifyCSS: true,minifyURLs: true,},chunksSortMode: 'dependency'})

③提取公共資源

splitChunks: {cacheGroups: {vendor: { // 抽離第三方插件test: /node_modules/, // 指定是node_modules下的第三方包chunks: 'initial',name: 'common/vendor', // 打包后的文件名，任意命名 priority: 10 // 設置優(yōu)先級，防止和自定義的公共代碼提取時被覆蓋，不進行打包},utils: { // 抽離自定義公共代碼test: /\.js$/,chunks: 'initial',name: 'common/utils',minSize: 0 // 只要超出0字節(jié)就生成一個新包}}}

④提取css并壓縮：

const MiniCssExtractPlugin = require('mini-css-extract-plugin') module: {rules: [..., {test: /\.css$/,exclude: /node_modules/,use: [_mode === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, {loader: 'css-loader',options: {importLoaders: 1}}, {loader: 'postcss-loader',options: {ident: 'postcss'}}]}]}

⑤將webpack開發(fā)環(huán)境修改為生產(chǎn)環(huán)境：

上線時不需要這部分內容，通過配置剔除：

devtool: 'false'

⑥在服務器上開啟Gzip傳輸壓縮，它能將我們的文本類文件體積壓縮至原先的四分之一

gzip on; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;

不要對圖片文件進行Gzip壓縮！(gzip_types 把圖片的相關項去掉)

---

(3)圖片資源優(yōu)化

資源打包壓縮，只是停留在了代碼層面，而在我們實際開發(fā)中，真正占用了大量網(wǎng)絡傳輸資源的，并不是這些文件，而是圖片

①不要在HTML里縮放圖像

錯誤做法： 一個200?200的圖片容器內直接使用一張400?400的圖片
缺點：一張200KB的圖片和2M的圖片的傳輸時間會是200m和12s的差距

②使用雪碧圖（CSS Sprite）

可以使用插件webpack-spritesmith 插件
缺點：必須知道位置，維護不方便

③使用字體圖標（iconfont）

常用： icomoon 和 阿里圖標 兩個網(wǎng)站

icomoon 和 阿里圖標 這個網(wǎng)站也為我們提供了將SVG圖片自動轉化成CSS樣式的功能，然后進行引入~

④使用WebP

WebP格式，是谷歌公司開發(fā)的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，并能節(jié)省大量的服務器帶寬資源和數(shù)據(jù)空間。

⑤使用網(wǎng)絡傳輸性能檢測工具——Page Speed
chrome還為我們準備好了一款監(jiān)測網(wǎng)絡傳輸性能的插件——Page Speed，測試網(wǎng)絡傳輸性能了

對測試網(wǎng)站的性能瓶頸提出完整的建議，我們可以根據(jù)它的提示進行優(yōu)化工作。

⑥使用CDN
Linux下使用命令$ traceroute targetIp 或者在Windows下使用批處理 > tracert targetIp，都可以定位用戶與目標計算機之間經(jīng)過的所有路由器，不言而喻，用戶和服務器之間距離越遠，經(jīng)過的路由器越多，延遲也就越高。使用CDN的目的之一便是解決這一問題，當然不僅僅如此，CDN還可以分擔IDC壓力。
我們搭建不起來CDN的，不過我們可以使用各大企業(yè)提供的服務，諸如騰訊云等，阿里云，等等配置也十分簡單。

---

二、頁面渲染性能優(yōu)化

①瀏覽器渲染

Chrome（現(xiàn)在使用的是Blink引擎）
Safari使用的Webkit引擎，
Firefox使用的Gecko引擎，指的就是渲染引擎。
而在渲染引擎內，還包括著我們的HTML解釋器（渲染時用于構造DOM樹）、CSS解釋器（渲染時用于合成CSS規(guī)則）還有我們的JS解釋器。

②DOM渲染層與GPU硬件加速
一個頁面是有許多許多層級組成的，他們就像千層面那樣，你能想象出這個頁面實際的樣子嗎？

布局是由CPU處理的，而繪制則是由GPU完成的

③重排與重繪

重排（reflow）：渲染層內的元素布局發(fā)生修改，都會導致頁面重新排列，比如窗口的尺寸發(fā)生變化、刪除或添加DOM元素，修改了影響元素盒子大小的CSS屬性（諸如：width、height、padding）。

重繪（repaint）：繪制，即渲染上色，所有對元素的視覺表現(xiàn)屬性的修改，都會引發(fā)重繪。

重排是由CPU處理的，而重繪是由GPU處理

CPU的處理效率遠不及GPU，并且重排一定會引發(fā)重繪，而重繪不一定會引發(fā)重排。

④優(yōu)化策略

（1）CSS屬性讀寫分離
減少重排和重排，就是不用JS去操作元素樣式，這也是我最推薦的。
（2）通過切換class或者style.csstext屬性去批量操作元素樣式（或者 css module 等模塊化CSS），vue在style中添加 scoped
（3）DOM元素離線更新
當對DOM進行相關操作時，例如innerHTML、appendChild等都可以使用Document Fragment對象進行離線操作，帶元素“組裝”完成后再一次插入頁面，或者使用display:none 對元素隱藏，在元素“消失”后進行相關操作。
（4）將沒用的元素設為不可見：visibility: hidden，這樣可以減小重繪的壓力，必要的時候再將元素顯示。
（5）壓縮DOM的深度
一個渲染層內不要有過深的子元素，少用DOM完成頁面樣式，多使用偽元素或者box-shadow取代
（6）圖片在渲染前指定大小
因為img元素是內聯(lián)元素，所以在加載圖片后會改變寬高，嚴重的情況會導致整個頁面重排，所以最好在渲染前就指定其大小，或者讓其脫離文檔流。
（7）動畫元素采取硬件加速

---

三、JS阻塞性能

內存泄漏

代碼中誤寫了死循環(huán)

常見錯誤寫法：

while(true){console.log("1111");} while(1){console.log("1111");}

---

四、負責均衡

① Node.js處理IO密集型請求

“高內聚低耦合”的思想，你也可以用模塊化的思想去理解，前后解耦就相當與把一個項目分成了前端和后端兩個大模塊，中間通過接口聯(lián)系起來，分別進行開發(fā)。

② pm2實現(xiàn)Node.js“多線程”

node一般都是單線程，但是可以通過pm2 實現(xiàn)多線程。
pm2能啟動多個node.js服務，并且它能夠自動控制負載均衡，會自動將用戶的請求分發(fā)至壓力小的服務進程上處理。

安裝 && 使用：

安裝 $ npm i pm2 -g

在build文件夾內添加了pm2.json文件，這是pm2的啟動配置文件，我們可以自行配置相關參數(shù)

上線時輸入命令 $ pm2 start pm2.json即可

③ nginx搭建反向代理

所謂代理就是我們通常所說的中介，網(wǎng)站的反向代理就是指那臺介于用戶和我們真實服務器之間的服務器（說的我都拗口了），它的作用便是能夠將用戶的請求分配到壓力較小的服務器上，其機制是輪詢。

nginx模塊被分為三大類:

handler、filter和upstream.而其中的upstream模塊，負責完成完成網(wǎng)絡數(shù)據(jù)的接收、處理和轉發(fā)，也是我們需要在反向代理中用到的模塊。

(1)upstream配置信息：
upstream關鍵字后緊跟的標識符是我們自定義的項目名稱，通過一對花括號在其中增添我們的配置信息。

ip_hash 關鍵字：控制用戶再次訪問時是否連接到前一次連接的服務器

server關鍵字：我們真實服務器的地址，這里的內容肯定是需要我們去填寫的，不然運維怎么知道你把項目放在那個服務器上了，也不知道你封裝了一層node而得去監(jiān)聽3000端口。

(2)server配置信息

server是nginx的基本配置，我們需要通過server將我們定義的upstream應用到服務器上。

listen關鍵字：服務器監(jiān)聽的端口

location關鍵字：和我們之前在node層說到的路由是起同樣的功能，這里是把用戶的請求分配到對應的upstream上

總結

以上是生活随笔為你收集整理的网站性能优化注意点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。