浏览器页面呈现

虽然这是个老掉牙的问题,但是在这个面试准备的大环境下,不得不再讨论下。

先从 http://fex.baidu.com/blog/2014/05/what-happen/ 这里说起, 算是每一部都说到了,但也只算是科普问。从广义上说,前端也算是计算机的,了解这些无可厚非。但是非要抓住其中的什么来说,简直就是逗了。你要问我显示器的显示原理,我说你大爷的。我有不搞这个。仅仅了解下就可以了。你TM也不清楚深入的啊。再从前端来说,那么就是要抓住重点了。网络部分,浏览器工作部分,这里详细了解倒是必须的。

http://stackoverflow.com/questions/2092527/what-happens-when-you-type-in-a-url-in-browser

In an extremely rough and simplified sketch, assuming the simplest possible HTTP request, no proxies, IPv4 and no problems in any step:

browser checks cache; if requested object is in cache and is fresh, skip to #9
browser asks OS for server's IP address
OS makes a DNS lookup and replies the IP address to the browser
browser opens a TCP connection to server (this step is much more complex with HTTPS)
browser sends the HTTP request through TCP connection
browser receives HTTP response and may close the TCP connection, or reuse it for another request
browser checks if the response is a redirect or a conditional response (3xx result status codes), authorization request (401), error (4xx and 5xx), etc.; these are handled differently from normal responses (2xx)
if cacheable, response is stored in cache
browser decodes response (e.g. if it's gzipped)
browser determines what to do with response (e.g. is it a HTML page, is it an image, is it a sound clip?)
browser renders response, or offers a download dialog for unrecognized types
Again, discussion of each of these points have filled countless pages; take this only as a short summary. Also, there are many other things happening in parallel to this (processing typed-in address, speculative prefetching, adding page to browser history, displaying progress to user, notifying plugins and extensions, rendering the page while it's downloading, pipelining, connection tracking for keep-alive, checking for malicious content etc.) - and the whole operation gets an order of magnitude more complex with HTTPS (certificates and ciphers and pinning, oh my!).

正如上文内容,简练不是细节。了解到这些也就够了。

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
http://www.cnblogs.com/winter-cn/archive/2013/05/21/3091127.html
这里才是前端最应该抓住的重点,而且是从研发角度来看。

浏览器是怎么工作的, 加载到的文件是怎么进行解析,怎么呈现到显示器上的。

一个网页出现的完全过程: 细节到细节

先是事件: 键盘事件 显示屏显示 浏览器产生 事件 调用底层 ,甚至包括 数据到显示器是怎样的 ,显示器原理 硬件: cpu 主板 显卡 。。 到 二进制数据 到 寄存器 存取0-1 数据IO 网络: TCP/IP协议 各种网络协议 DNS 请求部分: http协议详情,协议头,cookie 缓存,cache 、session,本地储存问题, 数据传输:路由器 交换机 代理服务器  服务器:处理数据 后端语言 后端框架 网络: 数据返回 DOM 渲染 过程, CSS 和 JS是怎么应用到页面上的。 CSS 里的图片加载问题,与 JS 文件加载的问题,
好了 ,上面仅作了解,不然真以为自己是谁啊, 不然各种数据流,解析,编码 完全不可理喻 单页应用是怎么 进行的,其渲染过程。

清楚整个流程

但内核不同,解析器和加载都不同。