重学前端
程劭非(winter)
前手机淘宝前端负责人
104095 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 57 讲
开篇词+学习路线+架构图 (3讲)
重学前端
15
15
1.0x
00:00/00:00
登录|注册

浏览器:一个浏览器是如何工作的?(阶段一)

对于前端开发来说,我们平时与浏览器打交道的时间是最多的。可浏览器对前端同学来说更多像一个神秘黑盒子的存在。我们仅仅知道它能做什么,而不知道它是如何做到的。
在我面试和接触过的前端开发者中,70% 的前端同学对这部分的知识内容只能达到“一知半解”的程度。甚至还有一部分同学会质疑这部分知识是否重要:这与我们的工作相关吗,学多了会不会偏移前端工作的方向?
事实上,我们这里所需要了解的浏览器工作原理只是它的大致过程,这部分浏览器工作原理不但是前端面试的常考知识点,它还会辅助你的实际工作,学习浏览器的内部工作原理和个中缘由,对于我们做性能优化、排查错误都有很大的好处。
在我们的课程中,我也会控制浏览器相关知识的粒度,把它保持在“给前端工程师了解浏览器”的水准,而不是详细到“给浏览器开发工程师实现浏览器”的水准。
那么,我们今天开始,来共同思考一下。一个浏览器到底是如何工作的。
实际上,对浏览器的实现者来说,他们做的事情,就是把一个 URL 变成一个屏幕上显示的网页。
这个过程是这样的:
浏览器首先使用 HTTP 协议或者 HTTPS 协议,向服务端请求页面;
把请求回来的 HTML 代码经过解析,构建成 DOM 树;
计算 DOM 树上的 CSS 属性;
最后根据 CSS 属性对元素逐个进行渲染,得到内存中的位图;
一个可选的步骤是对位图进行合成,这会极大地增加后续绘制的速度;
合成之后,再绘制到界面上。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《重学前端》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(36)

  • 最新
  • 精选
  • 一步
    HTT2 还有一个很重要的特性:使用二进制代理文本进行传输,极大提高了传输的效率

    作者回复: 嗯 是 这块每太细讲 我觉得大家了解即可 主要是服务端的工作。

    17
  • 花儿与少年
    当5G来临,http小优化都不用找了

    作者回复: 这完全是一种误解,物理层优化没法解决上层协议的问题。

    3
    13
  • hhk
    那么 HTTP2 的 TCP 连接复用, 和 keep-alive 有什么区别呢?

    作者回复: 嗯,这块我没细讲,其实就是HTTP2要加这个头才能复用连接。

    10
  • umaru
    服务器如何知道tag有没有更新? 是有某个地方可以设置还是我需要刻意去修改页面中某个标签?

    作者回复: 一般tag是页面的信息摘要,你的服务器受到端上的tag,会那这个tag跟页面的信息摘要比对,如果相同就直接回复304无需更新了,如果不同就回复页面的内容。

    4
  • ...
    老师,网站做https升级后,由于TLS加密,第一次连接,速度慢一点是可以理解,但是之后的连接速度也变得挺慢的,这个用户体验不好,这个是不是跟我申请的https证书有很大关系,除此之外,有没有好的建议?

    作者回复: 怀疑是没有复用连接,这个凭你给的信息我没法判断,得具体拿log分析时间都花在哪里了,一般来说跟证书关系不大。

    4
  • Helen
    为什么对位图的合成是一个可选的过程,浏览器的composite 不是一定会执行的么,我以为这一步是无法不执行的

    作者回复: 可以不合成直接画,效率低而已。 当然现代浏览器是不可能跳过这一步的。

    1
  • liu志远
    https在实际环境经常会部分用户遇到ssl handshake fail的错误,前辈能否提示下调试方法

    作者回复: 一般这种情况是被劫持了,可以用抓包工具看一下。

    1
  • 小农民
    老师您好 tag是什么 之前没听说过 可以解释一下吗

    作者回复: tag就是标签,也就是你写HTML时用尖括号括起来的东西。

    1
  • CC
    现在工作中暂时只使用到 HTTPS。 去年,看到一些公司已经开始着手更新 HTTP2,不少敬佩的前端高手做了分享。 他们利用 HTTP2 服务端推送,以及 TCP 连接复用的特性,把 CSS 和 JS 文件分拆成更小的文件,分批下载。 更小的文件意味着用户可以更快看到页面,以及性能的改善。与此同时,这种处理方式也对生产环境的工具链带来调整和改变。 很有意思的变化。
    3
    142
  • yy不会笑
    自己可以扩展补充以下 > DNS查询得到IP > tcp/ip的并发限制 > get和post的区别 > 五层因特网协议栈 > 长连接与短连接 > http2.0与http1.1的显著不同点: > 强缓存与协商缓存
    67
收起评论
显示
设置
留言
36
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部