大前端面试题

1.下列代码会输出什么
`const person = {
age:25,
growOlder:()=>{
this.age+=1;
},
};

person.growOlder();
console.log(person.age)`
A.25 B.26 C.NaN D.undefined

解析：在js中箭头函数没有自己的this上下文，它的this值是在定义时就确定的，继承自外层作用域的this, 在该示例中，person对象定义域全局作用域（或模块作用域），因此箭头函数中的this指向全局对象，而不是person本身，而全局作用域中没有age属性，this.age的值为undefined，undefined+1结果为NAN
关键知识点：箭头函数、this上下文

2.在浏览器同源策略中，下列哪个选项不属于"同源"的判断标准
A.协议 B.域名 C.路径 D.端口号

解析：同源策略是浏览器的一种安全机制，用来限制不同源的"Web内容"之间进行的交互，可以用来防止非法的跨域读取数据的行为，源策略，由协议、域名、端口号三部分组成
关键知识点：浏览器同源策略

3.以下表达式结果为true的是
A.NaN === NaN B.isNaN(Infinity) C.typeof NaN ==='number' D.isNaN(new Date())

解析：NaN表示Not A Number,NaN是一个十分特殊的值，任何对NaN的操作结果也是NaN,并且NaN不等于任何值，包括它自己；当然NaN虽然代表并"不是一个数字",但是在JS中，NaN的类型实际又被定义为number
关键知识点：NaN、类型判断

4.以下哪种方法可以最有效的减少页面的重绘（repaint）和回流（或重排）(reflow)次数
A.使用document.write动态插入内容
B.在对DOM进行多次修改时将所有的修改操作放在一个单独的函数里面，然后再统一次调用
C.每次更新DOM时都直接操作样式
D.使用CSS类来批量的操作样式，而不是一个个修改

解析：重绘和回流是网页渲染过程中开销很大的操作，重绘是当元素的外观发生变化，但是不影响布局的时候，浏览器重新绘制元素的外观；回流是当页面布局发生变化的时候，浏览器要重新计算元素的几何属性，重新构建渲染树。重绘不一定重排，但是重排一定引起重绘，因此，重排开销巨大，重绘开销小于重排。
document.write主要设计用于页面加载时动态写入内容。当页面完全加载并完成解析后调用 document.write，它会自动调用 document.open，这会导致当前文档被清空，并开始一个新的文档流，从而替换掉现有的页面内容。
将对DOM进行的多次操作放在一个函数里面，统一调用虽然可以一定程度避免频繁操作DOM，但是它实质上不能减少重绘和重排
通过预先定义好CSS类，可以一次性切换样式，让浏览器将多个样式变更合并为一次重排/重绘。
关键知识点：页面性能优化、重绘、重排

5.以下哪种技术允许浏览器从一个域名请求多个资源而无需为每个资源建立TCP连接
A.HTTP/1.0 B.HTTP/1.0持久连接（Persistent Connections） C.HTTP/2多路复用 D.WebSockets

解析：HTTP/1.0默认每个请求都要建立一个独立的TCP连接，请求完成后连接关闭；HTTP/1.0持久化连接通过Connection:keep-alive头部实现了持久连接，并且允许再一个TCP上发送多个HTTP请求，但是这些请求必须串行处理，虽然减少了开销，但是并不能并发多个请求资源；HTTP/2多路复用是HTTP/2的核心特性之一，再同一个TCP连接上可以同时发送多个请求和相应；WebSockets是全双工通信协议，适合实时数据传输，不适合请求多个资源
关键知识点：HTTP、WebSockets

6.以下哪些操作会导致JS中的隐式类型转换
A.== B.+运算符 C.if语句 D.===

解析：隐式类型转换是JS中一个常见的操作，这种转换通常发生在不同类型的数据进行操作时，JS引擎会尝试将数据转换为相同类型以便能执行操作；==当两边数据类型不同，JS会尝试将其转换为相同类型再比较；+作为加法运算符时，如果有操作数是字符串，另一个操作数（无论是数字、布尔值等）都会被转换成字符串，然后进行字符串连接；if 语句中的条件表达式会被转换为布尔值
关键知识点：JS隐式类型转换

7.以下哪些正确反映了浏览器、网络和CDN的工作原理
A.CDN（内容分发网络）通过将内容缓存到多个地理位置的服务器上来加速内容分发
B.浏览器在发送HTTP时会首先查看本地缓存是否有相应的资源
C.使用CDN可以减少服务器的负载并提高网站的可用性
D.浏览器在解析HTNL文档时会阻塞渲染，直到所有外部JS文件加载完毕
E.CDN只能用于静态内容分发而不能用于动态内容分发

解析：CDN的核心原理是将内容缓存到多个地理位置的服务器上来加速内容分发；浏览器在解析HTML文档时，会阻塞渲染，直到同步加载的JS文件加载完毕，如果是异步加载的JS文件（如使用async或defer属性）不会阻塞渲染；CDN可以通过边缘计算、动态缓存等手段实现动态内容的分发
关键知识点：CDN、JS文件加载

8.关于HTML