从输入 URL 到页面加载完成的过程中都发生了什么事情

《从输入 URL 到页面加载完成的过程中都发生了什么事情?》这篇文章并不是为了帮大家准备面试,而是想借这道题来介绍计算机和互联网的基础知识,让读者了解它们之间是如何关联起来的。 (by @吴多益 )

131 thoughts on “从输入 URL 到页面加载完成的过程中都发生了什么事情

  1. 我面试的时候也被问到了 输入url,输入过程中 chrome已经开始预加载,暂不讨论 按回车,浏览器获取到url,访问dns服务器,dns服务器解析成对应的远程ip地址 浏览器将默认的request header及请求发送给远程服务器 服务器接受到请求,处理完毕后,将响应发送给客户端浏览器,浏览器根据响应头进行解析

  2. 回复@吴多益: 很多领域的知识用不了几年就全掌握了,没啥可进一步学习的。感觉有些不对, 知识都是由表入深的。其实精了才能真正的广,否则都只是知道些表皮而已。

  3. 写这么细应该专门来一个提纲,提纲里每条再连接到具体内容。 //@吴多益:初版终于写完了,为了有点新意,我引入了不少硬件相关的内容,欢迎大家来讨论。 http://t.cn/RvUV44i

  4. 硬件开篇和收尾[赞]//@王集鹄: 开始就看到“电容、电流、电压”一下兴趣就来了。 //@JS小组:#好文分享# →_→ //@吴多益: 初版终于写完了,为了有点新意,我引入了不少硬件相关的内容,欢迎大家来讨论。 http://t.cn/RvUV44i

  5. 这样招不到正常人//@老赵:这答案是神经病,假如面试者期望这种,我支持抽人…… //@yuange1975:写这么细应该专门来一个提纲,提纲里每条再连接到具体内容。 //@吴多益:初版终于写完了,为了有点新意,我引入了不少硬件相关的内容,欢迎大家来讨论。 http://t.cn/RvUV44i

  6. 博主干这事儿的时候一定自我感觉特别良好吧?//@老赵 :这答案是神经病,假如面试者期望这种,我支持抽人…… //@吴多益:初版终于写完了,为了有点新意,我引入了不少硬件相关的内容,欢迎大家来讨论。 http://t.cn/RvUV44i

  7. 已阅,有两个问题不懂,“这样的博文发在一个前端的团队博客上?”以及“说好的人遇到这样的题目也会给这样的答案吗?”。//@其实我是一个前端: 期待已久,先转为敬。

  8. 丧心病狂 //@老赵: 这答案是神经病,假如面试者期望这种,我支持抽人…… //@dh20156: 同意,让读者可以选择性深入 //@yuange1975:写这么细应该专门来一个提纲,提纲里每条连接到具体内容。 //@吴多益:初版终于写完了,为了有点新意,我引入了不少硬件相关的内容,欢迎大家讨论。 http://t.cn/RvUV44i

  9. 什么岗位?[挖鼻屎]//@WhisperXD: 蛇精病[偷乐]//@zx-dennis: 这是为了显摆吧?//@时金魁: 这样招不到正常人//@老赵:这答案是神经病,假如面试者期望这种,我支持抽人…… //@吴多益:初版终于写完了,为了有点新意,我引入了不少硬件相关的内容,欢迎大家来讨论。 http://t.cn/RvUV44i

  10. 深究的话,可以写到cpu内部的指令集运算,逻辑电路电压电流变化,电阻内部电子移动,由于电子是最小粒子,所以无法再往下了…

  11. 再网络传输部分过于简单。没写再网络中怎么传输,应该把报文,5层网络,连路层怎么传输,光纤内部怎么折射都写出来。

  12. 面试的时候可以现场查资料么?请问这是考古题还是面试题呢?//@ShiverySea: 考试前的小抄也算是挑战…… //@李彬孟:囧 //@胡嵩: B格上了一个量级有没有//@登平登平: //@tsroot:这答案。//@bnu_chenshuo: nod. //@老赵:这答案是神经病,假如面试者期望这种,我支持抽人//@dh20156:

  13. 其实掌握C++的关键点不再语言本身,而是操作系统、网络等很多知识点的融合//@GeniusVczh: 看来我是不是该问问一个cpp到运行起来中间都发生了什么……

  14. 内容太简陋,作者基本上都是通过各种百度出来的结果拼凑的。对网络的理解跟门外汉没什么两样。“最后家庭路由一般会通过双绞线连接到运营商网络的。”这个还用说嘛?“数据过双绞线发送到运营商网络后”,作者真的认识所有的网线嘛?//@喜欢飞行的工程师: [赞]//@吴多益: http://t.cn/RvUV44i

  15. 一个面试题要考察这么多东西确实不妥,就前端来说,候选人能说出网络层和浏览器中发生的事情就很不错了,但这是很好的一篇科普文。某些带有语气的回复很有意思啊,想起老罗那句我们只是认真的话了。//@胡嵩: B格上了一个量级有没有 //@老赵:这答案是神经病,假如面试者期望这种,我支持抽人

  16. 这是一个典型的结构不清、主次不分、逻辑混乱的答案。作为面试者我只想问一句:您的答案在哪里?为了避免应聘者出现类似错误,下次我提这个问题的时候一定要加上这么半句:请您简要地回答… //@hz智锦 //@吴多益:为了有点新意,我引入了不少硬件相关的内容,欢迎大家来讨论。http://t.cn/RvUV44i

  17. 写的非常不条理。对此问题的分析应按照“分层抽象”原则,从客户端软件栈、网络协议栈、服务器端软件栈三个方面回答。从3个栈的最顶层开始讲,如果面试双方有能力,就继续探究下一层。 //@吴多益:初版终于写完了,为了有点新意,我引入了不少硬件相关的内容,欢迎大家来讨论。 http://t.cn/RvUV44i

  18. 还是太狭隘,至少缺了二进制起源与周易的内在本质的分析,“一花一世界“思想和虚拟化技术的哲学共通点的分析等,希望继续总结//@psymon: 我觉得少了人的感官神经描述和现代物理的介绍,还是不够全面,希望继续总结。

  19. 无语了~//@Bosn: 面试的时候可以现场查资料么?请问这是考古题还是面试题呢?//@ShiverySea: 考试前的小抄也算是挑战…… //@李彬孟:囧 //@胡嵩: B格上了一个量级有没有//@登平登平: //@tsroot:这答案。//@bnu_chenshuo: nod. //@老赵:这答案是神经病,假如面试者期望这种,我支持抽人//@dh20156:

  20. 我觉得这种面试题挺好,比跟我根儿笔让我默写代码强得多,//@姜大炮: 照这个zb程度只要答出从按下键盘某个键到屏幕显示这个字符就够喝一壶的//@陈小玉:好问题,里面涉及到的东西好多,每个环节都值得深入研究很久 //@ARGV:

  21. sa+dba应该就答得差不多了,再加上做过开发就完美了。当然,门电路等说下去就无底洞了。其实这种题目跟sql语句的一生是一回事;对象从出生、引用、再到消亡也是一回事。别太当真

  22. 记得6年前上胡伟武的芯片设计课,老胡第一节课就说,上完这门课,我希望你们能搞清楚,我翻了一页PPT,计算机内部都做了那些流水操作,当然啦,我是一点都不记得了。。//@唐福林: 与时俱进,现在应该问从打开app到刷新出内容,整个过程中都发生了什么,如果感觉慢,怎么定位问题,怎么解决

  23. DNS解析URL出IP/Port,浏览器连接并向此地址发出GET请求,web服务端(nginx、apache)接收到请求后,通过CGI等接口协议调用动态语言(php等),动态语言再连接数据库查询相应数据并处理,然后反馈给浏览器,浏览器解析反馈页面,通过html、javascript、css处理后呈现到屏幕……每个细节的话估计要800页的书

  24. 回复@吴多益:现在这种需要多个岗位配合的时代, 重要的是在自己领域的专精而不是全能吧, full stack更适合start up和freelance

  25. 地址栏获取到地址,发送给服务器http或https请求,得到响应,解析响应数据,如果是html,则利用dom引擎解析,然后初步渲染dom结构,进一步解析,找到js或者css请求标签,发送请求获取相关脚本,响应成功后使用js或css解析引擎解析脚本进一步修饰dom

  26. 回复@问飞:不矛盾,对于初学者来说确实需要精,但高阶就需要广了,而且很多领域的知识用不了几年就全掌握了,没啥可进一步学习的

  27. 请叙述一下世界历史,越详细越好,然后面试者阵亡。//@InfoQ: //@守住每一天: //@ARGV://@唐福林:与时俱进,现在应该问从打开app到刷新出内容,整个过程中都发生了什么,如果感觉慢,怎么定位问题,怎么解决

  28. 等看帖。从第一次看到这个问题至今已有一年多,每次看到都会有新答案。昨天又偶然看到了这个问题,脑补的内容DNS查询时候的负载均衡。感觉,这个问题可以写本小书了。。。[挖鼻屎]//@_Franky: 额,等着看帖子吧.

  29. 业界良心,不过了解 event loop 后这些全无压力。[挖鼻屎]//@ASV5: 等帖子。。//@真阿当: 确实是个好题,脑补了一下,发现可以说的知识覆盖到的广度好大。发散性的问题,无论是知识的深度还是广度都能测出来。 //@教主:等着看帖子,不会写到物理层吧。 //@_Franky:额,等着看帖子吧.

  30. 坐等多益文章,应该会涉及到浏览器架构、操作系统UI、操作系统网络、编译器、CSS布局/Dom Tree、JavaScript解释器… User Interface->Networking->Browser engine->Data Persisitence->Rending engine->JavaScript Interpreter-> UI Backend

  31. 这不是我的面试题么!!!吴多益同学从哪里遇到过这个题的?//@yuange1975: 面试时大的方面能说得比较全就不错了,不知道博主写一些安全方面的处理没有。

  32. 这不是我的面试题么! 还有一道题,用户反应我们网站卡,请问都有哪些可能性,以及排方法。//@yuange1975: 面试时大的方面能说得比较全就不错了,不知道博主写一些安全方面的处理没有。

  33. [哈哈] 小编想起来了,貌似刚从业那会儿,前端界最美丽的姐@sherrie_wong 面试问过小编这道题.然后我当时把知道的全说了,从浏览器解析,发请求,7层网络模型实际用的模型,TCP三次握手.经路由,交换机,DNS,到服务器.在是否需要与文件系统还是数据库打交道,再者分布式运算hadoop啥的…聊了太多.

  34. DNS请求解析出IP 当然DNS也可能缓存 tcp连接 构造http协议发出请求 服务器可能返回资源没有变化 那么浏览器会使用本地缓存 或者返回html 然后浏览器解析html中的资源 发出后续请求 请求js css 等各种资源 然后交给浏览器的相应引擎解析展示

  35. 这是要诠释下互联网?//@caoz: 这不是我的面试题么! 还有一道题,用户反应我们网站卡,请问都有哪些可能性,以及排方法。//@yuange1975: 面试时大的方面能说得比较全就不错了,不知道博主写一些安全方面的处理没有。

  36. yuange一提安全,大家都愣了 //@yuange1975:我算对整个过程比较清楚,包含服务器的处理,web服务器和浏览器的处理以及安全问题,估计少有对两者的安全都研究过的。但面试时要清晰的比较完整的把大块流程列出来说明白,也有难度。估计也很难有机会时间去整理文章了。//@caoz: 这不是我的面试题么!

  37. 从键盘到弹簧入万有引力而后直达量子力学。 //@小猪: 深究得话。。要写上下册两本书//@邱英波:不会说到360吧…… //@kobe:不会从输入框响应回车事件说起吧//@教主: 等着看帖子,不会写到物理层吧。//@_Franky:额,等着看帖子吧.

  38. 得限定一个深度,比如截至到晶体管和电信号级别。//@pkuxkxjason: 广度还好说,要深度的话几乎是无穷的。

  39. 这题装逼大法去了,不说范围,光一个输入url就够讲几天的 //@sparkman: 好题!//@吴多益:会 //@教主: 等着看帖子,不会写到物理层吧。//@_Franky:额,等着看帖子吧.

  40. 我想到的是二进制数据流从硬盘跑到内存再到处理器经网卡到宽带猫变成模拟信号到电信局端处理成光纤信号到国家因特网节点中心到海底光缆出口节点…..

  41. 我记得上学时这道题是网络工程必考的。。 //@yuange1975:我算对整个过程比较清楚,包含服务器的处理,web服务器和浏览器的处理以及安全问题,估计少有对两者的安全都研究过的.但面试时要清晰的比较完整的把大块流程列出来说明白,也有难度.估计也很难有机会时间去整理文章了。//@caoz: 这不是我的面试题么!

  42. 以前对这个感兴趣,了解了也就那么回事。看过http definitive Guide 就能答个八九不离十。剩下的就是经验了

  43. 写的还是不错的,但是还是有一些缺漏,比如arp欺骗? 著名的GFW的阻断策略,以及,一个URL可不是只有一个请求,多个请求的排队和寻址?此外,cdn, 智能dns解析机制等。//@ZRJ-: http://t.cn/8smHpMF 从点击到呈现 — 详解一次HTTP请求 我大三的时候写的。。 啊

  44. 可深入到PN结中的电子流动层面 //@张小俊128: 我要失业了[生病] //@前端交流://@吴多益:会 //@教主: 等着看帖子,不会写到物理层吧。//@_Franky:额,等着看帖子吧.

  45. 话说尝试自己做个浏览器,甚至不用真正去做,只是思考一下会怎样做的话,很多愚蠢的问题根本就不会提出来了。既然做前端,了解一下浏览器原理没啥不好。

发表评论