前端面试题八股文汇总（最新）

前言：小伙伴们，本篇文章是博主自己在面试过程中的一些面试题的记录，自己在总结回顾记录的同时希望也能帮助到你们，可以结合对应的知识点去理解和查看！有什么不对的地方欢迎伙伴们指正！大家一起学习！一共有五大回合，如果在后续面试过程中还会持续更新！
小提示重要！：简历上的内容（项目+技能）自己一定要准备好，防止被问起。
开始学习！

一 、第一回合

1.开发中遇到的困难？

• 问题：才开始做项目的时候，以为插件使用简单，vue项目中轮播图的使用，swiper插件的使用，查看官方的文档是一定要有节点DOM（相应的结构）渲染出来才会有对应的动态效果。
  vue中mounted生命周期函数–>组件挂载完毕就会调用，HTML已经被渲染到了页面上，这个阶段可以执行dom操作，可以进行数据请求，但是还是v-for在遍历来自于Vuex（数据:通过ajax向服务器发请求，存在异步）并且v-for的遍历也是需要时间的遍历数据渲染结构的（没法保证v-for的遍历完成），
• 解决：思考了一下vue生命周期函数以及vue中的封装好的函数方法。nextTick函数：在下次DOM更新, 循环结束之后,执行延迟回调。在 修改数据之后 立即使用这个方法，获取更新后的DOM
• 收获：组件实例的$nextTick+watch方法，在今后经常使用，经常结合第三方插件使用，获取更新后的DOM节点

2. Css的盒子模型

• 标准盒模型（W3C）：box-sizeing：content-box（默认值）
  标准盒模型总宽度/高度：margin+border+padding+内容区宽度/高度（ 即 width/height 不包含 padding 和 border 值 ））
• 怪异盒模型（IE盒模型)：box-sizing:border-box
  标准盒模型总宽度/高度：margin+ (内容区宽度/高度 + padding + border) （ 即 width/height 包含 padding 和 border 值 ））

3. Pull和fetch的区别

• git pull将远程的仓库的变化下载下来，与和本地的分支做合并
• git fetch将远程的仓库的变化下载下来，并没有和本地的分支做合并

git在项目中常用命令流程
1.配置author信息
git config --global user.name “你的名字”
git config --global user.email “你的邮箱”
2.git clone 远程仓库链接
3.git stash “信息"本地保存自己的创建的代码
4.git pull 拉取远程的仓库的代码和本地分支做合并
5.解决冲突
6.git add 仓库(目录)中的所有文件添加进git管理
7.git commit 提交到本地仓库
8.git push 提交到远程仓库

4. SPA单页面项目

• 概念：SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS实现页面的渲染加载。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互、避免页面的重新加载。

• 优点：

  • 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
  • 基于上面一点，SPA 相对服务器压力小；
  • 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

• 缺点：

  • 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载
  • 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
  • SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

• 劣势解决：

  • SPA单页面应用实现前进与后退功能

前言：SPA单页面应用：在使用ajax与服务器数据交互过程中，实现局部数据的更新时，浏览器地址栏的url链接并没有发生改变，浏览器因为不会保存更新记录（浏览器会记录地址栏的url资源链接，如果url链接发生变化，浏览器会把该url链接保存到一个特殊的数据结构中，这样当用户点击返回与前进按钮时，会快速访问已经被记录的url链接资源。）。这时候再去返回就会出现非期待性的结果

- 解决方案：设置window.location.hash（location.hash）+ 监听window.onhashchange

//在ajax与服务器进行交互时，设置window.location.hash的值：
function updateView (attr){
   
            $.ajax({
   
            	type:...,
                url:...,
                data:{
   attr : attr},
                success:function(datas){
   
                	//设置hash值
                	 window.location.hash = "#"+attr;
                	//do somthing
                },
                error:function(status){
   
					//do somthing
                }
            });
        }
        //attr 这个值最好是该次请求所需的参数 设置onhashchange事件监听 
     window.onhashchange=function(){
   
 	var attr=window.location.hash.replace("#","");
 	updateView (attr);
    	 }    
    	 //但是上述这样单纯的只要用户点击第一页的视图，ajax请求成功后，会主动改变hash值，这时候又触发onhashchange，又一次更新视图，两次访问服务器。
    	 //解决办法
    	 //设置一个全局变量，记录hash值的改变是怎样引起的：
    	  var innerDocClick;
        $('body').on('mouseleave',function(){
   
        	innerDocClick=false;//鼠标在页面外（点击了返回按钮）
        });
        $('body').on('mouseover',function(){
   
        	innerDocClick=true;//鼠标在页面内（没有点击返回按钮）
        });
       

        window.onhashchange=function(){
   
        	if(!innerDocClick)//若点击了返回按钮  加条件判断去更改hash值
        		{
   
        			var attr=window.location.hash.replace("#","");
 					updateView (attr);
        		}
    	 }

第二种解决方法是在页面中嵌入一个隐藏 iframe，由于浏览器可以对 DOM 树中 iframe 节点的 src 属性进行历史记录跟踪，这样通过在逻辑上建立一条“页面 URL – 页面内 iframe URL – 页面状态”的对应链，同样可以在 IE 中建立片段标识符与页面状态的联系。

