前端性能优化一网打尽

1、负载均衡
(1)DNS服务器实现负载均衡。缺点:无法判断哪一个server是down机的,无法判断每个server的负载
(2)硬件设备:负载均衡器(Load Balancer),作为独立的硬件置于客户端与服务器之间。价格昂贵
(3)反向代理:Nginx服务器,反向代理是实现负载均衡的主流手段之一,当我们访问拥有反向代理的网站时,实际访问的是其反向代理服务器,而非真正的服务器,当请求到达反向代理服务器时,反向代理服务器再将请求转发至服务器。

2、CDN网络
内容分发网络(Content Delivery Network),简称:CDN,通常情况下,我们所要的数据都是从主服务器中获取,但假如我们的主服务器在南方,而访问用户在北方,那么访问速度就会相对变慢,变慢的原因有很多,例如传输距离,运营商,带宽等等因素,而使用CDN技术的话,我们会将CDN节点分布在各地,当用户发送请求到达服务器时,服务器会根据用户的区域信息,为用户分配最近的CDN服务器。
CDN简单的来说就是存储一些静态文件的一台或多台服务器,通过复制,缓存等方式,将文件保存其中。
  (1).静态文件
   css,html,图片,媒体都属于静态文件,也就是说用户发送的请求不会影响静态文件的内容,而jsp,php等文件就不属于静态文件,因为他们的内容会因我们的请求而发生改变。
   ( 2).CDN数据从哪里来
  复制,缓存,CDN服务器可以在用户请求后缓存文件,也可以主动抓取主服务器内容。

3、减少HTTP请求
(1)脚本合并:通常一个大型网站需要依赖多个JS文件。可以把多个文件合并成一个,这样只需要引用一个
(2)CSS雪碧图 。缺点:
① 最大的问题是内存的使用:除非非常小心的组织,否则会留下大量无用的空白。
② 影响页面缩放功能:缩放时要避免雪碧中相邻图片露出来。

4、文件压缩
包括CSS、JavaScript、图片的压缩。
JavaScript:
最小化:删除注释和空格等不必要的字符。安全、直白,文件减少21%。
混淆:删除注释和空格,将函数名和变量名替换成短的字符串,难于反向工程。复杂,容易产生问题,文件减少25%。

5、延迟加载图片(Lazy Load Images)
懒加载的原理:我们先将img标签中的src链接设置为一样的图片(空白图片),将真正的图片链接放在自定义属性中,如(data-src),当js监听到图片元素进入到可视窗口的时候,将自定义属性中的地址存储到src中,达到懒加载的效果。

6、避免使用eval 和Function 、with
每次 eval 或 Function 构造函数作用于字符串表示的源代码时,脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。
  eval 函数效率特别低,由于事先无法知晓传给 eval 的字符串中的内容,eval在其上下文中解释要处理的代码,也就是说编译器无法优化上下文,因此只能有浏览器在运行时解释代码。这对性能影响很大。
  Function 构造函数比 eval略好,因为使用此代码不会影响周围代码 ;但其速度仍很慢。
  此外,使用 eval和 Function也不利于Javascript 压缩工具执行压缩。

7、 减少作用域链查找
也就是减少跨作用域查找,例如:闭包

8、减少cookie传输
一方面,cookie包含在每次请求和响应中,太大的cookie会严重影响数据传输,因此哪些数据需要写入cookie需要慎重考虑,尽量减少cookie中传输的数据量。另一方面,对于某些静态资源的访问,如CSS、script等,发送cookie没有意义,可以考虑静态资源使用独立域名访问,避免请求静态资源时发送cookie,减少cookie传输次数。

9、合理设置浏览器缓存、CDN缓存、 HTTP缓存(https://www.jianshu.com/p/47f3406c8084)
浏览器缓存:网页静态文件在初次加载是会保存在本地,作为缓存
没有CDN:浏览器缓存
使用了CDN:浏览器缓存+CDN缓存(属于服务器缓存)
强制缓存:如果命中强制缓存,返回200,利用Expires或者Cache-Control这两个http header实现的,都用来表示资源在客户端缓存的有效期,但是Expires是服务器返回的一个绝对时间,在服务器时间与客户端时间相差较大时,缓存管理容易出现问题,比如随意修改下客户端时间,就能影响缓存命中的结果。所以在http1.1的时候,提出了一个新的header,也就是Cache-Control,这是一个相对时间,在进行缓存命中的时候,都是利用客户端时间进行判断,因此更有效安全一些。
对比缓存:如果命中对比缓存,请求响应返回的http状态为304以及一个Not Modified字符串,对比缓存利用的是【Last-Modified、If-Modified-Since】、【ETag、If-None-Match】这两对header来管理的。
Etag的出现主要是为了解决几个Last-Modified比较难解决的问题:
1.Last-Modified标注的最后修改只能精确到秒级,如果某些文件在1秒钟以内,被修改多次的话,它将不能准确标注文件的新鲜度
2.如果某些文件会被定期生成,当有时内容并没有任何变化,但Last-Modified却改变了,导致文件没法使用缓存
3.有可能存在服务器没有准确获取文件修改时间,或者与代理服务器时间不一致等情形。
Last-Modified与ETag是可以一起使用的,服务器会优先验证ETag,一致的情况下,才会继续比对Last-Modified,最后才决定是否返回304。

10、CSS放在页面最上部,javascript放在页面最下面
减少css表达式的应用

11、异步请求 Callback
大运算量或者费时操作给浏览器线程去处理,这样可以保证js主线程不被阻塞。

12、避免重定向
301:永久重定向,抓取新内容的同时也将旧的网址替换为重定向之后的网址;
302:暂时重定向,抓取新的内容而保留旧的网址
302好于301
重定向会增加http请求数,但必要的重定向有利于提高用户体验
定义链接URL时使用最完整的、最直接的地址。如:
使用www.baidu.com而非baidu.com
使用www.google.com.hk而非www.google.com
使用http://write.blog.csdn.net/而非http://write.blog.csdn.net

13、减少DOM操作和重排和重绘
减少对DOM元素的查询与修改
重排【reflow】
重绘【repaint】
重排会导致重绘

14、使用GET请求
为什么get比post更快
(1).post请求包含更多的请求头
因为post需要在请求的body部分包含数据,所以会多了几个数据描述部分的首部字段(如:content-type),这其实是微乎其微的。
(2).最重要的一条,post在真正接收数据之前会先将请求头发送给服务器进行确认,然后才真正发送数据
(3).get会将数据缓存起来,而post不会
(4).post不能进行管道化传输

移动端性能优化
1.尽量使用css3动画,开启硬件加速。
2.适当使用 touch 事件代替 click 事件。
3.避免使用 css3 渐变阴影效果。
4.可以用 transform: translateZ(0) 来开启硬件加速。
5.不滥用Float。Float在渲染时计算量比较大,尽量减少使用
6.不滥用Web字体。Web字体需要下载,解析,重绘当前页面,尽量减少使用。
7.合理使用requestAnimationFrame动画代替setTimeout
8.CSS中的属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)会触发GPU渲染,请合理使用。过渡使用会引发手机过耗电增加
9.PC端的在移动端同样适用

发布了90 篇原创文章 · 获赞 5 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/me_never/article/details/90152609