网站优化大概分为六个方面的优化

  • 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