前端基础（之五）

Q1: git常用的命令有哪些

git init 在当前目录下创建一个新的Git仓库

git clone 复制一个远程仓库到本地

git add 将文件添加到暂存区，准备提交

git commit 提交暂存区的更改到本地仓库，并记录提交信息

git status 查看仓库的当前状态，显示未跟踪、已修改、已暂存等文件状态

git pull 从远程仓库拉取最新的代码到本地

git push 将本地分支的更改推送到远程仓库

git merge 将分支合并到当前分支中

git diff 查看文件的修改内容，包括新增、删除、修改等

git log 查看git仓库的提交记录，包括提交者、提交时间、提交信息等

git branch 创建、查看、删除分支等操作

git checkout 切换分支或恢复文件到特定版本

git reset 撤销已提交的修改

Q2：当git merge发生冲突的时候应该怎么做

1. 识别冲突文件：检查git状态，找出那些文件处于冲突状态

git status

2. 打开冲突文件：手动编辑这些文件，找到标记为<<<<<<, =======, >>>>>>>的部分。这些标记表明了冲突的开始和结束，以及你的改动和合并进来的改动

3. 手动解决冲突：选择你想要保留的代码部分，删除或修改冲突标记符

4. 保存并关闭文件：解决冲突后，保存文件并关闭编辑器

5. 继续合并操作：使用git add命令告诉Git冲突已解决

git add <解决后的文件>

Q3：请描述图片懒加载的实现方式，以及视频懒加载的实现方式

图片懒加载的实现方式：

HTML标签设置：在img标签中添加loading属性，并将其值设置为lazy，这样页面中的图片就不会立即加载，而是等到滚动到可视区域内时才加载。

JS实现：利用Intersection Observer API来监听图片是否出现在可视区域内。如果图片进入可是区域，则加载图片。

滚动事件监听：通过监听滚动事件，当图片滚动到可视区域时，修改img标签的src属性为预先设置的真实图片地址。

元素位置计算：使用getBoundingClientRect()方法获取图片的位置信息，如果图片顶部到文档顶部的距离小于浏览器可视窗口高度加上滚动条滚动过的高度，且图片的高度加上顶部到文档顶部的距离大于滚动条滚动过的高度，则认为图片在可视区域内，

// 视频懒加载的实现方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Load Video</title>
<style>.video-container {height: 300px;}
</style>
</head>
<body>
<div class="video-container"><video class="lazy-video" autoplay muted loop><source data-src="video.mp4" type="video/mp4"></video>
</div><script>document.addEventListener("DOMContentLoaded", function() {let lazyVideos = document.querySelectorAll(".lazy-video");function lazyLoad() {lazyVideos.forEach(video => {if (isElementInViewport(video)) {// 替换视频源video.src = video.querySelector("source").getAttribute("data-src");}});}function isElementInViewport(el) {var rect = el.getBoundingClientRect();return (rect.top >= 0 &&rect.left >= 0 &&rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&rect.right <= (window.innerWidth || document.documentElement.clientWidth));}document.addEventListener("scroll", lazyLoad);window.addEventListener("resize", lazyLoad);window.addEventListener("load", lazyLoad);});
</script>
</body>
</html>

Q4：在一个页面中，还有哪些可以提升页面性能的方式

一.页面渲染相关

1.减少页面重绘和回流

2.图像压缩、切片和sprites

3.字体文件压缩

4.延迟加载/预加载资源

二.捆绑优化

1.webpack用于resolve.alias的优化（同样适用于Vite）

2.webpack对解决方案的优化（也适用于Vite）

3.webpack限定loader的加载范围（不适用于Vite）

4.使用webpack || Vite拆分代码

5.Tree Shaking (摇树优化)

6.在vite中禁用不必要的构建配置

Q5：请描述如何处理跨域问题以及在工作中常用的处理方式是什么

1.JSONP方式解决跨域

（JSONP的原理就是利用script标签不受浏览器同源策略的限制，与后端一起配合来解决跨域问题的。JSONP的优点是兼容性好，可以解决主流浏览器的跨域问题，缺点是仅支持GET请求，不安全，可能遭受xss攻击）

2.CORS方式解决跨域

（CORS方式解决跨域问题比较常用，只需要后端配置响应头Access-Control-Allow-Origin，前端无需配置，实现简单）

3.搭建Node代理服务器解决跨域

（服务端请求服务器是不受浏览器同源策略的限制的。客户端和自己搭建的代理服务器之间也存在跨域问题，所以需要再代理服务器中设置CORS）

4.Nginx反向代理解决跨域

(nginx通过反向代理解决跨域也是利用了服务器请求服务器不受浏览器同源策略的限制实现的。)

5.postMessage方式解决跨域

6.Websocket方式解决跨域

Q6：使用代理的时候，出现了跨域cookie没有带上的情况，应该怎么办

1.设置代理服务器响应头

Access-Control-Allow-Credentials: true

Access-Control-Allow-Orifin：客户端域名

2.设置withCredentials属性

xhr.withCredentials = true

3.注意代理服务器的配置

4.检查CORS配置

5.使用同源代理

Q7. 请描述如何实现一个可以在弹窗中打开多个弹窗的功能，就像是一个多层级的弹窗窗口？

<button onclick="openPopup()">打开弹窗</button>
<div id="popupContainer"></div>

let popupStack = []; // 用于存储弹窗的栈function openPopup() {// 创建弹窗内容let popupContent = document.createElement("div");popupContent.classList.add("popup");popupContent.innerHTML = `<button onclick="openPopup()">打开弹窗</button><button onclick="closePopup()">关闭弹窗</button>`;// 将弹窗内容添加到弹窗容器中document.getElementById("popupContainer").appendChild(popupContent);// 将弹窗内容添加到弹窗栈中popupStack.push(popupContent);
}function closePopup() {// 从弹窗栈中取出最后一个弹窗内容并移除let lastPopup = popupStack.pop();if (lastPopup) {lastPopup.remove();}
}

.popup {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 300px;height: 200px;background-color: #fff;border: 1px solid #ccc;padding: 10px;z-index: 999;overflow: auto;
}

Q8. let 和const的区别是什么？为什么const不能变？如何实现一个const?

let和const的区别是：

let 声明的变量可以改变，包括其值和类型

const声明的变量是不可变的，必须在声明时初始化，且不能在后续代码中重新赋值

const不能变的原因：

1.防止重复赋值：使用const声明的变量一旦被赋值，就不能再次赋值给其他的值。这样可以避免程序出现意外的值覆盖，提高代码的可读性和可靠性。

2.代码可预测性：通过使用const声明不可变变量，可以使代码更易于推理和理解。在阅读代码时，可以知道这个变量在整个程序中不会发生改变，有助于减少程序出错的可能性。

3.优化代码

对于Javascript引擎来说，使用const声明的变量可以帮助引擎做出更好的优化，提高代码的执行效率。