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

  网页生成过程,大致可以分成五步
  
  1. HTML代码转化为DOM
  
  2. CSS代码转化成CSSOM(CSS Object Model)
  
  3. 结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息)
  
  4. 生成布局(layout),即将所有渲染树的所有节点进行平面合成
  
  5. 将布局绘制(paint)在屏幕上
  
  在这五步里面,第一步到第三部都非常快,第四步和第五步很耗时。
  
  重排和重绘
  
  网页生成的时候,至少会渲染一次。而我们需要关注的是用户访问过程中,那些会导致网页重新渲染的行为:
  
  · 修改DOM
  
  · 修改样式表
  
  · 用户事件(例如鼠标悬停,页面滚动,输入框输入文字等)
  
  重新渲染,就涉及重排和重绘
  
  重排(reflow)
  
  即重新生成布局,重排必然导致重绘,如元素位置的改变,就会触发重排和重绘。
  
  重绘(repaint)
  
  即重新绘制,需要注意的是,重绘不一定需要重排,比如改变某个元素的颜色,就只会触发重绘,而不会触发重排。
  
  对于性能的影响
  
  重排和重绘会不断触发,这是不可避免的,但是它们非常消耗资源,是导致网页性能低下的根本原因。
  
  提高网页性能,就是要降低重排和重绘的频率和成本,尽量少触发重新渲染。
  
  大部分浏览器通过队列化修改和批量显示优化重排版过程。然而有些操作会强迫刷新并要求所有计划改变的部分立刻应用。
  
  本资料作为dom操作最佳实践的补充
  
  刷新率
  
  网页动画的每一帧(frame)都是一次重新渲染,每秒低于24帧的动画,人眼就能感受到停顿。一般的网页动画,需要达到每秒30帧到60帧的频率,才能比较流畅。
  
  而大多数显示器的刷新频率是60Hz,为了与系统一致,以及节省电力,浏览器会自动按照这个频率,刷新动画。所以,如果网页能够做到每秒60帧,就会跟显示器同步刷新,达到最佳的视觉效果。这意味着,一秒之内进行60次重新渲染,每次重新渲染的时间不能超过16.66ms。
  
  刷新率
  
  FPS(frame per second),即一秒之间能够完成多少次重新渲染
  
  开发者工具的Timeline面板
  
  通过JS代码实现 FPS 的检测
  
  这个时候 我们拿 我去年写的 Vuejs 中文社区的网站。来试一试
  
  VueJs 中文社区
  
  打开控制台执行下面的代码:
  
  // 返回是否 有 requestAnimationFrame 方法  1000ms 会执行 60 次
  
  var rAF = function () {
  
  return (
  
  window.requestAnimationFrame ||
  
  window.webkitRequestAnimationFrame ||
  
  function (callback) {
  
  window.setTimeout(callback, 1000 / 60);
  
  }
  
  );
  
  }();
  
  var frame = 0;
  
  var allFrameCount = 0;
  
  var lastTime = Date.now();
  
  var lastFameTime = Date.now(www.baohuayule.net);
  
  var loop = function () {
  
  var now = Date.now(www.yigouyule2.cn );
  
  var fs = (now - lastFameTime);
  
  var fps = Math.round(1000 / fs);
  
  lastFameTime = now;
  
  // 不置 0,在动画的开头及结尾记录此值的差值算出 FPS
  
  allFrameCount++;
  
  frame++;
  
  if (now > 1000 +www.boshenyl.cn   lastTime) {
  
  var fps = Math.round((frame * 1000) / (now - lastTime));
  
  console.log(`${new Date()} 1S内 FPS:`, fps);
  
  frame = 0;
  
  lastTime = now;
  
  };
  
  rAF(loop);
  
  }
  
  loop();
  
  然后我们看到了如下的显示:
  
  Mon Aug 13 2018 20:14:44 GMT+0800 (中国标准时间) 1S内 FPS: 60
  
  Mon Aug 13 2018 20:14:45 GMT+0800 (中国标准时间) 1S内 FPS: 60
  
  Mon Aug 13 2018 20:14:46 GMT+0800 (中国标准时间) 1S内 FPS: 55
  
  Mon Aug 13 2018 20:14:47 GMT+0800 (中国标准时间) 1S内 FPS: 60
  
  Mon Aug 13 2018 20:14:48 GMT+0800 (中国标准时间) 1S内 FPS: 60
  
  Mon Aug 13 2018 20:14:49 GMT+0800 (中国标准时间) 1S内 FPS: 60
  
  Mon Aug 13 2018 20:14:50 GMT+0800 (中国标准时间) 1S内 FPS: 58
  
  Mon Aug 13 2018 20:14:51 GMT+0800 (中国标准时间) 1S内 FPS: 60
  
  Mon Aug 13 2018 20:14:52 GMT+0800 (中国标准时间) 1S内 FPS: 60
  
  Mon Aug 13 2018 20:14:53 GMT+0800 (中国标准时间) 1S内 FPS: 60
  
  Mon Aug 13 2018 20:14:54 GMT+0800 (中国标准时间) 1S内 FPS: 56
  
  Mon Aug 13 2018 20:14:55 GMT+0800 (中国标准时间) 1S内 FPS: 59
  
  刚刚好 屏幕的刷新率就在 60 fps 左右, 很流畅。
  
  写在最后
  
  在现在 Vue 、Recat 、 Angular 三大框架盛行的当今,最原始的 浏览器渲染网页的时候就做哪些事情或许我们已经忘记了一些。
  
  这篇文章也只是做一个基础的记忆,网页是如何进行渲染的,在这三大框架的下,虚拟DOM 的出现,对于网页加载有什么优势?
  
  重排、重绘的时候就做哪些事情? 页面渲染的性能瓶颈往往出现在哪里? 我们如何能够减少这些性能消耗的操作?
  
  这些疑问,都是这边文件做的一个解释。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值