最新消息: 专注SEO优化,不上首页不收费,上首页按天收费,每天6元!

网站性能如何优化-前端知识

  了解详情了解详情  

深深算网络 来源:原创


大纲,分为以下六个方面的优化: 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.首屏加载优化:见上一点;

未经允许不得转载:深深算网络 » 网站性能如何优化-前端知识

电话咨询
cache
Processed in 0.005617 Second.