前端性能优化

twtiqfn 2019-11-03

作为前端工程师,拥有巨大的能力和责任,是用户的最后一道防线,前端直接决定用户的体验

前端性能的重要性

事实上,只有10%--20%的最终用户响应时间是花在从web服务器获取html文档并传送到浏览器中的。如果希望有效减少页面响应时间,就必须关注剩余80%--90%的最终用户体验

了解用户时间都花在等待哪些地方?

  • 5%html文档
  • 95%等待页面组件下载(图片,脚本,样式表,flash等)
  • 小部分时间花在解析html,脚本和样式表

因此,改善响应时间的最简单途径就是减少组件的数量,并由此减少http请求的数量

1. 减少http请求
  • 图片地图

map,area 标签

  • css sprites

将多个图片合并到一个单独的图片中
利用background-image,background-position将html元素放到背景图片中的期望位置上

  • 内联图片
  • 合并脚本和样式表
2.使用内容发布网络

内容发布网络(CDN)是一组分布在多个不同地理位置的web服务器,用于更加有效地向用户发布内容

3.添加expires头

如何配置组件,最大化利用浏览器缓存改善页面性能

1996 http 1.0 expires 日期

1999 http 1.1 cache-control:max-age=484200 时间数

header 里面设置'Cache-Control':'max-age=600', 来对请求进行缓存。

2015 http 2.0

缓存文档过期之前,缓存可以以任意频率使用这些副本,无需与服务器联系

3.1 条件再验证

  • 客户端if-modified-since服务端last-modified

只有自某个日期之后资源发生了变化之后,才会指示服务器执行请求

  • 客户端if-none-match服务端etag

3.2控制缓存的能力

  • pragma:no-cache

cache-control:no-store

cache-control:no-cache

强制请求新资源,防止缓存提供未经证实的已缓存对象

  • cache-control:max-age
  • expires日期
  • 不附加过期信息,让缓存确定自己的过期日期
  • cache-control:must-revalidate的响应会被存储在本地缓存中,在后续请求时,该指令告知缓存:在事先没有与原始服务器进行再验证的情况下,不能提供这个对象的陈旧副本,但缓存仍然可以随意提供新鲜的副本。
4.压缩组件

减小http响应的大小来减少响应时间。如果http请求产生的响应包很小,传输时间就会减少,因为只需要将很小的包从服务器传送到客户端,这以效果对速度较慢的带宽尤其明显

content-encoding:gzip,default

压缩成本

服务端会花费额外的cpu周期来完成压缩,客户端要对压缩文件进行解压缩,要检测收益是否大于开销。经验是对大于1kb或2kb的文件压缩

5.将样式表放在顶部

使用link标签将样式表放在文档的head中,样式表在页面中的位置不影响下载时间,但是会影响页面的呈现

白屏:浏览器在等待所有样式表下载完成,反之浏览器可以逐步呈现,但要承担闪烁的风险

6.将脚本放在底部

将脚本从页面的顶部移到底部,页面可以逐步呈现,也可以提高下载的并行度

7.避免css表达式

css表达式是动态设置css的一种强大(并且危险)的方式

8.使用外部javascript和css
9.减少DNS查找

操作系统会缓存DNS

10.精简javascript

从代码中移除不必要的字符,优化css,合并相同的类,移除不使用的类

11.避免重定向

重定向会使得页面变慢

12.删除重复脚本
13.配置ETAG
14.避免重排和重绘

浏览器渲染的重排与重绘

浏览器渲染html

html解析成DomTree,css解析cssDomTree
DOM Tree和CSSOM Tree解析完成后,被附加到一起,形成渲染树(Render Tree)。

节点信息计算(重排),这个过程被叫做Layout(Webkit)或者Reflow(Mozilla)。即根据渲染树计算每个节点的几何信息。
渲染绘制(重绘),这个过程被叫做(Painting 或者 Repaint)。即根据计算好的信息绘制整个页面。

重排

实际上是根据渲染树中每个渲染对象的信息,计算出各自渲染对象的几何信息(DOM对象的位置和尺寸大小),并将其安置在界面中的正确位置。

  • 页面首次渲染。
  • 浏览器窗口大小发生改变。
  • 元素尺寸或位置发生改变。
  • 元素内容变化(文字数量或图片大小等等)。
  • 元素字体大小变化。
  • 添加或者删除可见的DOM元素。
  • 激活CSS伪类(例如::hover)。
  • 设置style属性
  • 查询某些属性或调用某些方法。
重绘

相比重排,重绘就简单多了,所谓重绘,就是当页面中元素样式的改变并不影响它在文档流中的位置时,例如更改了字体颜色,浏览器会将新样式赋予给元素并重新绘制的过程称。

position属性,最好是设为absoulte或fixed,这样不会影响其他元素的布局

相关推荐