极客时间出品的《浏览器工作原理与实践》由李兵所作，李兵是前盛大创新院高级研究员。本专栏透过浏览器看懂前端本质。
订阅价格：
原价¥99 ，限时¥68 2344 人已学习 · 共36讲 · 每周二 / 四 / 六更新， 本课程为音频+图文。可在极客时间APP/小程序/网站上永久观看。
扫下图二维码购买返现24元。购买成功之后，请加我微信号 dismissmewp ，备注：返现。
《浏览器工作原理与实践》课程介绍
浏览器是上网的入口，是互联网的“咽喉”。我们每天的工作、学习和娱乐等都离不开浏览器，各行各业、越来越多的应用也都依赖于此，特别是随着云计算的普及和HTML5技术的快速发展，它的重要性更是与日俱增。
为了能准确评估Web开发项目的可行性，站在更高维度审视页面，以及在快节奏的前端技术迭代中把握住问题的本质，完成前端技能进阶，学习浏览器的工作原理就势在必行了。
特别是前端技术出现了大爆炸式增长，各种新技术层出不穷，为了避免疲于应付，你可以通过学习浏览器的工作原理，掌握前端知识的本源，以不变应万变。
《浏览器工作原理与实践》讲师介绍
李兵，前盛大创新院高级研究员。2008年，基于Chromium和IE发布了第一款双核浏览器（太阳花浏览器），在没有任何宣传的情况下，日活跃用户数达到20多万；而后进入盛大创新院，参与WebOS项目，在团队中负责HTML5特性的实现；再之后，在顺网科技和团队打造了一款给全国网吧使用的“F1浏览器”，日启量达2000万。
算下来，李兵已经深耕浏览器和前端领域十余年，有着丰富的理论和实践经验。为便于你快速对浏览器有个宏观的把控，李兵和极客时间团队专门做了一个小视频“工程师视角下的浏览器是怎样的”：
在这门讲解浏览器工作原理的课程中，李兵会用深入浅出的讲解方式、图文并茂的展现形式，把网络、页面渲染、JavaScript、浏览器安全等知识串联起来，从而让你高质量、高效率地学习这门课程，系统掌握浏览器工作原理，并同时把理论应用到前端实践中去。
《浏览器工作原理与实践》课程模块
课程共36讲，分为7大模块。
1. 宏观视角下的浏览器
本模块通过Chrome的多进程架构来介绍HTTP请求流程、导航流程和页面的渲染流程，带你从宏观视角建立浏览器的知识体系。
2. 浏览器中的JavaScript执行机制
虽然语法上和C语言很像，但是JavaScript背后的机制却又完全不同，很多人学习JavaScript时经常处于似懂非懂的状态。本模块则是站在浏览器的视角，来分析JavaScript代码的执行过程。如果你能掌握这些执行过程，那么很多诸如闭包、变量提升等疑难问题就会迎刃而解。
3. V8工作原理
继续深入探讨来自Google的JavaScript引擎V8，分析其执行流程，细化讲解JavaScript中数据是如何存储和回收的。通过本模块的学习，你离打造高性能且节约内存的Web应用就更近一步了。
4. 浏览器中的页面事件循环系统
要让不同类型的任务在主线程中有条不紊地执行，这就需要有一个事件循环系统，用来负责接收、调度这些不同的事件。本模块会深入探讨Web页面中的事件循环系统，讲解页面中的微任务和宏任务的实现机制，最后还会介绍一些WebAPI是如何与页面的事件循环系统结合\b使用的。理解事件循环，能让你从更高维度理解页面是如何运行的，并加深你对页面中异步事件的理解。<
5. 浏览器中的页面
页面是浏览器的核心，浏览器中的所有功能点都是服务于页面的。本模块会对页面做全面的介绍，包括构建页面的核心流程、页面性能的分析过程。最后还会介绍一些应用场景，比如流行的前端框架为什么要有虚拟DOM，最近比较火的PWA的工作原理，以及WebComponent。
6. 浏览器中的网络
网络的重要性毋庸置疑，但是很多前端工程师却\b往往忽视它的存在。本模块通过HTTP/1、HTTP/2和HTTP/3的介绍，让你全面了解浏览器中的网络，并最终让你能向下理解其底层原理、向上理解其应用方向。
7. 浏览器安全
和浏览器打交道的内容都是通过网络进行的，但通常通过网络传输的内容是不被浏览器信任的，所以对于可能存在危险的地方都要重点防护。本模块会通过实例，向你介绍为何会出现各种安全问题，以及如何避免这些安全攻击。
《浏览器工作原理与实践》课程目录
开篇词丨参透了浏览器的工作原理，你就能解决80%的 前端难题
宏观视角下的浏览器
Chrome架构：仅仅打开了 1个页面，为什么有4个进程？
TCP协议：如何保证页面文件能被完整送达浏览器？
HTTP请求流程：为什么很多站点第二次打开速度会很快？
导航流程：从输入URL到页面展示，这中间发生了什么？
渲染流程（上)：HTML、CSS和JavaScript文件，是如何 变成页面的？
渲染流程（下)：HTML、CSS和JavaScript文件，是如何 变成页面的？
浏览器中的JavaScript执行机制
变量提升：JavaScript代码是按顺序执行的吗？
调用栈：为什么JavaScript代码会出现栈溢出？
块级作用域：var缺陷以及为什么要引入let和const?
词法环境和闭包：代码中出现相同的变量，JavaScript引 擎是如何选择的？
this:从JavaScript执行上下文的视角讲清楚this
V8工作原理
栈空间和堆空间：数据是如何存储的？
垃圾回收：垃圾数据是如何自动回收的？
编译器和解释器：V8是如何执行一段JavaScript代码的？
浏览器中的页面循环系统
消息队列和事件循环：页面是怎么“活”起来的？
WebAPI: setTimeout 是怎么实现的？
WebAPI: XMLHttpRequest 是怎么实现的？
宏任务和微任务：不是所有任务都是一个待遇
Promise:使用Promise,告别回调函数
async/await:使用同步的方式去写异步代码
浏览器中的页面
页面性能分析：利用Chrome做Web性能分析
d〇M树：JavaScript是如何影响DOM树构建的？
样式选择：渲染引擎是如丨可为DOM节点选择样式属性的？
分层和合成机制：为什么CSS动画比JavaScript高效？
页面性能：如何系统地优化页面？
虛拟DOM:虛拟DOM和实际的DOM有何不同？
渐进式网页应用（PWA):它究竟解决了 Web应用的哪些 问题？
WebComponent:像搭积木一样构建Web应用
浏览器中的网络
HTTP/1: HTTP性能优化
HTTP/2:如何提升网络速度？
HTTP/3:甩掉TCP、TLS的包揪，构建高效网络
浏览器安全
同源策略：为什么XMLHttpRequest不能跨域请求资源？
跨站脚本攻击（XSS):为什么Cookie中有HttpOnly属性？
跨站点请求伪造（CSRF): Chrome力什么要让iframe运 行在单独的渲染进程中？
沙盒：页面和系统之间的隔离墙
HTTPS:让数据传输更安全
我的公众号：猿人学 Python 上会分享更多心得体会，敬请关注。
***版权申明:若没有特殊说明，文章皆是猿人学 yuanrenxue.con 原创，没有猿人学授权，请勿以任何形式转载。***
说点什么吧...