網站優化大概分為六個方面的優化

  • A+

    網站優化大概分為以下六個方面的優化: 1.資源方面優化:html,css,js 2.HTTP網絡懇求優化:削減http懇求數,削減DNS查詢,防止重定向,運用HTTP2 3.server服務端優化:運用CDN,負載均衡,敞開GZip,緩存戰略,node的功能優化 4.前端緩存優化:見上一篇《前端緩大綱,分為以下六個方面的優化:


    1.資源方面優化:html,css,js


    2.HTTP網絡懇求優化:削減http懇求數,削減DNS查詢,防止重定向,運用HTTP23.server服務端優化:運用CDN,負載均衡,敞開GZip,緩存戰略,node的功能優化4.前端緩存優化:見上一篇《前端緩存知識點匯總》


    5.前端工程化方面的優化:webpack優化,Vue的優化,增量更新6.專題優化:首屏優化,網絡不穩守時的優化資源方面的優化


    HTML的優化


    1.SEO的優化:


    (1)標簽語義化


    (2)合適的meta標簽,比方keyword,description等(3)圖片加alt特點;2.H5的manifest緩存機制

224H94224-0

    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結構的虛擬dom3.一定要操作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沒有修正;運用HTTP21.雙工通信,多路復用;合作數據流機制確定數據包屬于哪個懇求;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-matchnode的功能優化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.提取公共款式,減小打包的體積,比方ExtracTextPlugin5.資源緊縮混淆,uglifyJS6.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,或許運用http24.資源內聯,削減懇求,AMP和百度MIP都這么發起的;5.按需加載,異步加載:只加載主頁需求的6.異步烘托:需求交互才呈現的資源運用異步烘托;7.圖片懶加載;8.服務端烘托,node+swig進行SSR;前后端同構烘托;9.運用緩存機制,見上面;H5的離線計劃manifest或許PWA的緩存10.html結構預加載,提取每個頁面的公共部分,預加載11.代理服務器,預懇求數據。


    12.給個杰出的提示,菊花圖


    注:是不是感覺和上面的有重復的當地,正所謂知識都是相通的嘛,要活學活用;用戶網絡不穩定的優化戰略1.圖片的優化,依據不同網速,顯示不同清晰度的圖片2.專門做一個簡版的項目,給網速差的狀況下運用3.首屏加載優化:見上一點;


發表評論

目前評論:0