做设计用哪个素材网站好,dw软件安装包,壁纸网站模板,外贸营销型网站建设1.事件轮询#xff1f;
JavaScript 是单线程的#xff0c;同一时间只能做一件事。所有任务都需要排队#xff0c;前一个任务结束#xff0c;才会执行后一个任务#xff0c;为了保证任务有序的执行#xff0c;事件轮询就是单线程任务调度的一种方式#xff0c;单线程任务…1.事件轮询
JavaScript 是单线程的同一时间只能做一件事。所有任务都需要排队前一个任务结束才会执行后一个任务为了保证任务有序的执行事件轮询就是单线程任务调度的一种方式单线程任务分为同步任务和异步任务而异步任务又分为宏任务和微任务过程 浏览器会首先执行宏任务 如果执行过程中遇到宏任务就把他加入宏任务队列遇到微任务就把他加入微任务队列当前宏任务执行完后会判断 微任务列表 中是否有任务如果有执行微任务当所有微任务执行完后再执行下一个宏任务不断循环。宏任务主代码块、setTimeOut、setInterval、script、I/O操作、UI渲染微任务promise、async/await(返回的也是一个promise)、process.nextTick 2.Hash和history的区别 hash与history一般指前端框架中的路由模式对应两种路由 hash路由和history路由
hash路由兼容性比histroy路由好浏览器url中hash 路由带了一个很丑的 #而history是没有的hash即浏览器地址栏 URL 中的 # 符号hash 虽然出现在 URL 中但不会被包括在 HTTP 请求中因此改变 hash 不会重新加载页面history利用了 HTML5新增的 pushState() 和 replaceState() 方法在已有 back()、forward()、go() 的基础上提供了对历史记录进行修改的功能。调用pushState() 和 replaceState()时虽然改变了当前的 URL但浏览器不会向后端发送请求但如何用户刷新页面会导致浏览器向服务器发起请求如后端没有做出适当的响应则会显示404页面 3.强缓存和协商缓存
浏览器缓存主要分为强缓存也称本地缓存和协商缓存也称弱缓存。浏览器在第一次请求发生后再次发送请求时强缓存浏览器请求某一资源时会先获取该资源缓存的header信息然后根据header中的Cache-Control和Expires来判断是否过期。若没过期则直接从缓存中获取资源信息包括缓存的header的信息所以此次请求不会与服务器进行通信。这里判断是否过期则是强缓存相关。协商缓存协商缓存就是由服务器来确定缓存资源是否可用所以客户端与服务器端要通过某种标识来进行通信从而让服务器判断请求资源是否可以缓存访问。主要看响应头的Etag和last-modify这两个字段.强缓存状态码200协商缓存304. 4.url过程
URL解析当在浏览器地址栏输入URL后浏览器会判断这个URL的合法性以及是否有可用缓存。如果判断是URL则进行域名解析如果不是URL则直接使用搜索引擎搜索。域名解析浏览器首先会解析域名获取对应的IP地址。这个过程涉及到了域名解析服务器的查询和转发如果本地DNS缓存中有对应的条目则可以直接使用缓存的IP地址。TCP连接获取到IP地址后浏览器便会与服务器建立TCP连接包括客户端向服务器发送SYN(同步)报文服务器回复SYNACK(同步/应答)报文最后客户端再回复ACK(应答)报文完成三次握手过程。发送HTTP请求TCP连接建立后浏览器便会向服务器发送HTTP请求报文其中包括请求方法、路径、协议版本等信息以及请求头部信息等。服务器响应服务器接收到请求后会从服务器文件系统或者处理逻辑中获取到数据生成HTTP响应报文并将其返回给浏览器。浏览器渲染当浏览器接收到响应报文后会对HTML文档进行解析并构建dom树、css树、渲染树等最终将页面呈现给用户。连接关闭当浏览器从服务器接收到所有需要的数据后就会关闭TCP连接。 5.浏览器渲染过程
解析html浏览器首先解析HTML文档将其转化为dom树。这个过程中浏览器会将HTML标签转化为节点形成DOM树的结构。解析CSS。浏览器解析CSS文件构建css树。CSS树是包含所有CSS样式信息的树结构。构建渲染树。将DOM树和CSSOM树合并形成渲染树。渲染树只包含那些需要显示在页面上的元素并且每个元素根据CSSOM包含了相应的样式信息。布局计算。根据渲染树的结构计算每个节点在屏幕上的大小、位置等属性生成布局信息。这个过程涉及到元素的尺寸和位置的计算可能会发生回流和重绘。页面绘制。将生成的布局信息交给浏览器的绘图引擎通过GPU加速将像素绘制到屏幕上。这一步将布局信息转化为实际的视觉展示。执行JavaScript代码。浏览器的主线程负责解析和执行JavaScript代码。如果JavaScript代码修改了DOM这可能会影响渲染树的构建和页面的绘制。 6.script脚本的异步加载顺序
script有两种异步加载方式 分别是defer与asyncdefer与async的区别是defer要等到整个页面在内存中正常渲染结束DOM 结构完全生成以及其他脚本执行完成才会执行async一旦下载完渲染引擎就会中断渲染执行这个脚本以后再继续渲染。一句话defer是“渲染完再执行”async是“下载完就执行”。另外如果有多个defer脚本会按照它们在页面出现的顺序加载而多个async脚本是不能保证加载顺序的。 7.ES6模块化和commonjs模块化区别 语法不同ES Module使用import导入export或者export default导出CommonJS使用require导入exports导出加载时机不同ES Module是编译时加载代码执行前静态分析阶段使用import函数时是运行时加载CommonJS是运行时加载必须等模块内所有代码运行结束后才能导出加载方式不同ES Module是异步加载不会阻塞代码CommonJS是同步加载如果加载的模块够大时可能会阻塞后续代码导出方式不同ES Module是导出值的引用多个文件引入同一个模块得到的引用是同一个CommonJS是值的拷贝效率不同ES Module加载效率更高编译时加载、模块缓存机制、并行加载、tree-shakingCommonJS效率相对较低导出的内容不同ES Module是编译阶段静态分析导出静态定义所以很多ES Module模块化的优化都是在这 个阶段做的这也就是ES Module能够更好的支持tree shaking的原因CommonJS导出的是对象必须加载完模块内的所有代码才能生成导出对象导致commonjs 不好优化ES Module导出的变量是只读的不能修改修改了会报错CommonJS导出的变量是可以修改的这是因为ES Module导出的是引用如果可修改会影响其他模块的导入commonjs导出的是值的拷贝不会影响 8.es6新特性
class 类let、const变量声明方式新增了promise异步新增了symbol基本数据类型新增了proxy 代理Api新增了set、map数据结构es6模块化新增了箭头函数新增了模板字符串新增了...扩展运算符新增了生成器函数for...of循环 9.for....in.... 和 for....of.... 的区别
遍历对象时for…of 遍历获取的是对象的键值for…in 获取的是对象的键名 遍历数组时for…of 只返回数组的下标对应的属性值for…in 会返回数组中所有可枚举的属性(包括原型链上可枚举的属性)总的来说for...in适合遍历对象for...of适合遍历数组等可迭代的数据类型数组、字符串等 10.原型和原型链
原型构造函数的prototype属性它的属性值是一个对象这个对象包含了可以由该构造函数的所有实例共享的属性和方法。原型链当访问一个对象的属性时如果这个对象内部不存在这个属性那么它就会去它的原型对象里找这个属性这个原型对象又会有自己的原型于是就这样一直找下去这种链状结构就叫做原型链
