下载APP
登录
关闭
讲堂
算法训练营
Python 进阶训练营
企业服务
极客商城
客户端下载
兑换中心
渠道合作
推荐作者
前端工程师一定要懂哪些浏览器原理？
2019-08-10 李兵
作为前端工程师，几乎每天都要和浏览器打交道。
理解浏览器是如何工作的，对我们做业务的技术选型、架构设计等都有非常重要的作用，让我们可以准确评估 Web 开发项目的可行性，站在更高维度审视页面，以及在快节奏的技术迭代中把握住问题的本质。
可是我发现，大部分前端工程师对浏览器的理解，其实并不深入透彻。也难怪，一是，浏览器确实会涉及很多概念，不仅繁多而且琐碎，包括网络、渲染、安全，以及前端相关的大量概念。
二是市面上与浏览器相关的资料并不多，要不就是内容太难，很难普及大部分前端工程师，如 Chromium 的官方文档和代码；要不就是介绍得太浅，并没有深入到本质，且不成体系。
送你一份浏览器工作原理知识图
我整理了一张“浏览器工作原理知识图”，覆盖了循环系统、页面渲染机制、浏览器网络及安全等知识点，让你对浏览器内容有系统性的了解。
👆(点击查看大图)
推荐你点击下方🌟收藏本文，以便之后学习查看。
额外的学习资料推荐
为什么我选择 Chrome 浏览器呢？因为 Chrome、微软的 Edge 以及国内的大部分主流浏览器，都是基于 Chromium 二次开发而来；而 Chrome 是 Google 的官方发行版，特性和 Chromium 基本一样，只存在一些产品层面差异；再加上 Chrome 是目前世界上使用率最高的浏览器，所以 Chrome 最具代表性。
1、前端资料
Web Fundamentals
MDN Web 文档
2、Chromium 资料和源码
Chromium docs
Chromium 源码
3、Stackoverflow 社区
4、视频推荐
BlinkOn
Google Chrome Developers
学习这门课需要什么基础？
《浏览器工作原理与实践》专栏上线后，不少读者问：“我需要什么基础，才能学习浏览器？”。
其实，大家不必有太大压力，只要你有 JavaScript 基础，就能跟着我把整套浏览器知识点学习下来。涉及到的一些主要概念，我都会在专栏里提前做预习，帮你查漏补缺，比如：
页面消息循环系统部分，由于涉及到队列结构，我会先介绍其数据结构用法。
网络部分，我会先介绍 TCP/IP 协议。
V8 执行原理部分，我会先科普一些编译原理的基础知识。
当然，有以下加分项，你可以更高效学习：
英语；
精通一门编程语言；
有操作系统原理、数据结构、计算机网络、编译原理、网络安全基础。
课程会有实操内容吗？
清晰的学习路径，及切合实际的实践都是非常重要的。
第一种：讲解理论知识的同时，结合一些实践的场景。
比如讲解网络时，我会结合 Chrome 开发者工具中的网络面板来做介绍，网络面板可以把理论中的很多知识点，诸如请求头，响应头，DNS 解析，请求队列，Service Worker，SSL 等相关知识点全部结合起来。通过这种方式，能让你把理论的知识串成一张网。
第二种：整个实操章节。
比如，第五部分「浏览器中的页面」是以实战为主，巩固之前学习的知识点。例如，如何用 Chrome 做 Web 性能分析，如何系统优化页面等等。
第三种：额外加餐内容，会根据大家的需求灵活安排。
通过这些实操内容，可以把理论知识应用到我们的项目中去，让大家学会如何去定位和调试问题，如何分析问题，从而打造高性能的应用。
我是谁？
我是李兵，前盛大创新院高级研究员。08 年，我基于 Chromium 和 IE 发布了一款双核浏览器：太阳花。这是国内第一款双核浏览器，你在使用它的时候，除了能享受到 Chrome 的快捷之外，还能兼容只支持 IE 的站点。很幸运，这款浏览器，在没有任何宣传的情况下，日活达到了 20 多万。
之后，我就去了盛大创新院，参与研发 WebOS 项目，基于 WebKit 内核打造一个能和安卓并存的操作系统。
后来，我又到了顺网科技，和团队打造了一款给全国网吧使用的“F1 浏览器”，日启量达到 2000 万。
大家都知道，网吧的电脑环境异常复杂，页面劫持经常发生，再加上每天千万级别的启动量，对页面安全、加载速度和流畅度都有很高的要求。
十余年的浏览器和前端经历，让我深刻感受到掌握浏览器原理的重要性，我想把我独到理解和经验，通过这个专栏，分享给你。
