面试题-浏览器知识点和js （二）

20 异步任务有哪些？ ok

1.setTimeOut、setInterval

2.DOM 事件

3.Promise

4.ajax

21. 说一说你对Cookie localStorage sessionStorage ok

Cookie 的缺点:大小，影响性能，安全缺陷

1.Cookie 的体积上限只有4KB，只能用来存储少量的信息。

2.影响性能,不管域名下的某个地址是否需要Cookie，请求都会带上完整的Cookie，请求数量增加，会造成巨大的浪费。

3.安全缺陷，Cookie以纯文本的形式在浏览器和服务器中传递，很容易被非法用户获取，

当HTTPOnly为false时，Cookie信息可以直接通过JS脚本读取。

localStorage:理论上永久有效的，除非主动清除。4.98MB（不同浏览器情况不同，safari 2.49M）

保存在客户端，不与服务端交互。节省网络流量

sessionStorage

仅在当前网页会话下有效，关闭页面或浏览器后会被清除。 4.98MB.（部分浏览器没有限制）

ps==>localStorage其实存储的都是字符串，如果是存储对象需要调用JSON的stringify方法，

在使用的时候用JSON.parse来解析成对象。

23. 谈一谈你对XSS攻击理解？或者 什么是 XSS 攻击? ok

XSS 全称是 Cross Site Scripting ,翻译过来就是“跨站脚本”。

XSS是指黑客往 HTML 文件中注入恶意脚本，

用户在浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段。

最开始的时候，这种攻击是通过跨域来实现的，所以叫“跨域脚本”。

24. 能不能说一说CSRF攻击

CSRF即跨站请求伪造，黑客诱导用户点击链接，打开黑客的网站，

然后黑客利用用户「目前的登录状态」发起跨站请求。

举个例子, 你在某个论坛点击了黑客精心挑选的小姐姐图片，你点击后，进入了一个新的页面。

那么恭喜你，你可能就被攻击了）

列举如下

<img src="https://xxx.com/info?user=hhh&count=100">

进入页面后自动发送 get 请求，值得注意的是，

这个请求会自动带上关于 xxx.com 的 cookie 信息(这里是假定你已经在 xxx.com 中登录过)。

假如服务器端没有相应的验证机制，它可能认为发请求的是一个正常的用户，

因为携带了相应的 cookie，然后进行相应的各种操作，可以是转账汇款以及其他的恶意操作。

28. DOMContentLoaded 与 load 的区别 ?

DOMContentLoaded事件的触发时机：仅当DOM解析完成后，不包括样式表，图片等资源。

onload 事件触发时机:页面上所有的 DOM,样式表,脚本,图片等资源已经加载完毕。

那么也就是先DOMContentLoaded 实行时机 > load.

那么在Jquery中， document.read(function(){ })监听的就是DOMContentLoaded事件。

使用(document).load(callback)监听的就是load事件。

29. 什么是DOM节点

DOM，即文档对象模型（Document Object Model），W3C 制定的标准规范，

是一种处理 HTML 和 XML 文件的标准 API。

它把文档作为一个树形结构，树的每个结点表示了一个 HTML标签或标签内的文本项。

将 HTML 或 XML 文档转化为 DOM 树的过程称为解析（parse）。

30. 你对addEventListener 来注册事件的理解 ?

我们一般使用 addEventListener 来注册事件，它接受三个参数：

第1个参数:处理的事件名称，如点击事件 click；

第2个参数:事件处理程序，要绑定的函数体；

第3个参数:可以是布尔值，也可以是对象

当第3个参数是布尔值时，true 则作为捕获事件处理，false 则作为冒泡事件处理（默认）。

第三个参数是对象时，有这几个属性：

capture：布尔值，和第三个参数作为布尔值时作用一样

once：布尔值，值为 true 表示该回调只会调用一次，调用后会移除监听

passive：布尔值，值为 true表示永远不会调用 preventDefault.

[如果`listener`仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告]

一般来说，我们可以通过使用 stopPropagation 来阻止事件的进一步传播，即阻止事件冒泡。

32. onclick 与addEventListener的区别

区别 1==>

onclick:就是说相同的事件绑定同一个元素会出现覆盖；

addEventListener:进行多次绑定相同的事件都能运行。不会出现事件覆盖

区别 2==> addEventListener对任何DOM都是有效的。

而onclick仅限于HTML，像br标签使用onclick就是失效。

区别 3==>addEventListener可以控制listener的触发阶段，（捕获/冒泡）。

区别 4==>onclick事件在同一时间只能指向唯一对象

Content [kang 腾 t] 内容、目录、满意

Loaded [ləʊ dɪ d]

33. HTTP 与 HTTPS 的区别

1、HTTP 信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。

3、HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，HTTP是80，HTTPS是443。

4、HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密、身份认证的网络协议，比 HTTP 协议安全。

(无状态是说：数据包的发送、传输和接收都是相互独立的。

无连接是指:通信双方都不长久的维持对方的任何信息。)

1.浏览器的主要组成部分是什么？ok

1.用户界面:包括地址栏、前进/后退按钮、书签菜单等

2.浏览器引擎:在用户界面和呈现引擎之间传送指令。

3.呈现引擎 :负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。

4.网络 :用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现

5.JavaScript解释器:用于解析和执行 JavaScript 代码。

6.数据存储:浏览器需要在硬盘上保存各种数据

