每日面经总结（一日5题系列）
跨域主要限制了三个方面：①js不能操作跨域的dom②跨域不能访问站点的cookie、localStorage、indexDB等数据③不能发送XMLHTTPRequest请求
解决跨域的方式：①jsonp（利用script标签没有跨域的限制）②cors（跨域资源共享，可以发送网络请求让跨域数据安全传输）③window.postMessage可以在不同源的dom间进行通信④使用代理转发（nginx或node）⑤websocket协议没有同源限制
2.http3.03.vite
Vue团队为什么要做vite：首先vite跟同类型的工具链相比（路线）
① Webpack：专注于打包，抽象层次较低，要使用大量插件和配置来实现应用编写
② Vue-cli：这种脚手架，专注于应用，抽象层次较高，，但是比较复杂，类似于一个黑盒，要定制内容与默认配置冲突是，比较麻烦
③ Vite：它的cli专注于应用，抽象层次较高，但API层面则专注于支持上层应用，抽象层次较低，就更灵活
特点：vite给人的第一印象就是启动快
④ 快速的冷启动和热更新：
（1）Webpack采用bundle机制，在构建依赖图谱的过程中，涉及大量文件IO、文件转换和文件解析工作，需要消耗大量时间；
而vite采用unbundle机制，在启动过程中只做初始化工作，其他全部由浏览器支持，在浏览器发起请求后，dev server端会对middlewares做拦截转换并实现缓存，再发送给浏览器端，不对文件做合并捆绑操作
（2）热更新方面，webpack会对修改的源文件重新编译打包
Vite则通过dev server 监听到文件变化后，通过middlewares通知浏览器重新加载变化文件
⑤ 首屏性能和懒加载较慢
（1 webpack在浏览器请求时，直接将打包好的文件发给浏览器没有首屏问题，
影响首屏加载的因素有：①在网络进程下载资源提交文档给渲染进程时，渲染进程会创建一个空白页面，等待css和js的加载，生成dom和cssom，然后执行js，然后准备首次渲染②所以首屏加载的主要瓶颈在：下载css、下载js、执行js
① Html是边下载边解析边渲染的，需要等header中的js和css加载完，遇到body才开始绘制
② 渲染进程在拿到html文件时，会进行预解析，去请求css和js文件（并行下载）
③ Css解析会阻塞js执行，css不会阻塞dom解析，但是会阻塞dom渲染（css会阻塞布局树的生成进而阻塞页面渲染）css解析成cssom和dom解析成dom树是并行的【link引入的是并行解析，同时被加载，@import引入的在页面加载完后被加载】
（如果把CSS放在文档的最后面加载执行，CSS不会阻塞DOM的生成，也不会阻塞JS，但是浏览器在解析完DOM后，要花费额外时间来解析CSS，而不是在解析DOM的时候，并行解析CSS。
并且浏览器会先渲染出一个没有样式的页面，等CSS加载完后会再渲染成一个有样式的页面，页面会出现明显的闪动的现象。
所以应该把CSS放在文档的头部，尽可能的提前加载CSS；把JS放在文档的尾部，这样JS也不会阻塞页面的渲染。CSS会和JS并行解析，CSS解析也尽可能的不去阻塞JS的执行，从而使页面尽快的渲染完成）
④ Js放在head中会立即执行，阻塞后续dom的生成，js执行依赖前面的样式，js前面的样式要全部加载完才会执行js（所以css先生成cssom，然后执行js，然后继续进行后面的html解析）【遇到js，前面解析好的dom会先渲染】
⑤ 标有async的script标签会在页面加载时同时加载，加载完成后立即执行（执行时若dom还在解析会阻塞dom解析），标有defer的script标签会在页面全部加载完成后顺序执行，在DOMContentLoaded前执行
投递三星等公司7个岗位 >