前端面试笔试
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 {@Overridepublic 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中的指令,完成构建、测试和部署工作。