• 浏览器就可以通过访问链接来得到页面的内容
• 通过绘制和渲染,显示出页面最终的样子
• 整个过程中我们要考虑什么问题

知识点

• 页面加载过程
• 性能优化
• 安全性

页面加载

• 从输入URL到HTML的详细过程
• 加载资源的形式
  • 输入URL（或跳转页面）加载HTML
  • 加载html中的静态资源
• 加载一个资源的过程
  • 浏览器根据DNS服务器得到域名的IP地址
  • 向这个Ip的机器发送HTTP请求
  • 服务器收到、处理并返回http请求
  • 浏览器得到返回内容
• 浏览器渲染页面的过程
  • 根据HTML结构生成DOM tree（结构）
  • 根据css生成CSSOM（样式 将css代码进行一个结构化的处理）
  • 将DOM和CSSOM整合形成renderTree(将结构和样式合成渲染树)
  • 根据renderTree渲染和展示
  • 遇到<script>时,会执行并阻塞渲染

image.png

为何要把css放在head中？

好处是浏览器加载完css样式后直接知道规则，如上例子加载到div时就知道div的高度和宽度了，假设将css样式放在div后面，在页面渲染时，先执行div的默认样式，突然又会执行新的样式，出现跳动和卡动现象，用户体验极差，性能极差，本来一次能做的事情却做了两次。

image.png

为何要把js放在body最下边?
js不会阻止body里面dom结构渲染，不会发生阻塞，让页面更快的出来，同时script能拿到所有标签。

image.png

第9行图片是异步请求的，图片标签先加载，即使src资源很大也不会阻止所有DOM渲染。此时img标签已经可用了。

• window.onload和DOMContentLoaded区别

image.png