5.SEO优化

• 概念：seo是搜索引擎优化。是一种利用搜索引擎的规律提高网站在有关搜索引擎的排名,是一种网络营销方式。

搜索引擎的规律：是靠搜索关键字来让自己的网站在搜索栏的第一页内，展示在用户的最前面，能让用户第一时间看到自己的网站。

• 1.站内优化：
  • META标签的优化：例如：title,keywords,description等的优化；（logo图片）
  • 网站文章的更新：每天保持站内文章的更新；
• 2.站外优化：
  • 友链互换：与一些和你网站相关性比较高，整体质量比较好的网站交换链接，巩固稳定关键词排名。

补充
高质量网站有哪些特点
1.内容受众
2.时效性强
3.设计与布局整洁干净
4.无虚假违法信息

6.BOM浏览器对象模型

• 1.window对象

  • 概念：BOM的核心对象是window，它表示浏览器的一个实例，它也是ECMAScript规定的Globle对象，也就是说网页中任何一个对象都是在window这个对象里面的

常用的方法：
1.alert()
2.定时器

• 2.location对象

  • 概念： location属性用于获得当前窗口中加载的文档有关的信息或者设置窗体的URL，并且可以解析URL，因为返回的是一个对象，因此可以叫做location对象，还有一些导航功能，值得注意的是location既是window对象的属性，又是document对象的属性，既window.location和document.location 引用的是同一个对象。
  • URL: Uniform Resource Locator 统一资源定位符 :是互联网上标准的地址。互联网上的每个文件都有唯一的URL，包含 通过地址属性可以得到不同的url的信息图片location对象的属性

常用的方法：
location.href = “http://www.666.com”; //页面跳转到该网址
location.assign(“http://www.666.com”); //页面跳转到该网址
location.hash用于设置页面的标签值

• 3.navigator对象：
  • 概念：该对象里面保存着浏览器的各种信息，判断浏览器的各种信息就是从该对象里的属性来读取，具体属性如下图：

常用的方法：
navigator.cookicEnablcd:判断是否启用cookic
navigator.userAgent:判断浏览器的名称和版本号
navigator.plugins:保存浏览器中所有插件信息的集合

    <script>
        function hasPlugin(name) {
   
            name = name ? name.toLocaleLowerCase() : '';
            console.log('name = ' + name);
            var plugins = navigator.plugins;
            for (var i = 0; i < plugins.length; i++) {
   
                //console.log(typeof plugins[i]);
                console.log(plugins[i].name);
                return plugins[i].name.toLocaleLowerCase().indexOf(name) !== -1 ? true : false;
            }
        }
        var r = hasPlugin('pdf');
        console.log(r);

• 4.history对象：
  • 概念：该对象保存着用户上网的历史记录，从窗口被打开的那一刻算起

常用方法：
1.前进：history.forward();history.go(1);
2.后退：history.back();history.go(-1);
3.获取记录个数：history.length:

7.数组、对象、字符串中的一些方法

8.解构赋值

• 概念：变量的解构赋值，ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。这种方式的出现大大提高了代码的扩展性
• 常见的使用场景
  • 1.交换变量的值

let x = 1;
let y = 2;
[x, y] = [y, x];

- 2.从函数返回多个值

//返回一个数组，用结构赋值可以非常方便的取到对应值
function example() {
   
  return [1, 2, 3];
}
let [a, b, c] = example();

//返回一个对象，获取对应的属性值
function example() {
   
  return {
   
    foo: 1,
    bar: 2
  };
}
let {
    foo, bar } = example();

- 3.取 JSON 数据

解构赋值对提取 JSON 对象中的数据

let jsonData = {
   
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let {
    id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]
// 上面代码可以快速提取 JSON 数据的值。

• 对象的解构赋值
• 数组的解构赋值
  • 1.同时赋值多个变量

let arr = [a,b,c,d] = [1,2,3,4]

• 2.解构嵌套数组

//解构嵌套数组，就是模式匹配，只要等号两边的层级结构相同，就可以拿到对应位置的值
const arr = [1, [2, 3, [4, 5, 6]]];
const [a, [b, c, [d, e, f]]] = arr;

• 3 相同“模式”的不完全解构

let [a, b, c] = [1, 2, 3, 4]; // 1 2 3
let [a, b, c, d] = [1, 2, 3]; // 1 2 3 undefined
let [a, [b, c, [d, e]]] = [1, [2, 3, [4, 5, 6]]]; // 1 2 3 4 5

• 4.解构的默认值

let [a = true] = [];
a // true

注意
数组的解构是根据它的位置（模式）对应的
解构操作允许有默认值，但一定是已经声明的。
如果等号的右边不是数组（或者严格地说，不是可遍历的结构）那么将会报错

9…args剩余参数(扩展运算符)

展开运算：允许一个表达式在某处展开。展开运算符在多个参数（用于函数调用）或多个元素（用于数组字面量）或者多个变量（用于解构赋值）的地方可以使用。

• 1.函数调用中使用展开运算符（传参）

在ES6之前将