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.首屏加载优化:见上一点;
 
{本文"网站性能如何优化-前端知识" 责任编辑:小周seo顾问}
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
SEO服务