浏览器工作原理和实践

1.介绍

见正文3

2.应用背景

参透了浏览器的工作原理,可解决80%的前端难题.

帮助开发web前端项目.

3.学习

课程目录

开篇词 (1讲)

 

开篇词 | 参透了浏览器的工作原理,你就能解决80%的前端难题

 

宏观视角下的浏览器 (6讲)

01 | Chrome架构:仅仅打开了1个页面,为什么有4个进程?

02 | TCP协议:如何保证页面文件能被完整送达浏览器?

03 | HTTP请求流程:为什么很多站点第二次打开速度会很快?

04 | 导航流程:从输入URL到页面展示,这中间发生了什么?

05 | 渲染流程(上):HTML、CSS和JavaScript,是如何变成页面的?

06 | 渲染流程(下):HTML、CSS和JavaScript,是如何变成页面的?

 

浏览器中的JavaScript执行机制 (5讲)

07 | 变量提升:JavaScript代码是按顺序执行的吗?

08 | 调用栈:为什么JavaScript代码会出现栈溢出?

09 | 块级作用域:var缺陷以及为什么要引入let和const?

10 | 作用域链和闭包 :代码中出现相同的变量,JavaScript引擎是如何选择的?

11 | this:从JavaScript执行上下文的视角讲清楚this

 

V8工作原理 (3讲)

12 | 栈空间和堆空间:数据是如何存储的?

13 | 垃圾回收:垃圾数据是如何自动回收的?

14 | 编译器和解释器:V8是如何执行一段JavaScript代码的?

 

浏览器中的页面循环系统 (6讲)

15 | 消息队列和事件循环:页面是怎么“活”起来的?

16 | WebAPI:setTimeout是如何实现的?

17 | WebAPI:XMLHttpRequest是怎么实现的?

18 | 宏任务和微任务:不是所有任务都是一个待遇

19 | Promise:使用Promise,告别回调函数

20 | async/await:使用同步的方式去写异步代码

 

浏览器中的页面 (8讲)

21 | Chrome开发者工具:利用网络面板做性能分析

22 | DOM树:JavaScript是如何影响DOM树构建的?

23 | 渲染流水线:CSS如何影响首次加载时的白屏时间?

24 | 分层和合成机制:为什么CSS动画比JavaScript高效?

25 | 页面性能:如何系统地优化页面?

26 | 虚拟DOM:虚拟DOM和实际的DOM有何不同?

27 | 渐进式网页应用(PWA):它究竟解决了Web应用的哪些问题?

28 | WebComponent:像搭积木一样构建Web应用

 

浏览器中的网络 (3讲)

29 | HTTP/1:HTTP性能优化

30|HTTP/2:如何提升网络速度?

31|HTTP/3:甩掉TCP、TLS 的包袱,构建高效网络

 

浏览器安全 (5讲)

32 | 同源策略:为什么XMLHttpRequest不能跨域请求资源?

33 | 跨站脚本攻击(XSS):为什么Cookie中有HttpOnly属性?

34 | CSRF攻击:陌生链接不要随便点

35 | 安全沙箱:页面和系统之间的隔离墙

36 | HTTPS:让数据传输更安全

 

4.问题

4.1 回顾浏览器的进化路线,你认为推动浏览器发展的主要动力是什么?

[一个角度来说,最大动力就是chrome的出现。曾经的IE像极了诺基亚,chrome就像是横空出世的iPhone ,当着IE的面告诉IE,浏览器应该这么玩儿。
另一个角度也是互联网的发展需要,人们所需要的不再是只是简单展示个页面的浏览器,需要有复杂的交互,浏览器应该能做更多的事情,这对浏览器的稳定性、以及性能都有了新的要求。所以出来一个性能符合要求的浏览器也是必须的。
还有就是11年后相对规范的es5的出现,再之后es6.7,web能做的事情越来越多了,web工程化,再后来node的出现,前端体系越来越庞大]

 

...

5.推荐书籍

TBD

6.学习体会

TBD

7.参考

极客时间专栏:浏览器工作原理和实践 --李兵 以及不记名网友的评论见解

后续补充

... 

你可能感兴趣的:(前端-FRONT,END,浏览器-BROWSER)