AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

一道浏览器面试题,就能看出你的前端功底

  • 2019-08-15
  • 本文字数:1240 字

    阅读完需:约 4 分钟

一道浏览器面试题,就能看出你的前端功底

作为前端工程师,几乎每天都要和浏览器打交道。


理解浏览器是如何工作的,对我们做业务的技术选型、架构设计等都有非常重要的作用,让我们可以准确评估 Web 开发项目的可行性,站在更高维度审视页面,以及在快节奏的技术迭代中把握住问题的本质。


可是我发现,大部分前端工程师对浏览器的理解,其实并不深入透彻。


比如,面试时我通常会问候选者一个问题:“在浏览器里,从输入 URL 到页面展示中间发生了什么? ”


这道题涉及到网络、操作系统、Web 等一系列的知识,如果你要开发流畅的页面,或者诊断 Web 页面中的性能问题,那你就需要了解 URL 是怎么变成页面的,只有弄懂这些之后,你才可以站在全局的角度定位问题或者写出高效的代码。


但遗憾的是,大多数人只能回答其中零散的知识点,并不能将这些知识点串联成线,无法系统全面地回答。


也难怪,浏览器确实会涉及很多概念,不仅繁多而且琐碎,包括网络、渲染、安全,以及大前端相关的大量概念。比如,首屏的显示就涉及了 DNS、HTTP、DOM 解析、CSS 阻塞、JavaScript 阻塞等技术因素,其中一项没处理好就可能导致整个页面的延时。如果没有系统的学习,很容易出现遗漏和盲点。


所以,我推荐大家看看极客时间的专栏《浏览器工作原理与实践》


作者是前盛大创新院高级研究员李兵。08 年的时候,他就基于 Chromium 和 IE 发布了一款双核浏览器:太阳花。这是国内第一款双核浏览器,你在使用它的时候,除了能享受到 Chrome 的快捷之外,还能兼容只支持 IE 的站点。可能现在的你不觉得有多厉害,但在当时,简直是前端的爆炸新闻。这款浏览器,在没有任何宣传的情况下,日活达到了 20 多万。


之后李兵去了盛大创新院,参与研发 WebOS 项目,基于 WebKit 内核打造一个能和安卓并存的操作系统。


后来,他又到了顺网科技,和团队打造了一款给全国网吧使用的“F1 浏览器”,日启量达到 2000 万。大家都知道,网吧的电脑环境异常复杂,页面劫持经常发生,再加上每天千万级别的启动量,对页面安全、加载速度和流畅度都有很高的要求。


可以说,这些经历,让李兵在浏览器核心技术上,有独到理解和独家经验。


因此,他来写浏览器相关的专栏,也一定与众不同,更具实操性。据他说,在《浏览器工作原理与实践》专栏里,想带你重新认识浏览器,把网络、页面渲染、JavaScript、浏览器安全等知识串联起来,从而让你对整个前端体系有全新的认识。


再送你一张李兵制作的知识框架图,让你对浏览器所覆盖所有知识点有所认知。


李兵是如何讲解浏览器的?

专栏分为 7 大模块,共 35 篇文章,覆盖 JavaScript 执行机制、引擎 V8 的工作原理、Web 页面中的事件循环系统、HTTP/1、HTTP/2 和 HTTP/3 的介绍、以及最近比较火的 PWA 的工作原理等内容。


最吸引我的,是李兵会自己绘制原理图和流程图,用通俗易懂的语言,图文并茂的展现形式,带你层层深入浏览器,看懂前端本质。


比如,下面是“渲染流水线的总结图”



线程之间共享进程中的数据示意图:



下面是专栏的详细目录:



《浏览器工作原理与实践》限时订阅福利


戳我订阅,早鸟优惠¥68,原价¥99


优惠最后 2 天


2019-08-15 15:073371

评论

发布
暂无评论
发现更多内容

Affinity Photo(图像处理软件) v2.5.7中文直装版/便携版

Rose

Easy New File for Mac(右键增强工具)v5.8中文激活版

Rose

什么时候选择 Docker,什么时候选择虚拟机?

测吧(北京)科技有限公司

测试

Native Instruments Traktor Pro:专业DJ混音新纪元,重塑音乐创作边界!

Rose

小历TinyCal:功能全面操作简便界面美观的Mac日历工具

Rose

Mac交互式UI原型设计神器 Principle汉化破解版

Rose

为打开和打印Visio文件提供了简单的解决方案VSD Viewer for mac

Rose

Ableton Live 12下载激活版(Ableton Live许可证)Mac/win

Rose

Docker 网络模式实战:从 Bridge 到 Host 再到 Container 的配置与应用

测吧(北京)科技有限公司

测试

Paragon Hard Disk Manager永久激活 mac磁盘管理工具

Rose

LibRaw Monochrome2DNG for Mac(DNG格式转换器)v1.7.1激活版

Rose

Reflector 4 Mac屏幕镜像和媒体流媒体接收软件

Rose

iMovie for Mac:全新功能升级,视频编辑再进化!

Rose

AI口语陪练App开发的技术难点

北京木奇移动技术有限公司

软件外包公司 AI口语练习 AI英语学习

软件测试丨Redis 的数据同步策略以及数据一致性保证

测试人

软件测试

深入解析:Docker 与虚拟机的架构差异及适用场景

测吧(北京)科技有限公司

测试

Docker 容器网络模式详解:Bridge、Host 与 Container 的区别

测吧(北京)科技有限公司

测试

Docker 与虚拟机:架构差异与选择指南

测吧(北京)科技有限公司

测试

和鲸科技CEO范向伟AI产业系列观察一:2025年,AI的生产力拐点

ModelWhale

Python 人工智能 大数据 AI

选择合适的虚拟化技术:Docker vs 虚拟机的使用场景分析

测吧(北京)科技有限公司

测试

一道浏览器面试题,就能看出你的前端功底_大前端_李兵_InfoQ精选文章