web前端面试题

面试题整理

1.css3新特性*

flex 媒体查询 怪异盒子 transition transform animation box-shadow
新增选择器nth-of-type last-of-type first-of-type nth-child nth-last-child

2.html5新增特性

语义化标签 nav header main section footer
Input新增属性 search email url time
本地存储
Canvas
Audio video 新增source标签为了兼容浏览器
Websocket

3.对象基本类型与引用类型

基本类型：string number Boolean null undefined
引用类型: object array Date Function

4.Css盒模型

正常：content+padding+border+margin
怪异：content+margin

5.Vue2.0与3.0的区别

双向绑定机制：
Vue2.0 监听双向绑定使用Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新, 但是无法检测到对象或数组对象内部的变化
Vue3.0 监听双向绑定使用es6的proxy, 可以监测到数组或对象内部的变化，但是兼容性不好

3.0 新加入了 TypeScript 以及 PWA 的支持

默认进行懒观察（lazy observation）:
在 2.x 版本里，不过数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效

更精准的变更通知:
比例来说：2.x 版本中，你使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。

部分命令也发生了变化：
1.下载安装npm install -g vue@cli
2.删除了vue list
3.创建项目vue create
4.启动项目npm run serve

默认项目目录页发生了变化：
1.移除了配置文件目录，config 和 build 文件夹
2.移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
3.在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件

6. 使用vue的好处

vue两大特点：响应式编程、组件化
vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快

7. MVVM定义

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信

8. vue生命周期

beforeCreate created 
beforeMount mounted
beforeUpdate updated
beforeDestory destroyed

9. vue响应原理

当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

10. 为什么vue中的data必须是一个函数

对象为引用类型，当重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题。

11. vue中做数据渲染的时候如何保证将数据原样输出？

v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
 v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
 	{{}}：插值表达式，可以直接获取Vue实例中定义的数据或函数，使用插值表达式的时候，值可能闪烁；而使用v-html、v-text不会闪烁，有值就显示，没值就隐藏

12. active-class属于哪个组件的属性？

Vue-router模块的router-link组件

13.vue-router有哪几种钩子？

全局钩子：router.beforeEach(to, form, next) 跳转进行拦截
组件内的钩子
单独路由独享组件

14.$route和$router的区别？

$route是“路由信息对象”包括params query path name hash
$router 是 “路由实例对象”包括路由跳转方法，钩子函数

15.vue常用指令？

v-for v-bind v-if v-else v-show v-on 

16.vue 常用修饰符?

.prevent 提交时间不重新加载页面
.stop 阻止时间冒泡
.self 防止事件穿透
.capture 事件监听

17.vue-loader 是什么？使用它的用途是什么？

解析.vue的一个加载器，template/js/style转换成js模块
用途：js可以写es6、style样式可以scss或less、template可以加jade等

18.computed,watch,methods的区别

Computed计算属性是用来声明式的描述了一个值依赖了其他的值，当你把模板里的数据绑定在计算属性上时，vue会在其任何的依赖值导致计算属性改变时更新DOM
Watch监听的是你定义的变量，当你定义的变量的值发生改变时，调用对应的方法。
Methods方法，函数绑定事件调用

19.什么是js冒泡？vue如何组织冒泡？

概念：当一个父元素内的多级子元素绑定了同一个事件，js会依次从内往外的执行每个元素的事件，从而引发冒泡
Js:event.stopPropagation()
Vue:.stop修饰符

20.vue组件通信

父子组件通信:
父向子通过props传递
子向父通过$emit发送 $on接收
非父子组件通信：
eventBus，就是创建一个事件中心，相当于中转站，可以用它传递和接收事件，也可使用vuex

21.vue keep-alive 作用是什么？

Keep-alive包裹动态渲染的组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

22.$nextTick是什么？

vue实现响应式并不是数据发生变化后dom立即变化，而是按照一定的策略来进行dom更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

23.vue子组件调用父组件的方法？

在子组件内直接调用this.$parent.event,或者使用$emit与$on 来调用

24.promise对象是什么？

1.Promise是异步编程的一种解决方案，它是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。promise对象是一个构造函数，用来生成Promise实例；
2.promise的两个特点 对象状态不受外界影响 && 一旦状态改变，就不会再变，任何时候都可以得到结果（pending状态–>fulfilled || pending–>rejected）

