了解html页面的渲染过程以备学习前端的性能优化

2019-01-14 09:46:58于海丽

一旦example.css文件加载完成,渲染树也就完成了构建,内联的脚本也可以执行,之后解析器又被other.js阻塞住。解析器被阻塞住之后,浏览器会收到第一个渲染请求,“Hi there!” 会被现实在页面上。这个步骤和刚才那种情况是一致的。然后:

复制代码

<html>
<body>
  <link rel="stylesheet" href="example.css">
  <div>Hi there!</div>
  <script>
    document.write('<script src="other.js"></scr' + 'ipt>');
  </script>
  <div>Hi again!</div>
  <script src="last.js"></script>

解析器发现了last.js,但是由于预加载器刚才已经把它给加载下来了,放在了浏览器的缓存里,所以last.js会被立即执行。之后,浏览器会收到渲染请求“Hi again”也被显示在了页面上。
通过前后两种情况的对比,希望大家可以对页面的渲染有一定的了解,然后再有针对性的做一些优化。晚安! (完)^_^