前端基础（之三）

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：介绍一下二叉树及常见的操作。