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 的包袱,构建高效网络

参考:

https://blog.csdn.net/william_n/article/details/123175716

浏览器安全 (5讲)

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

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

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

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

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

该专栏已经学习了两遍, 挺好的,  感觉还需要后续学习第三遍, 并结合其他资料, 以及前端项目一起学习消化, 融化贯通    ///  20210305 12:20 周五 家里

4.问题/补充

Note:

含记名不记名网友问题

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

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

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

1.老师好,请教您一个问题。

debugger;
(function(){
    console.log(g)
    if(true){
        console.log('hello world');
        function g(){ return true; }
    }
})();

这个函数步进调试时,发现打印g时值是undefined而不是提示not defined,说明if中g函数确实是提升了,但是为何不是g()而是undefined?然后走完function g(){ return true; }这一步后 console.log(g)中的g才变为g()。这里条件声明函数的变量提升有点搞不明白。
作者回复:

ES规定函数只不能在块级作用域中声明,

function foo(){
    if(true){
        console.log('hello world');
        function g(){ return true; }
    }
}

也就是说,上面这行代码执行会报错,但是个大浏览器都没有遵守这个标准。

接下来到了ES6了,ES6明确支持块级作用域,ES6规定块级作用域内部声明的函数,和通过let声明变量的行为类似。

规定的是理想的,但是还要照顾实现,要是完全按照let的方式来修订,会影响到以前老的代码,所以为了向下兼容,个大浏览器基本是按照下面的方式来实现的:

function foo(){
    if(true){
        console.log('hello world');
        var g = function(){return true;} 
    }
}

这就解释了你的疑问,不过还是不建议在块级作用域中定义函数,很多时候,简单的才是最好的。

2. ES6 在附录B里面规定:

1.允许在块级作用域内声明函数。
2.函数声明类似于var,即会提升到全局作用域或函数作用域的头部。
3.同时,函数声明还会提升到所在的块级作用域的头部。

这里的表现应该是这样:
function foo(){
    var g1;
    if(true){
        function g2(){return true;}
        console.log('hello world');
        g1 = g2;
    }
}

g1和g2表示引用不一样,这里是同名关系,但是所在的变量作用域是不一样的。

下面这个文章详细解释了。
https://juejin.im/post/5eaa8211e51d454de64e388e

3. 老师,可以请教下吗,在编译完成之后是单单生成了字节码,再到执行过程中变成对应平台的机器码? 还是编译过程已经生成了对应平台的机器码, 执行阶段就直接去执行相应的机器码?
作者回复: 先是生成字节码,然后解释器可以直接执行字节码,输出结果。 但是通常Javascript还有个编译器,会把那些频繁执行的字节码编译为二进制,这样那些经常被运行的函数就可以快速执行了,通常又把这种解释器和编译器混合使用的技术称为JIT

...

5.推荐书籍

TBD

6..参考

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

后续补充

...

