歡迎光臨,盈騰SEO顧問-SEO優化教程學習及免費SEO培訓教程

盈騰SEO顧問-SEO優化教程學習及免費SEO培訓教程

當前位置: 首頁 > SEO服務 >

網站性能如何優化-前端知識

時間:2018-06-28 12:08來源:未知 作者:admin 點擊:
大綱,分為以下六個方面的優化: 1.資源方面優化:html,css,js 2.HTTP網絡請求優化:減少http請求數,減少DNS查詢,避免重定向,使用HTTP2 3.server服務端優化:使用CDN,負載均衡,開啟GZip,緩存策略,node的性能優化 4.前端緩存優化:見上一篇《前端緩
大綱,分為以下六個方面的優化:
1.資源方面優化:html,css,js
2.HTTP網絡請求優化:減少http請求數,減少DNS查詢,避免重定向,使用HTTP2
3.server服務端優化:使用CDN,負載均衡,開啟GZip,緩存策略,node的性能優化
4.前端緩存優化:見上一篇《前端緩存知識點匯總》
5.前端工程化方面的優化:webpack優化,Vue的優化,增量更新
6.專題優化:首屏優化,網絡不穩定時的優化
 
資源方面的優化
 
HTML的優化
 
1.SEO的優化:
(1)標簽語義化
(2)合適的meta標簽,比如keyword,description等
(3)圖片加alt屬性;
2.H5的manifest緩存機制
 
CSS的優化
 
1.css放頂部,可以防止FOUC–無樣式內容的閃爍;
2.避免內聯樣式
注意:這一點并不絕對;比如現在MVVM框架主張css in js,谷歌的AMP要求css必須內聯;
3.no表達式,
4.no image,字體圖標等矢量圖標代替圖片,
5.屬性值為0,把單位去掉,
6.不要濫用float,易造成重排;
7.預處理器(sass,less,stylus)和后處理器壓縮處理(postcss)
8.使用可以觸發GPU加速的屬性:比如3D過渡,變形,透明度等屬性
 
JS的優化
 
1.放html的底部
2.避免直接操作dom,可以使用MVVM框架的虛擬dom
3.一定要操作dom的話,盡量使用id選擇器,減少遍歷次數
4.避免批量綁定事件,使用事件代理
5.動畫盡量交給css,萬不得已才用js
6.使用gpu.js庫觸發GPU硬件加速;
 
HTTP網絡請求的優化
 
減少http請求數
 
1.使用雪碧圖合并小圖片
2.no image,顏色單一的圖案盡量用矢量的字體圖標
3.webpack可以把小圖片base64壓縮到js中
4.合并css和js文件;
 
減少DNS查詢
 
DNS查找流程:瀏覽器緩存,本機DNS緩存,本地DNS服務器
使用緩存加快DNS查找的速度;
 
盡量避免重定向
 
當頁面發生了重定向,就會延遲整個HTML文檔的傳輸。
在HTML文檔到達之前,頁面中不會呈現任何東西,也沒有任何組件會被下載。
301:永久重定向; 302:臨時重定向; 304:Not Modified沒有修改;
 
使用HTTP2
 
1.雙工通信,多路復用;配合數據流機制確定數據包屬于哪個請求;
2.二進制傳輸,加快解析
3.頭部壓縮,節省帶寬
4.服務器主動推送;
 
server服務端的優化
 
使用CDN
 
1.速度快,穩定性有保障;
2.請求CDN時不用把cookies帶來帶去;
3.給自己的資源服務器減輕負擔,省空間省流量
 
負載均衡
 
Ngnix進行負載均衡配置
 
開啟GZip壓縮
 
注意要設置個壓縮上限;比如32K,因為原文件100K左右已經很大了;
 
緩存策略
 
見我上一篇《前端緩存知識點匯總》
1.強制緩存expires和cache control,
2.協商緩存last-modified/if-modified-since, etag/if-none-match
 
node的性能優化
 
1.異常處理:
使用uncaughtException捕獲異常并進行異常處理,不然node輕易掛掉;
 
2.壓測:
(1)壓測工具:Jmeter, wrk
(2)峰值QPS和機器計算:
QPS表示單個進程每秒請求服務器的成功次數,QPS = PV/秒數
峰值QPS,每天80%的訪問集中在20%的時間里,峰值QPS = (總PV數80%)/(每天的秒數20%)
需要的機器數量 = 峰值QPS / 單臺機器的QPS
比如:300W PV,每個機器的QPS是58,需要幾臺機器?
解:(3000000 X 0.8)/(24 X 3600 X 0.2) / 58 = 2.395 所以需要3臺;
 
