网站优化大概分为以下六个方面的优化： 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缓存机制

    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.首屏加载优化：见上一点；