大纲,分为以下六个方面的优化: 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.首屏加载优化:见上一点;
未经允许不得转载:深深算网络 » 网站性能如何优化-前端知识