JavaScript题型第二天

一，CSR和SSR的区别

对于html加载，以React为例，我们习惯的做法是加载文件中的React代码，去生成页面渲染，同时，js也完成页面交互事件的绑定，这样的一个过程是CSR（客户端渲染）

但如果这个js文件比较大，加载起来会比较慢，到达页面渲染的时间就会比较长，导致首屏白屏，这时候，SSR（服务端渲染）就会出来：由服务端直接生成html内容返回给浏览器渲染首屏内容

但是服务端渲染的页面交互能力有限，如果要实现复杂交互，还是要通过引入js文件来辅助实现，我们把页面展示内容和交互写在一起，让代码执行两次，这种方式叫做同构

CSR和SSR区别在于，最终的html代码是由客户端添加还是由服务端添加

二，微前端中的应用隔离是什么，一般怎么实现

应用隔离分为：

主应用和微应用，微应用和微应用之间的js执行环境隔离，css样式隔离

css样式隔离

当主应用和微应用同屏渲染时，就可能会有一些样式相互污染，如果要彻底隔离css污染，可以采用css module或者命名空间的方式，给每个微应用模块以特定前缀，即可保证不会互相干扰，可以采用webpack的postcss插件，在打包时添加特定的前缀

而微应用与微应用之间的css隔离就非常简单，在每次应用加载时，将该应用所有的link和style内容进行标记，在应用卸载后，同步卸载页面上对应的linek和style即可

js执行环境隔离

每当微应用的js被加载运行时，它的核心实际是对全局对象window的修改以及一些全局事件的改变

为消除这种影响，需要采用沙箱机制

核心是让局部的js运行时，对外部对象的访问和修改处在可控范围内

三，下面代码输出

for(var i = 0 ; i <= 5; i++){
setTimeout(function timer(){
console.log(i)
},0)
}

输出5个6

因为setTimeout为宏任务，由于js中单线程eventLoop机制，在主线程同步任务执行完成后才去执行宏任务，因此循环结束后，setTimeout中的回调才会依次执行，输出会向上查找，发现i是，循环结束，i变成6，因此会全部输出6