web性能优化

随着网页内容和功能的越来越复杂,使得页面组件越来越多,造成用户体验变得越来越不好。而体验不好就会造成流量大量流失,这是我们所不能接受的。所以,性能优化也变得越来越重要。

讲真,现在网上有很多文章介绍怎么样优化性能。很多文章针对各个方面的优化写得都不错,但是有点乱。对于脑容量特别稀少的我来说记不住,最好还是捋一遍

1.输入网址按下回车(大致)发生了什么?


  • 1.1 检测本地Hosts文件查找主机名对应IP,如果检测不到就进行DNS解析
  • 1.2 根据查询的IP连接web服务器
  • 1.3 向服务器发送http请求
  • 1.4 服务器响应
  • 1.5 渲染页面
  • 1.6 浏览器发送嵌入HTML的对象的请求(图片、css、js)
  • 1.7 浏览器发送进一步的异步(AJAX)请求

1. 网页的生成过程


网页的生成过程

网页的生成过程,大致可以分成五步。

  • HTML代码转化成DOM
  • CSS代码转化成CSSOM(CSS Object Model)
  • 结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息)
  • 生成布局(layout),即将所有渲染树的所有节点进行平面合成
  • 将布局绘制(paint)在屏幕上

这五步里面,第一步到第三步都非常快,耗时的是第四步和第五步。
“生成布局”(flow)和”绘制”(paint)这两步,合称为”渲染”(render)。

网页的生成过程2

2. 重排和重绘

网页生成的时候,至少会渲染一次。用户访问的过程中,还会不断重新渲染。

以下三种情况,会导致网页重新渲染。

  • 修改DOM
  • 修改样式表
  • 用户事件(比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等)

重新渲染,就需要重新生成布局和重新绘制。前者叫做”重排”(reflow),后者叫做”重绘”(repaint)。
需要注意的是,”重绘”不一定需要”重排”,比如改变某个网页元素的颜色,就只会触发”重绘”,不会触发”重排”,因为布局没有改变。但是,”重排”必然导致”重绘”,比如改变一个网页元素的位置,就会同时触发”重排”和”重绘”,因为布局改变了。

3. 对于性能的影响

重排和重绘会不断触发,这是不可避免的。但是,它们非常耗费资源,是导致网页性能低下的根本原因。
提高网页性能,就是要降低”重排”和”重绘”的频率和成本,尽量少触发重新渲染。

熟悉各个步骤可以让我们针对每个步骤进行优化

我们可以从三大方面进行优化

  • 页面优化

    • 减少http请求
    • 减少交互通信量
    • 合理并行加载资源
    • 减少消耗
  • 服务器端优化

    • CDN
    • 缓存
    • Gzip
    • 减少DNS
    • 响应速度
  • 主观优化

    • 目录优化
    • 内容优化(灵魂)
    • 体验优化
    • SEO