2.浏览器是如何渲染UI的？ ok

1.浏览器获取HTML文件，然后对文件进行解析，形成DOM Tree.

2.与此同时，进行CSS解析，生成Style Rules

3.接着将DOM Tree与Style Rules合成为 Render Tree

4.接着进入布局（Layout）阶段，为每个节点分配一个应出现在屏幕上的确切坐标。

5.随后调用GPU进行绘制（Paint），遍历Render Tree的节点，并将元素呈现出来

3.浏览器如何解析css选择器？ok

浏览器会『从右往左』解析CSS选择器。

题外话：（1）若从左向右的匹配，（2） 如果从右至左的匹配：

后者匹配性能更好，

是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点）；

而从左向右的匹配规则的性能都浪费在了失败的查找上面。

4.DOM Tree是如何构建的？()

转码: 浏览器将接收到的二进制数据,按照指定编码格式,转化为HTML字符串

生成Tokens: 浏览器会将HTML字符串,解析成Tokens.

构建Nodes: 对节点(Node)添加特定的属性，通过指针确定节点(Node)的父、子、兄弟关系

生成DOM Tree: 通过node包含的指针信息构建出DOM Tree

巧计:转码-生成Tokens-构建-生成

4. CSS加载会造成阻塞吗 ? ok

CSS不会阻塞DOM解析，但会阻塞DOM渲染。

并不会阻塞JS文件下载，CSS会阻塞JS执行，

4.1 为什么CSS不会阻塞DOM解析，但会阻塞DOM渲染？ ok

DOM 和 CSSOM通常是并行构建的，所以「CSS 加载不会阻塞 DOM 的解析」。

然而由于Render Tree 是依赖DOM Tree和 CSSOM Tree的，

所以它必须等到两者都加载完毕后，完成相应的构建。才开始渲染，因此，「CSS加载会阻塞DOM渲染」

CSSOM==》css Object Model [css对象模型]]

5. CSSOM[css对象模型]作用 ? ok

第一个是提供给 JavaScript 操作样式表的能力

第二个是为布局树的合成提供基础的样式信息

6.GUI渲染线程与 JavaScript 引擎(线程)为互斥 ok

我们都知道JavaScript 是可操纵 DOM 和 css 样式 的,

如果在修改这些元素属性同时渲染界面（即 JavaScript 线程和 UI 线程同时运行）,

那么渲染线程前后获得的元素数据就可能不一致了。

因此为了防止渲染出现不可预期的结果,

浏览器设置 「GUI渲染线程与 JavaScript 引擎为互斥」的关系。

7 为什么有时候JS需要等到CSS的下载呢？ Ok

如果脚本的内容是获取元素的样式，宽高等CSS属性

也就是依赖于CSS，因而只好等前面所有的样式下载完后，再执行JS。

34.为什么 0.1+0.1 ！== 0.3

在做算术运算时，JS 会先把十进制数转换成二进制数后再计算，

0.1 和 0.2 的二进制数是个无限循环小数。

JS 中表示一个数字只有 64 位，其中精度位（有效数位）只有 52 位，

所以当出现无限循环小数时，会通过 0 舍 1 入 的规则截取前 52 位（类似十进制的四舍五入），

这样导致了精度位的丢失。 所以运算结果不等于 0.3了

35. js表示数字使用64位分别为：

符号位1位:不参与计算，0表示正数;1表示负数；

指数位11位:有个基准值(01111111111)，小于这个数时指数位就是负数。

因为指数位没有符号位，而科学计数法的指数位可以为负数。转换的时候要减去这个基准值；

有效位数 52 位：有效数字隐藏了1位，因为以 0 开头没有意义；

36. 什么是vite? 你对vite的理解？

是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

一个开发服务器，它基于原生 ES 模块。        

一套构建指令，它使用 Rollup 打包你的代码。

37. 为什么选择vite?

当我们开始构建越来越大的应用时，

需要处理的 JavaScript 代码量会呈指数级增长。

项目会包含很多的模块。几十个或者几百个。

这个时候我们会遇见性能瓶颈

使用 JavaScript 开发的工具通常需要很长时间（甚至是几分钟！）才能启动开发服务器，

文件修改后的效果也需要几秒钟才能在浏览器中反映出来。

Vite就是为了就解决这个问题

38. vite的优势？

1==>速度快: Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，

并且比 JavaScript 编写的打包器【预构建依赖】快 10-100 倍。

2==>按需提供源码: Vite只需要在浏览器请求源码时,

进行转换并按需提供源码。

根据情景动态导入代码。

40. npm与yarn的区别

1.npm是按照队列执行每个package。

也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装。

而yarn是同步执行所有任务，提高了性能。  

2.使用yarn安装过一个软件包，再次用yarn安装时，

从缓存中获取，就不会像npm那样再从网络下载了。

package  [pai k a g]   包

41. package.json中~和^的区别

波浪号~指定版本：比如  "core-js": "~3.6.5",  

   表示安装3.6.x的最新版本（不低于3.6.5），

   但是不安装3.7.x，也就是说安装时不改变大版本号和次要版本号  

^指定版本：比如 "antd": "^3.1.4",

表示安装3.1.4及以上的版本，但是不安装4.0.0，

也就是说安装时不改变大版本号。

形象理解：~向水波一样平静，不改变大版本号和次要版本号.

^ 有冲锋的意思，不改变大版本号