Q1：介绍一下盒模型
A1：盒模型是用于描述Html在页面总所占空间的方式，盒模型将每个html元素视为一个矩形框，该框主要由四个主要部分组成：内容区域、内边距、边框和外边距。
内容区域是Html元素实际包含内容的部分，如文本、图像或其他嵌套的元素，这是盒模型的核心，决定了元素显示的实际内容。
内边距是内容区域与元素边框之间的空白区域，它可以在css中使用属性padding-top等等。内边距用于控制元素内部内容与边框之间的距离。
边框是围绕内容和内边距的线或边界。边框可以在CSS中使用属性border-width、border-styleh和border-color来设置，它用于装饰和分隔元素的内容。
外边距使元素边框与周围元素之间的空白区域。它可以在CSS中使用属性如margin-top、margin-right、margin-bottom和margin-left来设置。外边距用于控制元素与其他元素之间的距离。
Q2：什么是事件委托？它有什么优势？
A2：事件委托是一种利用事件冒泡机制的编程技巧，它允许将事件处理程序绑定到父元素上，而不是每个子元素上。
优势：减少内存消耗和DOM操作，从而提高性能。通过事件委托，可以在不重新事件处理程序的情况下，动态地添加或删除子元素，同时，新添加的元素也会自动继承之前的事件处理程序。这种设计模式也被称为事件代理，它允许解耦事件处理逻辑，提高代码的可维护性和扩展性。
Q3：什么是闭包？闭包有什么作用？
A3：闭包是一个可以访问其外部词法环境的函数，即使在其外部函数已经执行完毕的情况下，也能保持对外部环境状态的引用。
作用：数据封装；保持状态；控制资源访问；解决变量污染问题；延长变量的声明周期。
Q4：如何实现数组去重？ 请写出代码示例
// reduce
var arr = [1,2,3,4,5,6,4,3,8,1]
function newArrFn (arr) {
let new Arr = []
return arr.reduce((prev, next index, arr) =>{
return newArr.includes(next) ? newArr : newArr.push(next)
}, 0)
}
console.log(newArrFn(arr))// Set
var arr = [1,2,3,4,5,6,4,3,8,1]
function neewArrFn (arr) {
return ([...new Set(arr)])
}
console.log(newArrFn(arr))Q5：介绍一下浏览器的缓存机制
A5：浏览器的缓存机制就是把一个请求过的web资源（例如：htnl页面、图片、js、数据等）拷贝一份副本储存在浏览器中。
缓存会根据进来的请求保存输出内容的副本，当下一个请求到来的时候，如果是相同的URL,缓存会根据缓存机制决定是否直接使用副本响应访问请求，还是向源服务器再次发送请求。
Q6：什么是跨域请求？如何解决跨域问题？
A6：当前发起请求的域与该请求指向的资源所在的域不一样，凡是发送请求的url的协议、域名、端口号三者之间任意一者与当前页面地址不同的请求。这里的域指的是这样一个概念：我们认为若协议 + 域名 + 端口号均相同，那么就是同域。
解决：JSONP；代理； CORS
Q7：如何进行前端性能优化？列举一些常见的性能优化手段
A7:
1. HTML优化：
压缩HTML；删除不必要的注释；删除不必要的属性；使用语义化标签；减少iframe数量；
削减DOM数量和层级数量；减少HTP请求次数；减少重绘重排
2.Javascript优化：
javascript脚本放到页面底部；将javascript和css从外部引入；删除重复的脚本；
减少DOM访问；节流与防抖；合理的ajax请求；长列表虚拟滚动优化；
代码结构的优化；
3. CSS优化：
尽量少用@import；避免!important，可以选择其他选择器；
不要在ID选择器前面进行嵌套其他选择器；CSS文件压缩；CSS层级嵌套最好不要超过3层；
删除无用的css；慎用*通配符；删除不必要的单位和零；异步加载非首屏css;
将样式表放到页面顶部；不使用IE的Filter；检测工具推荐；
4. 图片优化：
根据实际需要选择色深压缩；小图片引入sprites；图片懒加载；缩小favicon.ico并缓存；
img图片的alt属性要写，合理使用target="_blank";采用svg图片或者字体图标；Base64;
5.webpack构建优化：
线程加载器；缓存加载器；Hot update; exclude & include；缩小CSS代码；
缩小Javascript代码；tree-shaking；source-map； BundleAnalyzer； 模块懒加载；
压缩包； base64; 正确配置哈希；
6. 资源加载优化：
使用Web Workers ; DNS预解析；预加载preload
7.浏览器缓存策略：
缓存位置；缓存策略；缓存场景； 用户操作行为与缓存
8.服务器优化：
静态资源使用CDN；添加Expires或者Cache-Control响应头；对组件使用Gzip压缩；
配置ETag；提供来自相同协议的文件；开启http2(多路复用，并行加载)；服务端渲染；
分域存放资源；减少页面重定向
9. 性能测试网站推荐：
WebPage Test；Web Page Analyzer； GTMatrix；Piingdom；36全球网站性能测试
Q8：什么是Webpack?它的作用是什么？配置文件中常见的配置有哪些？
A8：Webpack是一个用于Javascript应用程序的静态模块打包工具。
作用：模块打包、资源打包、代码分割、使用加载器和处理非JavaScript文件、使用插件执行各种任务如代码压缩、生成HTML文件、拷贝静态文件等。能够识别、加载、转换和打包各种类型的模块，包括CommonJS、ES6模块、AMD等。它还可以处理各种其他类型的文件，如CSS、Sass、Less、图片、字体等，并将它们打包到输出目录。
配置文件：1.babelrc文件 2..editorconfig文件 3. .eslintrc.js文件 4..eslintignore文件 5..gitignore文件 6.package.json 7.build/build.js文件 8.build/check-versions.js文件
9.build/dev-client.js文件 10.build/dev-sesrver.js 11.build/util.js
12.build/vue-loader.conf.js文件 13.build/webpack.base.conf.js文件
14.build/webpack.dev.conf.js文件 15.build/webpack.prod.conf.js文件
16.build/webpack.test.conf.js文件 17.config/dev.env.js文件 18.config/index.js文件
19.config/prod.env.js文件 20.config/test.env.js文件
Q9：介绍一下前端项目中的CI/CD（持续集成/持续部署）流程。
A9：
CI流程： 1.选择一个适合前端开发的版本控制系统，例如Git
2.创建一个代码仓库，并将代码推送到仓库中
3.设置一个自动化构建和测试工具，例如Jenkins
4.配置构建和测试工具，以便在每次提交代码时自动触发构建和测试过程
5.开发人员在每次提交代码时，都需要触发构建和测试过程
6.当构建和测试通过后，代码将被合并到主分支中
7.持续监控代码库，以便及时发现和修复错误
CD流程：1.选择一个适合前端开发的版本控制系统，例如git
2.创建一个代码仓库，并将代码推送到仓库中
3.设置一个自动化部署工具，例如Spinnaker
4.配置部署工具，以便在代码通过自动化构建和测试后自动将代码部署到生产环境
5.持续监控生产环境，以便及时发现和修复错误
Q10：什么是模块化开发？常见的模块化规范有哪些？
A10：模块化开发是指一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，否则就都乱套了。根据AMD规范，我们可以使用define定义模块，使用require调用模块。
模块化规范：1.浏览器端模块化规范（AMD，CMD）
2.服务器端模块化规范（
模块分为单文件模块与包；
使用require引入其他模块或者包；
使用exports或者module.exports导出模块成员；
一个文件就是一个模块，都拥有独立的作用域）
3.ES6模块化（
每个js文件都是一个独立的模块；
导入模块成员使用import关键字；
暴露模块成员使用export关键字）
Q11：请实现一个简单的快速排序算法
A11：
//前后指针法
int PartSort3(int* a, int left, int right)
{
int midi = GetMidIndex(a, left, right);
Swap(&a[midi], &a[left]);
//end找小，如果 a[end]<a[keyi],++begin（这时begin位置的值一定比keyi位置值大）,再交换begin和end的位置
int keyi = left;
int begin = left;
int end = left+1;
while (end <=right)
{
if (a[end] < a[keyi] )
{
++begin;
Swap(&a[begin], &a[end]);
}
++end;
}
Swap(&a[begin], &a[keyi]);
return begin;
}
//快排
void QuickSort(int* a, int left,int right)
{
if (left >= right)
{
return ;
}
int keyi = PartSort3(a, left, right);
//[left,keyi-1][keyi][keyi+1,right]
QuickSort(a, left, keyi - 1);
QuickSort(a, keyi + 1, right);
}
Q12：什么是栈和队列？它们有什么区别？
A12：栈和队列是两种基本的数据结构。
栈是一种后进先出的数据结构
队列是一种先进先出的数据结构
区别：1.操作方式不同，栈遵循后进先出的原则，这意味着最后一个进入栈的数据第一个被删除；队列遵循先进先出的原则，这意味着第一个进入队列的数据第一个被删除。
2.应用场景不同。栈在处理递归、表达式求值、内存管理等场合非常实用；队列则在处理任务调度、缓存管理、消息处理等需要按照顺序处理的场合中使用更多。
Q13：介绍一下二叉树及常见的操作。
二叉树：是指树中节点的度不大于2的有序树，它是一种最简单且最重要的树。二叉树的递归定义为：二叉树是一棵空树，或者是一棵由一个根节点和两棵互不相交的，分别称作根的左子树和右子树组成的非空树；左子树和右子树又同样都是二叉树。
常见操作：顺序存储；链式存储
