美文网首页
浏览器加载页面和渲染过程

浏览器加载页面和渲染过程

作者: 颖小李 | 来源:发表于2020-05-13 15:17 被阅读0次

参考:Web 前端面试指南与高频考题解析 浏览器相关
加载过程:

  • 浏览器根据DNS服务器得到域名的IP地址
  • 向这个IP的机器发送HTTP请求
  • 服务器收到、处理并返回HTTP请求
  • 浏览器得到返回内容

返回内容其实就是一堆HTML格式的字符串。

渲染过程:

  • 根据HTML结构生成DOM树
  • 根据CSS生成CSSOM
  • 将DOM和CSSOM整合形成RenderTree
  • 根据RenderTree开始渲染和展示
  • 遇到<script>时,会执行并阻塞渲染

为何要把CSS放在HTML头部?可以让浏览器尽早拿到CSS尽早生成CSSOM,然后在解析HTML之后可一次性生成最终的RenderTree,渲染一次即可。如果CSS放在HTML底部,会出现渲染卡顿的情况,影响性能和体验。

渲染过程中,如果遇到script就停止渲染,执行JS代码。因为浏览器渲染和JS执行共用一个线程,而且这里必须是单线程操作,多线程会产生渲染DOM冲突。

为何要把script放在HTML底部?JS放在底部可以保证让浏览器优先渲染完现有的HTML内容,让用户先看到内容,体验好。另外,JS执行如果涉及DOM操作,得等待DOM解析完成才行,JS放在底部执行时,才不会因为操作DOM而报错。

关于浏览器的整个流程,可以参考百度的多益大神的从输入 URL 到页面加载完成的过程中都发生了什么事情?

相关文章

  • 网页的渲染机制

    网页的渲染机制 参考文章:ScriptJava——了解HTML页面的渲染过程浏览器加载,解析,渲染的过程HTML渲...

  • 网页的渲染机制

    网页的渲染机制 参考文章:ScriptJava——了解HTML页面的渲染过程浏览器加载,解析,渲染的过程HTML渲...

  • 前端性能优化:静态资源加载与优化

    css和js的装载与执行-HTML 页面加载渲染的过程 一个网站在浏览器端是如何进行渲染的呢? HTML渲染过程的...

  • 网页生成的过程

    网页生成的过程 一、浏览器渲染页面的流程 当浏览器获得一个html文件时,会 “自上而下” 加载,并在加载过程中进...

  • 浏览器渲染页面过程

    浏览器渲染页面过程 1. 构建DOM和CSSOM树 浏览器渲染页面前需要构建DOM和CSSOM树 浏览器解析过程大...

  • 浏览器加载页面和渲染过程

    参考:Web 前端面试指南与高频考题解析 浏览器相关加载过程: 浏览器根据DNS服务器得到域名的IP地址 向这个I...

  • 浏览器的渲染:过程与原理

    浏览器渲染页面的过程 从耗时的角度,浏览器请求、加载、渲染一个页面,时间花在下面五件事情上: DNS 查询 TCP...

  • web性能优化 - JS延迟

    概述 (摘抄自 前端大学 微信号)页面被浏览器解析是自上而下,而js 的加载、解析和执行会阻塞页面的渲染过程,如果...

  • 页面加载和渲染过程

  • javascript性能优化

    优化页面加载时间html标签加载顺序浏览器加载和执行script标签引入的js时,会暂停页面渲染,直到代码加载并执...

网友评论

      本文标题:浏览器加载页面和渲染过程

      本文链接:https://www.haomeiwen.com/subject/ymmnnhtx.html