search

SoXnix / Front-end-day-by-day

way to front end day by day
MIT License
7 stars 1 forks source link

当我们打开浏览器访问http://www.google.com的时候发生了什么? #1

Closed RaineySpace closed 8 years ago

RaineySpace commented 8 years ago

  1. 识别URL

    完整的URL是由协议（比如http,ftp）、域名（比如baidu.com）、文件路径（比如`/html_data/20.html）和端口（比如80）四个部分组成。

  2. 查找本地hosts文件

    在进行DNS请求前，系统会先检查自己的Hosts文件中是否有这个地址映射关系，如果有则调用这个IP地址映射。

  3. 域名解析

    查询本地域名服务器，解析域名为IP地址。本地域名服务器会去访问根域名服务器（.com），查找二级域名服务器(google.com)的IP。然后通过二级域名服务器的IP查找三级域名服务器(www.googlr.com)的IP地址，从而得到网址所对应的IP地址，并返回给浏览器。

  4. 根据IP地址访问服务器

    访问服务器，如果服务器使用了反向代理，那么就通过反向代理指定的路径返回HTML文件。

  5. 浏览器解析

    浏览器将HTML渲染成DOM树，并重新请求css、js、图片等资源文件。当CSS文件加载后开始解析和构建CSS规则树（CSS Rule Tree）。当JS文件加载后，通过DOM API和CSSOM API来操作DOM树和CSS规则树。

  6. 浏览器渲染

    浏览器引擎通过DOM树和CSS规则树构建Rendering树

    通过CSS规则树匹配DOM树进行定位坐标和大小，是否换行，以及position、overflow、z-index等等属性，这个过程称为Flow或Layout。

    最终通过调用Native GUI的API绘制网页画面的过程称为Paint。

    当用户在浏览网页时进行交互或通过js脚本改变页面结构时，以上部分操作有可能重复运行，此过程称为Repaint或Reflow。

    当元素改变的时候，将不会影响元素在页面当中的位置（比如 background-color, border-color, visibility），浏览器仅仅会应用新的样式重绘此元素，此过程称为 Repaint。

    当元素改变的时候，将会影响文档内容或结构，或元素位置，此过程称为 Reflow。（ HTML 使用的是 flow based layout ，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫 Reflow。）

Nick930826 commented 8 years ago

让友谊的小船 荡起双桨