2024 面试题第三章
1.作用域（Scope）,原型链（Prototype Chain）, 继承 ?
作用域：
作用域是指变量、函数和对象的可访问范围。在 JavaScript 中，作用域主要分为：
全局作用域：在代码的任何地方都可以访问的变量。
函数作用域：在函数内部定义的变量，只能在该函数内部访问。
块级作用域：在 let 和 const 声明的块中有效，通常用于控制变量的可见性。原型链：
原型链是 JavaScript 中实现继承的一种机制。每个对象都有一个内部属性指向其原型对象，
当访问对象的属性时，如果该对象没有该属性，JavaScript 会沿着原型链向上查找，
直到找到该属性或到达原型链的顶端（null）。原型链使得对象可以共享属性和方法。继承：
继承是面向对象编程的一个基本特性，允许一个类（子类）继承另一个类（父类）的属性和方法。
在 JavaScript 中，继承可以通过原型链实现，也可以使用 ES6 的 class 语法来实现。
继承使得代码重用变得更加简单，并且可以创建更复杂的对象结构。
这些概念是理解面向对象编程和 JavaScript 语言特性的基础，掌握它们有助于更好地进行软件开发。2.HTML5有哪些新特性 ？
html5指的是对HTML的第五次修订，主要为了Web应用的功能性和提高用户的体验。
- 加入了新的语义化标签，eg：header，footer，nav等
<header>：定义文档的头部。
<footer>：定义文档的底部。
<article>：定义独立的内容块。
<section>：定义文档中的一个区域。
<nav>：定义导航链接的部分。
<aside>：定义与主内容相关的侧边内容。- 新增了输入框类型，eg：email，url，date，number，range，color等。
- 新增了音视频标签，audio，video。
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>- 新增了画布Canvas。
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>- 新增了本地存储 local Storage 和 会话存储 session Storage。
// 存储数据
localStorage.setItem("key", "value");
// 获取数据
var value = localStorage.getItem("key");- 地理信息定位 API ，
navigator.geolocation.getCurrentPosition(function(position) {
console.log("Latitude: " + position.coords.latitude);
console.log("Longitude: " + position.coords.longitude);
});- 响应式设计
HTML5 支持媒体查询，使得开发者能够根据不同的设备和屏幕尺寸调整布局和样式。
@media (max-width: 1366px) {
.system-app-home__panel--base {
left: calc(var(--system-app-main-min-width) * 0.0336666667);
top: calc(0.1847058824 * (100vh + 430px));
}
}- 新的 API
WebSocket 用于实现实时双向通信。
WebRTC：用于实现实时音视频通信。
Drag and Drop：支持拖放操作。- Web Workers Web Workers 允许在后台线程中运行 JavaScript，避免阻塞主线程，提高应用的性能。
3.前端跨域
跨域是指在浏览器中，出于安全原因，限制一个域名的网页去请求另一个域名的资源。跨域问题通常在前端开发中遇到，尤其是在进行 API 请求时。这个是浏览器自己添加的限制。
跨域问题的根本原因是浏览器的同源策略（Same-Origin Policy）。同源策略是指，只有同源的网页才能互相访问。所谓同源是指协议、域名和端口都相同。这样做是为了防止恶意网站窃取用户数据或进行其他攻击。
解决办法：
CORS（跨域资源共享）：
服务器端设置响应头 Access-Control-Allow-Origin，允许特定的域名访问资源。
例如，允许 https://example.com 访问：
Access-Control-Allow-Origin: https://example.com代理服务器：
在开发环境中，可以使用代理服务器（如 Webpack Dev Server 的代理功能, vite的 proxy 功能）
将请求转发到目标服务器，避免跨域问题。
例如，在 vue.config.js 中配置代理：
module.exports = {
devServer: {
proxy: 'http://api.example.com'
}
};
原理都是webpack，vite等构建工具都会提供一个三方的代理服务器，相当于一个中间桥梁。WebSocket 协议不受同源策略的限制，可以用于跨域通信。
4.行内元素和块元素
在 HTML 中，元素可以分为两大类：行内元素（Inline Elements）和块元素（Block Elements）。这两种元素在布局和表现上有显著的区别。
块元素（Block Elements） 定义：块元素是指在文档中占据一整行的元素，通常会在其前后产生换行。块元素的宽度默认是其父元素的 100%，可以设置宽度和高度。
特点：
占据整行，后面的元素会被推到下一行。
可以设置宽度和高度。
可以包含其他块元素和行内元素。
常见的块元素：
<div>：通用的容器元素。
<h1> 到 <h6>：标题元素。
<p>：段落元素。
<ul>、<ol>、<li>：无序和有序列表。
<table>：表格元素。
<header>、<footer>、<section>、<article> 等语义化元素。行内元素（Inline Elements） 定义：行内元素是指在文档中只占据其内容所需的宽度，不会在其前后产生换行。行内元素通常用于文本和小型元素的组合。
特点：
只占据内容的宽度，后面的元素不会被推到下一行。
不能设置宽度和高度（宽度和高度由内容决定）。
只能包含文本和其他行内元素，不能包含块元素。
常见的行内元素：
<span>：通用的行内容器。
<a>：超链接元素。
<img>：图像元素。
<strong>、<b>：加粗文本。
<em>、<i>：斜体文本。
<br>：换行元素。
<code>：代码片段。总结
块元素：占据整行，适合用于布局和结构。
行内元素：只占据内容的宽度，适合用于文本和小型元素的组合。
5.href和src的区别
(1) get请求参数直接拼接url后面,post请求放在请求体
(2) 相对post请求,get请求不安全,速度更快
(3) get请求用于请求数据,post请求用户提交表单
(4) get可以直接缓存,如果需要缓存post,需要在请求头设置cache-control和到期时间expired
6.http2和http1.x区别，优势和特点？
(1)http1.x使用文本格式传输数据，http2采用二进制格式，二进制格式解析更加高效，所以http2传输速率更高。
(2)http2采用头部压缩技术，减少请求头和相应头的数据，降低了网络的负担(网络带宽)。
(3)http2增加了流量控制，防止网络堵塞和资源浪费。
7.http和https区别？
(1)超文本传输协议(http)，用于在网络端与端之间传送超文本，客户端请求服务端响应的一种标准(tcp), 明文传输。
(2)安全超文本传输协议(https)，顾名思义，是一个安全版本的http，http下加入了SSL, 加密传输。
(3)默认端口不同 80 443 。
(4)http资源消耗更小。
(5)https需要ca证书, ca证书收费。
8.vue react的区别
相同点：虚拟DOM，数据驱动，组件化开发，响应式，组件通信，生命周期，Diff算法，都有全局状态管理工具 (1)vue双向绑定，修改数据视图自动更改，react单向数据流动，需要手动的setState
(2)vue组件template js script结构分离，react jsx组件，html css都能写在js里面
(2)react注重底层，api相对较少， vue注重上层，api较多
9.单向数据流动的优缺点
优点：
(1)单向数据简化了流动的逻辑，降低了数据的复杂度。
(2)提高了数据的可预测性和可维护性，方便数据的管理。
(3)降低了组件之间的耦合度，提高代码的灵活性和可重用性。
缺点：
(1)页面视图无法自动更新，需要主动触发。
(2)局部状态管理繁琐。
10.性能监控系统是怎么做的
前端性能监控系统的核心步骤包括确定监控指标、选择监控工具、部署监控代码、收集性能数据、分析数据、调优与验证， 以及持续监控与反馈。
(1)根据自己的项目需要，明确需要监控的指标，比如页面加载时间，资源加载时间和占用内存等。
(2)选择合适的监控工具，比如lighthouse，perfecto等。
(3)部署监控代码，如页面加载脚本，事件监听等，收集数据和分析确定问题并解决。