浏览器输入一个URL会发生什么事

关于这个问题很明显是要熟悉浏览器的工做机制，网络上也有答案。
别小看这个问题，它涉及的知识面至关广，要想说清楚，还真不是件容易的事。

先从这张著名的图提及，只要搞懂了这张图的每一个模块，那咱们也就知道是发生什么事了

1.User Interface 用户界面

通俗的说就是浏览器呈现给用户的样子，如顶部（前进，后退，刷新，中止，地址栏，书签栏，状态栏，工具栏等按钮），侧栏（滚动条），底栏（滚动条），自带的开发工具，下拉菜单，下载管理等，固然每一个浏览器厂商还有本身的特性。

2.Browser engine 浏览器引擎

从百科上查到引擎（Engine）是电子平台上开发程序或系统的核心组件。

利用引擎，开发者可迅速创建、铺设程序所需的功能，或利用其辅助程序的运转。通常而言，引擎是一个程序或一套系统的支持部分。常见的程序引擎有游戏引擎，搜索引擎，杀毒引擎等。

从上图来看，浏览器引擎向上链接用户界面模块，向下链接渲染引擎模块，向右链接数据持久模块，很好的诠释了百科中的定义。

3.Rendering engine 渲染引擎

分量很重的模块，页面的表现及交互体验就是靠它。

从网上摘这么一个片断：
渲染引擎的责任就是将渲染完的放在浏览器窗口中以显示请求的数据。

渲染引擎默认是能显示html、xml和图片，而且经过一些插件能够显示其余类型资源，如使用 a PDF viewer插件显示PDF格式。
咱们参考的浏览器是-firefox、chrome和safari构造在上面的两种渲染引擎上。Firefox使用是自家生产的mozilla渲染引擎－gecko，Safari和chrome都使用webkit.
Webkit是一个开源的渲染引擎，当初只是做为 liunx平台的引擎，经过苹果公司的修改开始支持mac和window系统。

它的基本流程是从网络层（networking）获取请求文档的内容，解析HTML/SVG/XHTML，造成Dom树，解析CSS造成CSS规则树，二者结合构建成渲染树，经过JS解释器解析脚本，最后经过UI后台提供的接口绘出最终效果。这篇文章详细的讨论了渲染引擎的工做原理，这部分是页面性能优化的关键部分，但愿看官们仔细理解，这里就再也不说了。

4.Networking

用于网络调用，经过调用操做系统或gui框架提供的api。

好比 HTTP,HTTPS 请求，关注下HTTP协议。
这篇文章对于提高页面加载响应速度有一个详细的总结。

Javascript Interpreter javascript解释器

解析和运行JS

不一样浏览器有不一样的javascript解释器，请看这里。

UI Backend

用于绘制基本的部件，例如combo 和windows。
它暴露的是一个通常化的接口而不是为某个特殊平台单独处理。

底层使用的是操做系统用户接口方法。

Data Persistence

这是一个持久层。浏览器须要保存各类分类的数据在硬盘，例如cookies和HTML5的本地数据库等，都是经过这层来实现的。

最后总结

一旦输入URL，DNS会进行查询与解析，而后创建链接，在服务器端会有数据库查询，业务处理，返回数据，最后渲染页面，执行脚本，加载各类资源，如图片，视频，音乐等。

---

下面这篇文章基本和前端知识没多大关系，不过了解下没有坏处
从输入 URL 到页面加载完成的过程当中都发生了什么事情？

参考：
引擎
再谈Yahoo关于性能优化的N条规则
浏览器的工做原理：新式网络浏览器幕后揭秘
新web应用架构
HTTP 头部详解