输入一个网址到页面展示网页内容的这段时间内,浏览器和服务端都发生了什么

  接下来谈论一个比较常见的问题:从我们打开浏览器输入一个网址到页面展示网页内容的这段时间内,浏览器和服务端都发生了什么事情? 我们直接来看一个相对简洁但比较清晰的过程描述。

  在接受到用户输入的网址后,浏览器会开启一个线程来处理这个请求,对用户输入的 URL 地址进行分析判断,如果是 HTTP 协议就按照 HTTP 方式来处理。
  调用浏览器引擎中的对应方法,比如 Web View 中的 loadUrl 方法,分析并加载这个 URL 地址。
  通过 DNS 解析获取该网址地址对应的 IP 地址,查询完成后连同浏览器的 Cookie丶userAgent 等信息向网站目的 IP 发出 GET 请求。
  进行 HTTP 协议会话,浏览器客户端向 Web 服务器发送报文。
入网站后台上的 Web 服务器处理请求,如 Apache丶Tomcat丶Node.js 等服务器。
进入部署好的后端应用,如 PHP丶Java丶Javascript丶Python 等后端程序,找到对应的请求处理逻辑,这期间可能会读取服务器缓存或查询数据库等。
服务器处理请求并返回响应报文,此时如果浏览器访问过该页面,缓存上有对应资源,会与服务器最后修改记录对比,一致则返回 304 ,否则返回 200 和对应的内容。
浏览器开始下载 HTML 文档(响应报头状态码为 200 时)或者从本地缓存读取文件内容(浏览器缓存有效或响应报头状态码为 304 时)。
浏览器根据下载接收到的 HTML 文件解析结构建立 DOM 文档树,并根据 HTML 中的标记请求下载指定的 MIME 类型文件 (如 CSS丶Javascript脚本等),同时设置缓存等内容。
页面开始解析渲染 DOM ,CSS 根据规则解析并结合 DOM 文档树进行网页内容布局和绘制渲染,Javascript 根据 DOM API 操作 DOM ,并读取浏览器缓存丶执行事件绑定等,页面整个展示过程完成。
  整个过程中使用到了较多的浏览器功能,如用户地址栏输入框丶网络请求丶浏览器文档解析丶渲染引擎丶Javascript 执行引擎丶客户端存储等。

  通常我们认为浏览器主要由七部分组成:用户界面丶网络丶Javascript 引擎丶渲染引擎丶UI 后端丶Javascript 解释器和持久化数据存储。如下图所示:  作为前端开发者,我们需要重点理解渲染引擎的工作原理,灵活运用数据持久化存储技术,因为实际的开发工作中这部分的操作比较多,而其他几个部分都是由浏览器决定的,开发者控制的部分相对较少。渲染引擎在浏览器中主要用于解析 HTML 文档和 CSS 文档,然后 将 CSS 规则应用到 HTML 标签元素上,并将 HTML 渲染到浏览器窗口中以显示具体的 DOM 内容。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复