3.防止內存泄漏
(1)發生內存泄漏的原因:
大循環產生大對象,消費不及時導致;比如遞歸,可以優化成“尾遞歸”
濫用閉包; 及時清理不用的變量,置為null即可;
(2)process.memoryUsage
使用node進程模塊的memoryUsage屬性查看內存的使用情況
(3)檢查內存泄漏的工具:memwatch + heapdump,
可以監聽leak泄漏事件,memwatch檢測內存泄漏,heapdump抓取內存實時情況;
 
4.調試node代碼
(1)node-inspect + Chrome,官方的調試工具包
安裝,執行命令,地址欄輸入chrome://inspect 就可以調試node代碼
(也可以遠程調試手機端的node應用哦)
缺點:比較慢
(2)node-inspector + chrome,更好用的一個工具包
(3)VSCode,調試node的神器,簡單方便
 
前端緩存的優化
 
見我之前寫的《前端緩存知識點匯總》
1.瀏覽器緩存策略
2.前端存儲方案
3.PWA實現緩存
 
前端工程化方面的優化
 
工具優化之webpack優化技巧
 
1.分離第三方庫的依賴,引入DllPlugin,將不需要修改的第三方庫和自己業務代碼分開打包;
2.引入多進程編譯的工具包,比如happypack;充分利用CPU多核特性;
3.提取公共依賴模塊,commonChunkPlugin;版本4已經默認集成了;
4.提取公共樣式,減小打包的體積,比如ExtracTextPlugin
5.資源壓縮混淆,uglifyJS
6.Gzip壓縮
7.按需加載,自身提供的require.ensure,各種框架也有自己的模塊加載方案;
8.tree shaking去掉沒用上的代碼,版本3和4默認有了;
 
MVVM框架優化
 
vue優化,react優化,angular優化
這里暫時不展開了;之后再補充;
 
策略優化之增量更新策略
 
整體思路類似git
1.本地使用localstorage或者其他的存儲方案,保存一份代碼+時間戳;
2.向服務器請求時帶上時間戳,服務器判斷客戶端版本,跟最新版本對比,返回一個diff信息;
3.客戶端根據diff信息,增量更新代碼,更新時間戳;
4.Diff信息格式可以如下:
[3,”-2”,”+abcd”,1]
整數表示無變化的字符數量,“-”開頭的字符串代表被移除的字符數量,
“+”開頭的字符串表示新加入的字符;
5.粒度更細的增量更新解決方案,可以看看騰訊的mt.js
 
其他專題優化
 
移動端首屏優化
 
兩個方面,優化網絡與優化渲染
優化網絡可以提升幾秒,而優化渲染,大部分是是毫秒級的,所以網絡優化才是重點;
 
1.DNS預解析
配置meta和link標簽,比如:
DNS預解析
DNS預解析
 
 
2.域名收斂
域名收斂,就是將靜態資源放在一個域名下,減少DNS解析的開銷時間;
注意:PC端提倡域名發散,是為了利用瀏覽器多線程并行下載能力;移動端為了提高性能使用域名收斂;
3.鏈路復用:keep-alive,或者使用http2
4.資源內聯,減少請求,AMP和百度MIP都這么提倡的;
5.按需加載,異步加載:只加載首頁需要的
6.異步渲染:需要交互才出現的資源使用異步渲染;
7.圖片懶加載;
8.服務端渲染,node+swig進行SSR;前后端同構渲染;
9.使用緩存機制,見上面;H5的離線方案manifest或者PWA的緩存
10.html框架預加載,提取每個頁面的公共部分,預加載
11.代理服務器,預請求數據。
12.給個良好的提示,菊花圖
注:是不是感覺和上面的有重復的地方,正所謂知識都是相通的嘛,要活學活用;
 
用戶網絡不穩定的優化策略
 
1.圖片的優化,根據不同網速,顯示不同清晰度的圖片
2.專門做一個簡版的項目,給網速差的情況下使用
3.首屏加載優化:見上一點;
 

{本文"網站性能如何優化-前端知識http://www.144715.live/seojishuff/437.html" 責任編輯:盈騰seo顧問}
頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
相關欄目

電話

18515576166

在線客服
内蒙古快三走势图50期