前端学习之浏览器渲染问题

1.浏览器中输入一个地址后发生了什么?

DNS解析获取IP地址(浏览器缓存 地址缓存 路由缓存)->TCP连接->发送http请求->服务器响应请求返回->渲染页面->释放连接->结束

2.渲染页面

  如jsp里有css,js文件

输入.jsp后,开始解析html代码 生生dom树 

同时遇见.css .js的外部文件也会去下载 (资源请求是异步的)下载完加载css生成css的树

dom树和css树生成render树  

浏览器并不是解析完所有的html才显示出来  而是渲染一部分出一部分

js主要通过自己的domapi和cssapi来和dom树一起构建render树

浏览器的工作原理:

浏览器的主要组件为 (1.1):

  1. 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外,其他显示的各个部分都属于用户界面。
  2. 浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
  3. 呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。
  4. 网络 - 用于网络调用,比如 HTTP 请求。其接口与平台无关,并为所有平台提供底层实现。
  5. 用户界面后端 - 用于绘制基本的窗口小部件,比如组合框和窗口。其公开了与平台无关的通用接口,而在底层使用操作系统的用户界面方法。
  6. JavaScript 解释器。用于解析和执行 JavaScript 代码。
  7. 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据,例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”,这是一个完整(但是轻便)的浏览器内数据库。

    How browsers work[中文版]

优化:

原文地址:https://www.cnblogs.com/theworldofbeisong/p/9482223.html