浏览器：一个浏览器是如何工作的？（阶段一）

winter



该思维导图由 AI 生成，仅供参考

对于前端开发来说，我们平时与浏览器打交道的时间是最多的。可浏览器对前端同学来说更多像一个神秘黑盒子的存在。我们仅仅知道它能做什么，而不知道它是如何做到的。
在我面试和接触过的前端开发者中，70% 的前端同学对这部分的知识内容只能达到“一知半解”的程度。甚至还有一部分同学会质疑这部分知识是否重要：这与我们的工作相关吗，学多了会不会偏移前端工作的方向？
事实上，我们这里所需要了解的浏览器工作原理只是它的大致过程，这部分浏览器工作原理不但是前端面试的常考知识点，它还会辅助你的实际工作，学习浏览器的内部工作原理和个中缘由，对于我们做性能优化、排查错误都有很大的好处。
在我们的课程中，我也会控制浏览器相关知识的粒度，把它保持在“给前端工程师了解浏览器”的水准，而不是详细到“给浏览器开发工程师实现浏览器”的水准。
那么，我们今天开始，来共同思考一下。一个浏览器到底是如何工作的。
实际上，对浏览器的实现者来说，他们做的事情，就是把一个 URL 变成一个屏幕上显示的网页。
这个过程是这样的：
浏览器首先使用 HTTP 协议或者 HTTPS 协议，向服务端请求页面；
把请求回来的 HTML 代码经过解析，构建成 DOM 树；
计算 DOM 树上的 CSS 属性；
最后根据 CSS 属性对元素逐个进行渲染，得到内存中的位图；
一个可选的步骤是对位图进行合成，这会极大地增加后续绘制的速度；
合成之后，再绘制到界面上。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

本文深入介绍了浏览器的工作原理，从HTTP请求到页面渲染的流水线式处理，以及HTTP协议的基本格式、方法、状态码和头部信息。此外，还涵盖了HTTPS和HTTP 2的内容，包括HTTPS建立加密通道传输HTTP内容，以及HTTP 2的服务端推送和TCP连接复用的改进。通过实验和详细介绍，读者可以快速了解浏览器工作的基本原理，为进一步深入学习和实际工作提供了基础。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《重学前端》，新⼈⾸单¥59

立即购买

登录后留言

全部留言(36)

最新
精选

奕
HTT2 还有一个很重要的特性：使用二进制代理文本进行传输，极大提高了传输的效率
作者回复: 嗯是这块每太细讲我觉得大家了解即可主要是服务端的工作。
2019-02-23

17
花儿与少年
当5G来临，http小优化都不用找了
作者回复: 这完全是一种误解，物理层优化没法解决上层协议的问题。
2019-02-16
3
13
hhk
那么 HTTP2 的 TCP 连接复用, 和 keep-alive 有什么区别呢?
作者回复: 嗯，这块我没细讲，其实就是HTTP2要加这个头才能复用连接。
2019-02-17

10
umaru
服务器如何知道tag有没有更新？是有某个地方可以设置还是我需要刻意去修改页面中某个标签？
作者回复: 一般tag是页面的信息摘要，你的服务器受到端上的tag，会那这个tag跟页面的信息摘要比对，如果相同就直接回复304无需更新了，如果不同就回复页面的内容。
2019-02-21

4
...
老师，网站做https升级后，由于TLS加密，第一次连接，速度慢一点是可以理解，但是之后的连接速度也变得挺慢的，这个用户体验不好，这个是不是跟我申请的https证书有很大关系，除此之外，有没有好的建议？
作者回复: 怀疑是没有复用连接，这个凭你给的信息我没法判断，得具体拿log分析时间都花在哪里了，一般来说跟证书关系不大。
2019-02-17

4
Helen
为什么对位图的合成是一个可选的过程，浏览器的composite 不是一定会执行的么，我以为这一步是无法不执行的
作者回复: 可以不合成直接画，效率低而已。当然现代浏览器是不可能跳过这一步的。
2019-06-29

1
liu志远
https在实际环境经常会部分用户遇到ssl handshake fail的错误，前辈能否提示下调试方法
作者回复: 一般这种情况是被劫持了，可以用抓包工具看一下。
2019-02-20

1
小农民
老师您好 tag是什么之前没听说过可以解释一下吗
作者回复: tag就是标签，也就是你写HTML时用尖括号括起来的东西。
2019-02-13

1
CC
现在工作中暂时只使用到 HTTPS。去年，看到一些公司已经开始着手更新 HTTP2，不少敬佩的前端高手做了分享。他们利用 HTTP2 服务端推送，以及 TCP 连接复用的特性，把 CSS 和 JS 文件分拆成更小的文件，分批下载。更小的文件意味着用户可以更快看到页面，以及性能的改善。与此同时，这种处理方式也对生产环境的工具链带来调整和改变。很有意思的变化。
2019-02-09
3
142
yy不会笑
自己可以扩展补充以下 > DNS查询得到IP > tcp/ip的并发限制 > get和post的区别 > 五层因特网协议栈 > 长连接与短连接 > http2.0与http1.1的显著不同点： > 强缓存与协商缓存
2019-02-09

67

收起评论