js面试题(一)

1.浏览器工作原理？
当我们向浏览器中输入一个url时，其实会先经过dns服务器进行dns解析，将域名转化成ip地址，这时会从ip对应的服务器获取到一个index.html，然后浏览器开始解析这个index.html，解析到link标签，就会去服务器加载css文件，解析到script标签，就会加载相对应的js文件。而将这些文件展现成我们看到的这个页面的样子，取决于浏览器内核。
浏览器内核webkit为例：包括 webCore和JavaScriptCore
webCore负责解析html、布局，css解析渲染
JavaScriptCore：js引擎
Chrome的js引擎是v8引擎
2.v8引擎原理

参考：https://cnodejs.org/topic/59084a9cbbaf2f3f569be482

ast语法树：https://astexplorer.net/
Js源代码经过parse模块(v8引擎的模块)转成ast语法树（一个复杂的数据结构），ast语法树经过ignition模块转成byteCode(字节码),如果这些函数被多次调用，就会标记hot字段，启动turbofan模块去处理这些字节码，转成机器指令，(机器指令是cpu直接能识别的，010101这种)
通过js引擎将js代码最终转成了机器指令，可以让电脑的cpu去处理。
A.没有直接将ast语法树直接转成机器指令，是因为v8引擎可以在
Windows、linus等平台共同使用，所以不知道到底应该转成那种机器指令，机器指令是要让系统cpu去理解。转成了字节码，字节码可以被不同系统平台识别。
字节码可以直接被转成汇编代码，在转成机器指令被机器识别运行！！！
B.优化(turbofan)
如果这些函数被多次调用，就会标记hot字段，这时可以将字节码直接转成机器指令(010101)(turbofan就是完成这部分过程)，然后每次调用就不用执行字节码->汇编指令-》机器指令这个步骤了，进行性能提升
Ignition收集函数的执行信息，将多次调用的函数标记hot字段
C.Deoptimize是反优化过程
Function sum(a,b){return a+b}
Sum(20,30)
Sum(‘a’,’d’)
数字相加与字符串拼接对于v8引擎是不同的指令，所以这个时候v8引擎发现指令不一样，就会将机器指令反优化成字节码，然后再转成机器指令。
由此可见，编写ts代码转译成的js代码比直接编写的js代码性能更高，因为ts不支持更换数据类型。
JavaScript是一门高级语言，如果要让计算机识别，需要先转成汇编语言，然后转成机器语言才能被计算机执行
浏览器内核blink解析html下载js文件，将js通过流的方式传到scanner，进行词法分析，
传给parser，生成ast语法树。

从js源代码到生成ast树的过程中，会生成globalObject
globalObject={String,Math,SetimeOut,window:this(globalObject)
}
V8执行代码，v8引擎内部有一个执行上下文栈(ecstack),js代码想要执行，必须放到执行上下文栈里。
当我们执行全局代码时，需要创建全局执行上下文(global excution context)，将gec放到执行上下文栈里执行。全局执行上下文中有一个vo对象指向go，当代码执行时，var name=‘到点’,会将value赋值给go中的name

Js执行原理

带有函数的执行原理：
函数执行完后，函数执行上下文会出栈。

3.计算浏览器加载页面的首屏时间
白屏时间：页面开始显示内容的时间。也就是：浏览器显示第一个字符或者元素的时间。
首屏时间：首屏时间是指用户打开网站开始，到浏览器首屏内容渲染完成的时间。
利用mutationObserver监听每次dom变化，并计算dom变化的分数，计算的规则为： (1 + 层数 * 0.5)。我们计算出每次dom变化的分数，和距离页面开始渲染的时间，存为一个对象{score:20,time:1021}。我们计算10s内的页面渲染时间，得到一个observerData数组，[{score:20,time:1021},{score:50,time:1045}],如果有那两次相邻的score差距最大，即找到了首屏结束的时间。
https://mp.weixin.qq.com/s/-GJzTt2Q8b1a8mtd_x2QjA 参考这个
4.Rem布局中，根据浏览加粗样式器宽度不同，rem的值是怎么算出来的！
设计图计算出来的rem = 根据电脑屏幕计算出来的rem(按这个公式进行计算)
其实就是一道简单的小学数学题，假设设计稿是800px，上面有一个100px的btn，要将这个页面应用到宽为1920px的电脑屏幕上：
以px比较的数值不同，有一个相同的，就是设计稿是多少rem，应用到电脑上就是rem，即使改变了电脑屏幕宽度，这个按钮肯定是不同的px数值，但是是相同的rem数值。
假设①：800px的设计图，是800rem，即1rem=1px;那我们算一下1920px总共是多少rem，这张设计图呈现在电脑上，应该是平铺满整个屏幕的，所以1920px应该是800rem；所以1rem=1920px/800rem = 2.4px;
这种情况按公式应该是 800px/1px = 1920px/apx 所以a = 1920/8001
假设②：750px的设计图，是7.5rem,默认1rem=100px;那375屏幕是1rem为多少px？
375/a = 750/100;
所以a = 375/750100 ==> a = 50px/1rem
5.页面上水印怎么写？
思路：①利用canvas画图，将text写到页面上，可以利用canvas.rotate()将文本倾斜角度。
②新建一个div，将canvas生成图片，作为div的background-image，并进行repeat展示
正常是这样写，但是假如有心人会删除掉div元素或者把background-image属性给删掉，那水印就没有了！！！！所以我们需要监听dom元素的变化，当元素被删除或者属性被删除时，重新生成一次水印！！！
监听dom元素变化，用的是mutationObserver对象，let observer = new MutationObserver(),
Observer.observe()方法
参考：https://mp.weixin.qq.com/s/xAIJCxoqiPr3uNhX2UPgMQ