25.axios的特点有哪些？

1、axios是一个基于promise的HTTP库，支持promise的所有API；
2、它可以拦截请求和响应；
3、它可以转换请求数据和响应数据，并对响应回来的内容自动转换为json类型的数据；
4、它安全性更高，客户端支持防御XSRF；

26.vue中的ref是什么？

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

27.vue如何兼容ie？

Babel-polyfill插件

28.vue、angular、react的区别

1.与AngularJS的区别
相同点：
都支持指令：内置指令和自定义指令；都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定；都不支持低端浏览器。
不同点：
AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观；在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。
2.与React的区别
相同点：
React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载；在组件开发中都支持mixins的特性。
不同点：
React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。

29.为什么要前后端分离，优点与缺点是什么？

优点：前端专门负责前端页面和特效的编写，后端专门负责后端业务逻辑的处理，前端追求的是页面美观、页面流畅、页面兼容等。后端追求的是三高（高并发、高可用、高性能）让他们各自负责各自的领域，让专业的人负责处理专业的事情，提高开发效率
缺点：1 、当接口发生改变的时候，前后端都需要改变
2、 当发生异常的时候，前后端需要联调–联调是非常浪费时间的

30. js著名的斐波那契数列 1 1 2 3 5 8，输出第n项

function  countNum(n){
            var first = 1,
                second = 1,
                third;
            if(n>2){
                for(var i = 0; i < n-2; i++){
                    third = first + second;
                    first = second;
                    second = third;
                }
                return third;
            }else{
                return 1;
            }
        }

31.原生javaScript写数组去重

var arr = [1,2,3,4,4,2,2,6,9,1,0];
var newArr = [];
var onOff = true;
for(var i = 0;i<arr.length;i++){
    onOff = true;
    for(var j = 0;j<newArr.length;j++){
        if(newArr[j]==arr[i]){
            onOff = false;
        }
    }
    if(onOff){
        newArr.push(arr[i]);
    }
}
console.log(newArr)

//方法二
var arr = [1,2,3,4,4,2,2,6,9,1,0];
var obj = {};
arr.forEach((e,i)=>{ //把arr的信息统计到obj里面
    if(obj[e]===undefined){ //其实是利用对象属性是否存在做了一层遍历
        obj[e] = 1
    }else{
        obj[e]++
    }
});
console.log(Object.keys(obj))

32. 写一个函数，统计字符串里出现出现频率最多的字符

var str = 'abcdefffdddddd';
var obj={};
for(var i=0;i<str.length;i++){
    var t = str[i];
    if(obj[t]){
        obj[t]++;
    }else{
        obj[t] = 1;
    }
}
console.log(obj);
var max=0,tKey;
for(key in obj){
    if(obj[key] > max){
        max = obj[key];
        tKey = key;
    }
}
console.log(tKey)

33.冒泡排序

