前端面试笔试

1 相对路径和绝对路径的区别

区别：他们描述文件或目录位置的方式不同

‌绝对路径‌：绝对路径是指从系统的根目录开始的完整路径，无论当前工作目录在哪个位置，绝对路径始终指向文件或目录的确切位置。绝对路径适用于网站的外部链接。网页编程中，绝对路径很少使用，上传到服务器后，文件的绝对路径可能会变化，导致编程中的路径链接失效。

‌相对路径‌：相对路径是指相对于当前工作目录的路径，相对路径依赖于当前所在的位置，适用于网站的内部链接。

2 ES5和ES6区别

ES5和ES6是javascript的语言的不同版本。
区别：

变量声明：

ES5：使用var声明变量，没有块级作用域。
ES6：引入了let和const，提供了块级作用域和不可变性。
模板字符串：

ES5：字符串拼接通常使用+操作符。
ES6：引入了模板字符串（使用反引号``），支持多行字符串和表达式插值。
箭头函数：

ES5：函数通常使用function关键字或函数表达式声明。
ES6：引入了箭头函数（=>），提供了更简洁的函数写法，并且自动绑定this上下文。

3 ajaxHttp基础知识

AJAX是一种在浏览器中实现异步请求的技术，通过AJAX可以在不刷新页面的情况下与服务器进行数据交换，从而更新网页的局部内容。
ajax的核心对象是‌XMLHttpRequest
‌创建对象‌：var xhr = new XMLHttpRequest();
‌配置请求‌：xhr.open(‘GET’, ‘http://example.com’, true);
‌发送请求‌：xhr.send();
‌接收响应‌：xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // 处理响应数据 } };

4 跨域请求

处理跨域请求（CORS, Cross-Origin Resource Sharing）是一项常见的需求，尤其是在构建RESTful API时。跨域问题通常发生在一个域的网页尝试获取另一个域的资源时。
例如，一个运行在http://example.com的网页尝试获取http://api.example.com上的数据。

（1）在Controller的方法上使用@CrossOrigin注解来允许跨域请求
（2）通过配置类全局配置CORS策略：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 
@Configuration
public class WebConfig implements WebMvcConfigurer {
 
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://example.com")   // 允许这个地址
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

5 css和js的性能优化

CSS优化：
（1）压缩CSS文件：使用工具CSSNano压缩CSS代码，去除注释、不必要的空格、和换行，缩短变量名，以减少文件大小，加快传输速度。
（2）避免使用@import‌：使用@import会导致CSS文件下载和解析被阻塞，影响页面渲染速度。建议使用link标签并行加载多个CSS文件
（3）减少HTTP请求‌：合并CSS文件，减少HTTP请求次数，提高加载速度‌

JAVASCRIPT优化：
（1）使用现代JavaScript框架‌：如React、Vue等，这些框架提供了高效的DOM更新机制，减少不必要的DOM操作‌。
（2）减少DOM操作‌：尽量减少DOM操作次数，使用DocumentFragment进行批量DOM操作，避免频繁的重排和重绘‌
（3）‌压缩JavaScript文件‌：使用Terser等工具压缩JS代码，去除注释和不必要的空格、换行符，缩短变量名等，以减小文件大小‌

浏览器优化：
关键渲染路径优化‌：将关键CSS内联到HTML中，确保页面快速渲染‌

6 vue工程中的Jenkinsfile文件（自动化部署工具）

Jenkinsfile在前端Vue项目中主要用于定义和执行自动化构建、测试和部署流程。
它使用Jenkins Pipeline DSL（领域特定语言）编写，允许开发团队以声明式或脚本化的方式描述整个构建流程。通过Jenkinsfile，可以将流水线的定义和配置存储在代码库中，实现流水线的可重复性、版本控制和自动化‌。
一旦代码提交到仓库，Jenkins将自动解析并执行Jenkinsfile中的指令，完成构建、测试和部署工作‌。