浏览器工作原理和实践相关推荐

  1. <<浏览器工作原理与实践>>读书笔记

    1. 进程和线程的区别 概念: 进程:操作系统进行资源分配和调度的基本单位:程序的运行实例:(在我们启动一个程序的时候,操作系统会为该程序创建一块内存空间,用来存放代码,运行数据,和执行任务的主线程, ...

  2. 《浏览器工作原理与实践》学习笔记

    浏览器原理 前言 本文是学习李兵老师的<浏览器工作原理与实践>过程中记录笔记,详细链接见文末 进程vs线程 进程:一个应用程序的运行实例就是一个进程,详细来说就是:启动一个应用程序的时候, ...

  3. 【浏览器工作原理与实践笔记一】:宏观视角上的浏览器

    [浏览器工作原理与实践笔记一]:宏观视角上的浏览器 文章目录 [浏览器工作原理与实践笔记一]:宏观视角上的浏览器 一.Chrome架构:仅仅打开了1个页面,为什么有4个进程 二.TCP协议:如何保证页 ...

  4. 【浏览器工作原理与实践三】:浏览器中的网络

    [浏览器工作原理与实践三]:浏览器中的网络 文章目录 [浏览器工作原理与实践三]:浏览器中的网络 一.HTTP1:HTTP性能优化 超文本传输协议 HTTP/0.9 被浏览器推动的 HTTP/1.0 ...

  5. 服务器向所有浏览器响应数据,浏览器工作原理与实践总结一

    一.常用Chrome架构 Chrome 打开一个页面需要启动多少进程?你可以点击 Chrome 浏览器右上角的"选项"菜单,选择"更多工具"子菜单,点击&quo ...

  6. 浏览器工作原理与实践学习笔记

    浏览器工作原理与实践 参考来源: 极客时间-李兵专栏 李兵简介: 08年,在 Chromium 和 IE 发布了一款双核浏览器:太阳花,国内第一款双核浏览器 ,支持chrome并兼容IE,日活达到了2 ...

  7. 了解浏览器工作原理-初步

    作者:zccst 同样,先感谢同事们的技术分享,使我开始关注浏览器工作原理.(其实很早就想关注,但由于各种各样的原因一直拖延着) 先留一个链接,慢慢攒着 浏览器的工作原理:新式网络浏览器幕后揭秘(转) ...

  8. 【技术干货】浏览器工作原理和常见WEB攻击 (下)

    本文作者:上海驻云开发总监 陈昂 上篇给大家带来的是关于浏览器基本工作原理的总结和介绍,这篇文章重点给大家说明有哪些常见WEB攻击. 常见WEB攻击 互联网是个面向全世界的开放平台,越是开放的东西漏洞 ...

  9. 《深入理解Android》一2.1 浏览器工作原理概述

    本节书摘来自华章出版社<深入理解Android>一书中的第2章,第2.1节,作者孟德国 王耀龙 周金利 黎欢,更多章节内容可以访问云栖社区"华章计算机"公众号查看 2. ...

  10. javascript---001-运行原理01_前端三大技术_JS重要性_Atwood定律_JS应用_JS让人迷惑_TypeScript会取代JS吗_JS是一门编程语言_浏览器工作原理_浏览器内核

    javascript-001-运行原理01 1.前端三大技术 HTML CSS Javascript 2.Javascript的重要性 (1)javascript是很多框架的基础,Vue,React, ...

最新文章

  1. 遗传算法占用计算机空间,遗传算法综述摘要.doc
  2. thincmf 分页无法搜索_thinkcmf5 后台搜索分页保持分页条件
  3. 清华计算机接口原理,微机原理与接口技术课后习题答案清华大学
  4. springmvc是什么_SpringBoot与SpringMVC的区别是什么?
  5. java 高性能代码_[Java教程]Javascript高性能代码(一)
  6. JavaScript篇 深入理解JavaScript函数
  7. webservice框架 java_JAVA开发Web Service几种框架介绍
  8. android陀螺仪方向,Android中陀螺仪传感器正确旋转值的计算
  9. c# chart 各个属性_C# Chart控件,chart、Series、ChartArea曲线图绘制的重要属性
  10. linux下实现文件双向同步 unsion,unison做数据双向同步
  11. java毕业生设计学生管理部门信息共享交流系统计算机源码+系统+mysql+调试部署+lw
  12. 什么是线性电路,非线性电路
  13. 微信分享网页链接自定义图片和文字描述
  14. ThreadPoolExecutor中addWorker,continue retry和break retry是什么意思
  15. BSGS 大步小步算法
  16. Windows安装VirtualBox教程(图文版)
  17. 安卓新闻发布系统源码,后台java springboot框架
  18. nas网络存储服务器系统,nas网络存储是啥_NAS网络存储功能
  19. 英语口语116之每日十句口语
  20. 抽丝剥茧,C#面向对象快速上手

热门文章

  1. modbus tcp主站和从站_实例分享!西门子PLC通过MODBUS控制变频器
  2. 边界类、控制类、实体类
  3. win7 升级到 win10
  4. Unity 移动摄像机到目标位置
  5. dep指定版本 go_Golang官方依赖管理工具:dep
  6. dw移动图片位置,dw的移动的图片代码
  7. C语言实现线性表的链式存储结构
  8. spring aop 切面执行顺序和常见问题
  9. 【集合论】关系闭包 ( 自反闭包 | 对称闭包 | 传递闭包 )
  10. 双网卡上网冲突解决_交换机如何设置,控制IP地址冲突故障