web前端性能优化

前端性能优化其实就是让使用户等待的时间减少,那么显而易见的就是提高网速,但这不是我们程序员可以搞的东西,就说下我们能做的吧。 
要说前端性能有话,你必须先了解:从用户输入URL到页面渲染都经历了什么。 
传送门:https://segmentfault.com/a/1190000006879700

上面文章内容很多,如果你了解上面知识,或者不想花时间了解上面,那么直接看下面吧。

从URL到页面大致一下几个过程: 
1、DNS解析 
2、TCP连接 
3、发送HTTP请求 
4、服务器处理请求并返回HTTP报文 
5、浏览器解析渲染页面 
6、连接结束

从上面的过程中我将前端性能优化分为两大部分: 
一、网络相关的一切,包括DNS解析 HTTP请求等等 
二、web优化,就是前端页面相关部分,也就是我们日常撸代码能够做到的一些

网络相关的一些优化

DNS优化 
1、设置DNS多级缓存:浏览器缓存,系统缓存,路由器缓存,IPS服务器缓存,根域名服务器缓存,顶级域名服务器缓存,主域名服务器缓存。 
2、DNS负载均衡(DNS重定向):使用CDN(Content Delivery Network)内容分发网络,返回一个离用户最近的IP地址。

HTTP 
减少HTTP请求:页面内的图片,或者引入的CSS文件和JS文件等都是一个请求,都等重复上面的过程,减少请求的次数自然就提高了访问页面的速度。 
方法: 
1、合并CSS文件:一个CSS文件请求一次,多个就请求多次,当然合并了就请求一次 
2、合并JS文件 
3、雪碧图:将一些小图片制作成雪碧图,只会请求一次 
4、缓存:将一些CSS文件或者JS文件缓存下来自然速度就快上去了 
5、减少cookie中不必要的信息:因为每个请求都会把cookie带上,内容少自然就快;其实也可以使用H5的web存储,用来代替cookie

web优化 
一、CSS 
1、尽量不要在行内写CSS 
2、使用link代替@import 
3、压缩CSS 
4、避免使用CSS表达式 
5、CSS写在HTML文件上部

二、JavaScript 
1、JS以外部文件形式引入 
2、避免重复的JS代码 
3、减少JS对DOM的操作 
4、避免无谓的循环 
5、JS代码(引入连接)放在页面下部 
6、压缩JS代码

三、HTML 
如果可能减少页面中的DOM元素

四、图片 
图片使用适当的格式,比如小图片用GIF PNG8等这样会减少图片的大小。

上面基本就是优化的一些方法,不全的话我会随时补充上去。 
如果对为什么这样做有兴趣的小伙伴可以看我最开始介绍的文章:从URL到页面和下面介绍的reflow和repaint 这两篇 会让你理解为什么这么做。

浏览器渲染页面有两个重要的过程reflow和repaint,这两个过程对性能的开销很大,提高性能应减少这两个过程,他们也是为什么要:减少JS操作DOM,减少DOM节点等的原因,如果有兴趣可以看一下:https://segmentfault.com/a/1190000005182937 
http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html

关于上面提到的文件合并、压缩、制作雪碧图等前端的一些工具都可以帮助我们实现

猜你喜欢

转载自blog.csdn.net/dx18520548758/article/details/79757239