浏览器是如何渲染页面的？

1.获取html文件后，渲染引擎会对将HTML代码解析为DOM结构，同时获取CSS；2.将获取到的CSS解析为CSSOM树，与DOM树并发解析；3.解析JS脚本对DOM树和CSSOM树进行修改。4.将DOM树和CSSOM树合成为render树 5.对render树上节点进行布局，确定其位置，如果元素位置后续被改变而触发重新绘制叫做回流。6.对摆好位置的节点进行色彩渲染，如果元素样式后续被改变而触发页面重新绘制叫做重绘。7.加载剩余的img，video等媒体文件。浏览器拿到HTML，先将HTML转换成dom树再将CSS样式转换成stylesheet根据dom树和stylesheet创建布局树对布局树进行分层，为每个图层生成绘制列表再将图层分成图块紧接着光栅化将图块转换成位图，最后合成绘制生成页面。分层的目的：避免整个页面渲染，把页面分成多个图层，尤其是动画的时候，把动画独立出一个图层，渲染时只渲染该图层就ok，transform，z-index等，浏览器会自动优化生成图层光栅化目的：页面如果很长但是可视区很小，避免渲染非可视区的样式造成资源浪费，所以将每个图层又划分成多个小个子，当前只渲

面试 · 2023-08-02
浏览器是如何渲染页面的？

说一下浏览器输入URL发生了什么？

1.URL解析：判断浏览器输入的是搜索内容还是URL 2.查找缓存：如果能找到缓存则直接返回页面，如果没有缓存则需要发送网络请求页面 3.DNS域名解析：将域名转换为IP地址的过程，得到了服务器具体的IP地址，才可以进行TCP链接以及数据的传输4.三次握手建立TCP连接：第一次握手：客户端主动链接服务器，发送初始序列号seq=x与SYN=1同步请求标志，并进入同步已发送SYN_SENT状态，等待服务器确认。第二次握手：服务端收到消息后发送确认标志ACK=1与同步请求标志SYN=1，发送自己的序列号seq=y以及客户端确认序号ack=x+1，此时服务器进入同步收到SYN_RECV状态。第三次握手：客户端收到消息后发送确认标志ACK=1，发送自己的序列号seq=x+1与服务器确认号ack=y+1，发送过后即确认链接已建立状态ESTABLISHED，服务端接收确认信息后进入链接已建立状态ESTABLISHED。5.发起HTTP请求：浏览器构建HTTP请求报文，并通过TCP协议传送到服务器的指定端口，HTTP请求报文一共有三个部分报文首部，通常包含请求行与各种请求头字段等；空行，告诉服务器请求

面试 · 2023-08-02

面试：说一说跨域是什么？如何解决跨域问题？

得分点：同源限制、协议、域名、端口、CORS、node中间件、JSONP、postmessage标准回答跨域：当前页面中的某个接口请求的地址和当前页面的地址如果协议、域名、端口其中有一项不同，就说该接口跨域了。跨域限制的原因：浏览器为了保证网页的安全，出的同源协议策略。跨域解决方案CORS：目前最常用的一种解决办法，通过设置后端允许跨域实现。 res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST");node中间件、nginx反向代理：跨域限制的时候浏览器不能跨域访问服务器，node中间件和nginx反向代理，都是让请求发给代理服务器，静态页面和代理服务器是同源的，然后代理服务器再向后端服务器发请求，服务器和服务器之间不存在同源限制。JSONP：利用的原理是script标签可以跨域请求资源，将回调函数作为参数拼接在url中。后端收到请求，调用该回调函数，并将数据作为参数返回去，注意设置响应头返回

面试 · 2023-08-02
面试：说一说跨域是什么？如何解决跨域问题？

vue路由传参面试题：params参数传的是空串如何解决？

面试题一：如何指定params参数可传可不传？在配置路由的时候，在占位符后面加个?面试题二：params参数可传可不传，如果传的是空串如何解决？使用undefined解决

面试 · 2023-07-29
vue路由传参面试题：params参数传的是空串如何解决？

面试题：computed与watch的区别

1.computed能完成的功能，watch都可以完成。2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。3.computed会使用缓存，而watch不使用缓存，每次监听都执行回调4.computed需要return，而watch不一定要return5.computed从一开始就进行监听，而watch则不监听第一次加载，如果要watch监听第一次加载，需要配置immediate：true6.使用场景：computed适用于一个数据受多个数据影响时，watch适用于多个数据受一个数据影响时。两个重要的小原则: 1.所有被Vue管理的函数，最好写成普通丽数，这样this的指向才是vm 或 组件实例对象。 2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

面试 · 2023-07-28
面试题：computed与watch的区别

当被问到vue组件中的 data 为什么是函数?

组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data，如果其中一个组件改变了data的值，那么其它所有使用同一个data对象的组件都会受到影响。而当我们将data定义为一个函数时，每个组件都会调用这个函数，返回一个新的对象，这样每个组件都拥有了自己独立的data对象，彼此之间不会产生影响。因此，为了保证每个组件都有自己独立的data对象，Vue规定了data必须是返回一个对象的函数。 具体来说，当我们在组件中定义data为一个对象时，这个对象会被所有组件实例共享，如果其中一个组件改变了data的值，那么其它所有使用同一个data对象的组件都会受到影响。而当我们将data定义为一个函数时，每个组件都会调用这个函数，返回一个新的对象，这样每个组件都拥有了自己独立的data对象，彼此之间不会产生影响。

面试 · 2023-07-27

面试题：说下vue、react中key的作用是什么？（key的内部原理）

1.虚拟DOM中key的作用:key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据[新数据]生成[新的虚拟DOM]，随后Vue进行[新虚拟DOM] 与[旧虚拟DOM]的差异比较，比较规则如下:2.对比规则: (1).旧虚拟DOM中找到了与新虚拟DOM相同的key: a.若虚拟DOM中内容没变，直接使用之前的真实DOM b.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM(2).旧虚拟DOM中未找到与新虚拟DOM相同的key:创建新的真实DOM，随后渲染到到页面。 3.用index作为key可能会引发的问题:a.若对数据进行:逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新 ==> 界面效果没问题，但效率低b.如果结构中还包含输入类的DOM，会产生错误DOM更新 ==> 界面有问题。4.开发中如何选择key?:最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key也是没有问题的

面试 · 2023-07-27
2014 - 2024 杀死一只知更鸟. All Rights Reserved.
Theme Jasmine by Kent Liao
友情链接：知新网