web前端——浏览器基础知识

Web浏览器的主要功能是展示网页资源，即请求服务器并将结果展示在窗口中。

地址栏输入URL到页面显示经历的过程

1、操作系统访问DNS服务器，把域名转化为IP

2、浏览器发起http请求

3、找到指定的资源，可能访问数据库，构建并返回http响应消息

4、浏览器接收并解析响应消息

5、浏览器缓存接收到的响应消息，解析并渲染响应内容

浏览器的主要组件

1. 用户界面——包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。

2. 浏览器引擎——用来查询及操作渲染引擎的接口。

3. 渲染引擎——用来显示请求的内容，例如，如果请求内容为HTML，它负责解析HTML及CSS，并将解析后的结果显示出来。

4. 网络——用来完成网络调用，例如HTTP请求，它具有平台无关的接口，可以在不同平台上工作。

5. UI后端——用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。

6. JS解释器——用来解释执行JS代码。

7. 数据存储——属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术。

Chrome为每个Tab分配了各自的渲染引擎实例，每个Tab就是一个独立的进程。

浏览器渲染

关于浏览器的渲染原理，这里有篇流传很广很不错的文章——《How browsers work》（英文版，中文翻译版）

浏览器渲染过程中经常伴随着reflow和repaint，如果只是改变某个元素的背景色、文字颜色等不影响Dom布局的属性时会引起浏览器进行repaint，相对而言，如果改变影响Dom布局的属性时就会引起浏览器进行reflow，而reflow比repaint开销要大很多，因此应尽量避免。