重点:浏览器的工作原理

无数的计算机相连组成了互联网,当用户在浏览器中输入网页url,到访问到网页,等同于去指定计算机上拿某一个特定文件,网络中文件的传递具有一定的规则,http协议定义了这一套规则。浏览器对从网络中拿到的html文件进行解析渲染,最终呈现出内容。

浏览器的组成:

    浏览器由用户界面、浏览器引擎、渲染引擎、网络、js引擎、ui后端、数据持久化存储组成。

    用户界面:

      浏览器中的输入框、前进/后退按钮等。

   浏览器引擎:

     介于用户界面和渲染引擎之间,主要用于传送指令,例如将高级语言转化成计算机能够理解的机器语言,除此之外,对于本地客户端数据存储也是浏览器引擎提供api。

   渲染引擎:

      主要用于解析html文本和css规则并将内容排版显示有样式的界面。

   网络:

       主要用于处理http请求。

  js引擎:

      解析和执行js脚本。

  ui后端:

     主要用于绘制基本的浏览器窗口内控件:输入框、按钮等。

浏览器解析渲染html文本的过程:

     浏览器通过网络模块下载html文件后对页面进行解析渲染分为4个步骤:解析html文本构建dom树、构建渲染树、渲染树布局阶段、绘制渲染树。

     解析html文档时首先将元素标签转化为dom树上的节点,与此同时解析外部的css文件以及元素的css样式,css解析完了之后,就会根据dom树上dom节点的顺序去提取计算用的css规则并重新计算dom树结构的样式数据,生成一个带样式描述的dom渲染树对象。

     渲染树构建完毕就进入渲染树布局阶段,  根据dom渲染树上每个节点的大小和位置将节点放到页面固定的位置上,这里主要是节点的布局属性生效(display、posistion等属性)。

     最后就是绘制阶段,将渲染树每个节点的背景、颜色、文本等(ui后端做的事)信息应用在节点上,这里主要是元素的显示样式生效(background、text-shadow、color等属性)。

     

     未完待续。。。

       

   

参考资料:

浏览器的工作原理:https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#disqus_thread

原文地址:https://www.cnblogs.com/yy95/p/10134036.html