function bubbleSort(arr) {
    var len = arr.length;
    for (var i = 0; i < len; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j+1]) {        //相邻元素两两对比
                var temp = arr[j+1];        //元素交换
                arr[j+1] = arr[j];
                arr[j] = temp;
            }
        }
    }
    return arr;
}
var arr=[3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
console.log(bubbleSort(arr));//[2, 3, 4, 5, 15, 19, 26, 27, 36, 38, 44, 46, 47, 48, 50]

34.前端优化

1减少http请求与请求数据的大小
2 做缓存
3 内置脚本的放置位置
4 图片使用图片小精灵
5 css放置head标签
6 不要打包引入库的所有文件采用按需引入
7 图片懒加载，预加载
8 减少DOM操作

35. 什么是webpack和grunt和gulp有什么不同

Webpack是一个模块打包器，他可以递归的打包项目中的所有模块，最终生成几个打包后的文件。他和其他的工具最大的不同在于他支持code-splitting、模块化(AMD，ESM，CommonJs)、全局分析。

36. 什么是bundle,什么是chunk，什么是module?

bundle是由webpack打包出来的文件，chunk是指webpack在进行模块的依赖分析的时候，代码分割出来的代码块。module是开发中的单个模块。

37. 什么是Loader?什么是Plugin?

Loaders是用来告诉webpack如何转化处理某一类型的文件，并且引入到打包出的文件中
Plugin是用来自定义webpack打包过程的方式，一个插件是含有apply方法的一个对象，通过这个方法可以参与到整个webpack打包的各个流程(生命周期)。

38. webpack-dev-server和http服务器如nginx有什么区别?

webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，他比传统的http服务对开发更加简单高效。

39. 什么 是模块热更新？

模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。

40. 什么是长缓存？在webpack中如何做到长缓存优化？

浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或是更新，都需要浏览器去下载新的代码，最方便和简单的更新方式就是引入新的文件名称。在webpack中可以在output纵输出的文件指定chunkhash,并且分离经常更新的代码和框架代码。通过NameModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不变。

41. 什么是Tree-shaking?CSS可以Tree-shaking吗?

Tree-shaking是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。在webpack中Tree-shaking是通过uglifySPlugin来Tree-shaking
JS。Css需要使用Purify-CSS。

42.webpack构建流程

1. 初始化参数，从配置文件和shell语句中读到的参数合并，得到最后的参数
2. 开始编译：用合并得到的参数初始化complier对象，加载是所有配置的插件，执行run方法开始编译
3. 确定入口，通过entry找到入口文件
4. 编译模块，从入口文件出发，调用所有配置的loader对模块进行解析翻译，在找到该模块依赖的模块进行处理
5. 完成模块编译，得到每个模块被翻译之后的最终的内容和依赖关系
6. 输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，在把每个chunk转换成一个单独的文件加载到输出列表
7. 输出完成，确定输出的路径和文件名，把内容写到文件系统中
在以上过程中，webpack会在特定的时间点广播出特定的事件，插件在舰艇感兴趣的事件后会执行特定的逻辑，改变webpack的运行结果

43. 如何利用webpack来优化前端性能

1. 压缩代码。uglifyJsPlugin 压缩js代码， mini-css-extract-plugin 压缩css代码
2. 利用CDN加速，将引用的静态资源修改为CDN上对应的路径，可以利用webpack对于output参数和loader的publicpath参数来修改资源路径
3. 删除死代码（tree shaking），css需要使用Purify-CSS
4. 提取公共代码。webpack4移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替

44. DefinePlugin

允许创建一个在编译时可以配置的全局变量

45. DllPlugin

使用DllPlugin可以减少基础模块编译次数，动态链接库插件，其原理是吧网页依赖的基础模块抽离出来打包到dll文件中，当需要导入的模块存在于某个dll中时，这个模块不再被打包，而是去dll中获取。在dll中大多包含的时常用的第三方模块，只要这些模块版本不升级，就只需要被编译一次。
注意
DllPlugin参数中的name必须要和output.library值保持一致，并且生成的mainfest文件中会引用output.library值

46. happyPack开启多线程loader转换

运行在node.js之上的webpack时单线程模型，也就是只能一个一个文件进行处理，不能并行处理，happypack可以将任务分解给多个子进程，最后将结果发给主进程，js是单线程模型，只能通过这种多线程的方式提高性能

47.优化首屏加载速度

https://www.cnblogs.com/myfirstboke/p/11321191.html
https://blog.csdn.net/qq_31965515/article/details/89553361

48.webpack打包体积优化

https://www.jianshu.com/p/14524825d890

49.移动端1px解决方案

伪类after before + transform：scale
Box-shadow

50.css面试题

https://www.cnblogs.com/zhangshuda/p/8465043.html

51.js面试题

https://www.jianshu.com/p/f1f39d5b2a2e

52.html面试题

https://blog.csdn.net/xingyu_qie/article/details/84653456

53.js深拷贝与浅拷贝

https://blog.csdn.net/qq_41635167/article/details/82943223

54.vue中的render函数

简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM
　　因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。
　　当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h

55.手写一个bind方法

https://www.jianshu.com/p/a616a3c2e0b5

56.优化项目做缓存

https://blog.csdn.net/yzj5208/article/details/82080868

57.http握手与挥手

https://www.cnblogs.com/qdhxhz/p/8470997.html

58.mvvm与mvc区别

https://m.php.cn/faq/417740.html

59.webpack的loader和plugin的区别

https://www.cnblogs.com/tangjiao/p/10429645.html

60.js的堆和栈

https://www.cnblogs.com/heioray/p/9487093.html

61.观察者与发布订阅的区别

https://www.jianshu.com/p/594f018b68e7
https://www.cnblogs.com/pi-xia/articles/9351432.html