1、js的数据类型

2、值类型与引用类型的区别

3、什么是闭包，闭包的应用场景，闭包的缺点

4、什么是原型，什么是原型链

5、JS如何实现继承

6、Call，apply，bind的区别

7、new关键字做了什么？

8、深拷贝

9、浅拷贝

深拷贝和浅拷贝的区别

10. js检测对象类型

11. 事件流

12. 事件代理

13. 数组去重

14. 异步和同步

15. 手写ajax

15.1、Promise

你在哪些地方用到promise

16. get与post区别

17. 什么是RESTful

18. 如何实现跨越

19. jsonp原理

20.书写jsonp

20. 什么是MVVM（前后端分离）

20 .什么是MVC（前后不分离代码）

21. Vue2 响应式原理，（双向绑定的原理）

22.Vue3响应式原理

23. v-if与v-show的区别

24. computed与watch区别

25 .生命周期

26.导航守卫

27 . $router,和$route区别

28 . 路由传参，子路由

29. 你封装过哪些组件（哪些插件）？

30. vuex 哪些组件

31. 什么是vuex

32. vuex和全局变量区别

33. vuex mutations和action区别

34. 哪些数据你都存储在vuex

35 axios封装哪些常用功能

36. 组件传参

37 nextTick作用（全局方法）

38. vue2 有没有遇到数据更新视图不更新？

39. 在vue-for循环中为什么时候key

40. 什么是虚拟dom，优点

41 箭头函数与普通函数的区别？

42. this指向问题

43. 变量提升

43. let 与var的区别

44 小程序

45：获取浏览器宽高

46:clientWidth offsetWidth, scrollWidth区别

47 scrolleft offsetLeft

47事件event.pageX ，event.pageY,clientX,clienX

48 手机端事件

49 获取元素的边界

50 JQuery相关

51.html5标签有哪些

52. 行内标签，块标签，行内块

53.行内与块区别

54. 如何写个三角形

55. css哪些属性可以继承

56. css如何垂直居中

57. css权重

58. 0.5px线手机端

59 BFC

60 px pt rem em rpx

61 清除浮动

解决的是父组件高度坍塌的问题

62 定位区别

63 webpack 中的插件plugin与加载器loader的区别

64 webpack有哪些优化方式

64 webpack 切换环境，区分环境，跨平台传递参数

编辑65不用vue脚手架自己能搭建项目吗

66 webpack核心概念

7 + 前端面试

get 与post 请求

闭包

如何解决异步

如何实现继承

事件流

如何事件先冒泡后捕获

事件委托，代理

图片懒加载与预加载

mouseover与mouserenter区别

js的new操作符做了哪些事情

1. 说一下 http 和 https

2. tcp 三次握手，一句话概括

3. ? TCP 和 UDP 的区别

4. webscoket

5. HTTP 请求的方式，HEAD 方式与OPTIONS

6. 一个图片 url 访问后直接下载怎样实现？

7. web Quality（无障碍）

8. 什么是 Bom? Bom 是浏览器对象。有哪些常用的 Bom 属性呢？

10. 说一下 http2.0

iframe 是什么？有什么缺点？

Doctype 作用?严格模式与混杂模式如何区分？它们有何意义?

一句话概括 RESTFUL

什么是ajax？

什么是浏览器同源策略？

什么是跨域，跨域的常见方式有哪些？

jsonp的原理是？

Vue中路由相关的组件是？

$router 有哪些方法（5个）

2. 写一个produce带参数路由配置

3. 导航组件内部守卫

4. sessionStore有哪些方法（3个）localStorage也具有这些方法

5. 使用axios的get请求请求/list.php 请求参数是 {name:"mumu",age:18}

7. 什么是浏览器的同源策略？

8. 跨域的方式有哪些？

9. jsonp的原理有哪些？(script)

10. 如何全局挂载axios

仅供参考

1、js的数据类型

（1）基础数据类型、值类型

数据类型	typeof值	举例
String字符串	string	“abc”
Number数组	number	123，-12.5
Boolean布尔	boolean	true,false
undefined未定义	undefined	undefined
Symbol符号	symbol	symbol
null 空	object	null

（2）复杂数据类型，引用数据类型

数据类型	typeof	举例
Array数组	object
Object对象	object	{}
function函数class类	function	function(){}
Map图	object	new Map([[]])
Set集合	object	new Set([])
weakMap， weakSet	object
Date,Math,	object

2、值类型与引用类型的区别

值类型 key和value都存储在栈中。

引用类型栈中存内存地址，真正值存储在堆中。

// 值类型
var a = 15；
var b = a；
b = 20；
// b与相互不影响

// 引用类型
var a = {age:15}
var b = a; // 把a的内存地址赋给b，a与b的值都指向同一堆中的内存地址
b.age= 18;
// 这个时候a.age 的值也是18

一个引用类型堆中的值可以被多个变量引用，修改其中一个会影响到其它。

3、什么是闭包，闭包的应用场景，闭包的缺点

闭包就是函数嵌套函数，函数作为参数被传入，作为返回值被返回。

闭包作用：

形成局部作用域，

在函数外部可以访问函数内部的局部变量

闭包的缺点：

被闭包引用的变量不会被js垃圾回收机制销毁，会常驻内存，使用不当容易造成内存崩溃

4、什么是原型，什么是原型链

每个构造函数（class）都有一个显示的原型prototype

每个实例实例对象都有个隐私原型__proto__

实例的隐式原型__proto__等于其构造函数的显示原型protype

当查找一个对象的属性或方法时先在实例上查找，找不这沿着__proto__向上逐级查找

我们把__proto__的__proto__形成的链条关系成为原型链

作用：1 原型链实现了js继承，2.原型可以给构造函数创建的实例添加公用方法

5、JS如何实现继承

class使用extends关键字实现继承
通过原型链实现继承

function B（）{A.call(this) //实现构造函继承
}
B.protoytpe = Object.create(A.prototype) //实现原型继承
B.prototype.constructor= B //修正构造函数

6、Call，apply，bind的区别

在JavaScript中，call、apply和bind是Function对象自带的三个方法，这三个方法的主要作用是改变函数中的this指向

相同点：

都是用来改变函数的this对象的指向的；

第一个参数都是this要指向的对象，也就是想指定的上下文

apply 、 call 、bind 三者都可以利用后续参数传参

不同点：

指向的区别：三者的第一个参数都是this的指向，但是在使用时，call和apply只是临时改变一次this的属性，并立即执行；而bind方法在使用时会返回一个绑定this指向（永久改变）的新函数，调用时才会执行。

传参的区别：call方法接受的是一个参数列表，apply方法接受到是一个包含多个参数的数组或类数组。bind方法接受的也是一个参数列表，但可以多次传参。而call和apply都是一次性传入参数。

apply参数用的是数组形式

bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。

7、new关键字做了什么？

1、创建一个空对象，开辟内存空间，并且 this 变量引用该对象，同时还继承了该函数的原型。

2、属性和方法被加入到 this 引用的对象中。

call执行构造函数并传入空对象作为this

3、指定空对象的构造函数

function A(){}
var  obj = {};
a.call(obj);
obj.prototype.constructor = A

8、深拷贝

深拷贝是指，拷贝对象的具体内容，深拷贝在计算机中开辟一块新的内存地址用于存放复制的对象。源数据改变不会影响复制的数据

转字符串

var obj2 = JSON.parse(JSON.stringify(obj1))

递归

function deeCopy(obj){if(typeof obj==="object"&&obj!==null){var result；if(obj.instanceof Array){result = [];for(var i=0;i<obj.length;i++){result[i] = deepCopy(obj[i])}}else{result = {};for(var k in obj){result[k] = deepCopy(obj[k])}}return result;}else {return obj;}
}

9、浅拷贝

浅拷贝只复制一层对象的属性，并不会进行递归复制，而在浅拷贝之后，源对象与目标对象的引用已经不是同一块内存空间。

Object.assign(A,B)
for in遍历拷贝
{...A}对象扩展

深拷贝和浅拷贝的区别

浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址，

深拷贝（deepCopy）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存，

使用深拷贝的情况下，释放内存的时候不会因为出现浅拷贝时释放同一个内存的错误。

浅复制：仅仅是指向被复制的内存地址，如果原地址发生改变，那么浅复制出来的对象也会相应的改变。

深复制：在计算机中开辟一块新的内存地址用于存放复制的对象。

10. js检测对象类型

typeof ：引用类型除function都返回 object

instance ：是某个函数的实例，在原型链有该构造函返回ture

最准确：Object.prototype.toString.call(obj).slice(8,-1)

constructor, Array.isArray()

11. 事件流

冒泡流：事件由最具体的元素响应然后组件冒泡到最不具体的元素（html）

捕获流：从最不具体的元素捕获事件

开启捕获 addEventListenter第三个参数 true

阻止事件冒泡：e.stopPropagation()

12. 事件代理

$(父元素).on(事件名，子选择器，响应函数)

把事件注册到多个元素共有的父元素上，通过事件的冒泡机制响应事件

作用：动态添加的元素也可以响应事件

13. 数组去重

set去重

var arr2 = [...new Set(arr1)]

filter过滤

var arr2 = arr1.filter((item,index)=>arr1.indexOf(item)===inmmdex)

14. 异步和同步

同步是按顺序执行，单线程，会阻塞代码

异步多线程执行，非阻塞式执行代码

异步方法：回调函数，Promise，订阅发布模式，事件响应，aync和awiat

15. 手写ajax

ajax核心是通过XMLHttpRequest（xhr）与服务器异步交换数据，实现前端刷新更新视图

var  xhr = new XMLHttpRequest();
// 创建一个xhr对象
xhr.open("get","url地址")
//打开连接get方式
xhr.send(data)
// 发送数据到服务器
xhr.onreadystatechange = function(){
// 监听xhr的变化if(xhr.reaystate===4){ //状态4成功if(xhr.status===200){ //响应码200// xhr.responseText 获取的数据}}
}

15.1、Promise

Promise 实现异步操作，解决回调函数层级过多形成的回调地狱问题

Promise resolve与reject状态发送改变不能更改

var  p = new Promise((resolve,reject)=>{var num = Math.random();if(num>0.5){setTimeout(()=>resolve(num),2000)}else{reject(num)}
})p.then(res=>{
// 成功 得到resolve的值
})
.catch(err=>{
// 拒绝 得到reject的信息
})

Promise.reject()

Promise.all() 多个promise多完成才返回结果

Promise.race() 多个promise执行返回最快的一个

你在哪些地方用到promise

定义api请求接口
自定义jsonp用到
弹框插件等待用户确定则resolve
封装actions 用sync装饰 await实现异步

（等待，网络，等待用户确定的）（异步操作都会用到promise）

16. get与post区别

get 获取数据

post 新增，修改，删除

put 修改

delete 删除

get 有缓存的，可以收藏书签，方向，数据量2k

post 没有缓存，理论上没有大小限制

get

get形式请求数据，参数会以明文的形式拼接在url地址的后面

请求的长度受到url地址格式的限制

get请求可以被缓存，请求数据的效率上比post高

get请求可被收藏为书签

get方式安全性相对来说比较低

post

post形式请求数据，参数会打包到请求对象中进行传递，不会显示在url地址中

一般来说请求长度不受限制

post请求不能被缓存

post请求不可被收藏为书签

安全性相对get来说较高，所以请求的数据涉及到安全性的情况下，使用Post方式

17. 什么是RESTful

RESTful是接口的设计风格

每一个URI地址都是一个资源

使用get获取，post新增，put修改，delete方法删除

18. 如何实现跨越

jsonp

后端响应头允许

代理

无论哪种跨越都需要后端支持

19. jsonp原理

利用了script标签src没有同源限制。

后端返回的是方法名+（）+数据格式 fun（data）

前端提前与定义这个方法就能获取数据

20.书写jsonp

function jsonp(url,data){return new Promise((resolve,reject)=>{var  funName = “callback”+Date.now()+Math.random();var  script = document.createElement("script");src = url+"callback="+funName;document.body.appendChild(script);script.src = src;window[funName]=function(data){resolve(data);document.body.removeChild(script)}script.onerror = function(err){reject(err)}})}

20. 什么是MVVM（前后端分离）

M：model 模式存储数据

V：view 显示内容（html）

VM viewModel视图模块连接视图与model模型（）

当model数据发生变化时候通过VM可以监听变化更新视图

当view视图发变化时候通过VM可以监听变化自动更新model数据

20 .什么是MVC（前后不分离代码）

M 模型

v 视图

c 控制器

后端软件的设计思维：把视图V和模型M通过C控制实现分类

mvc（有利于SEO）

前端写好视图交给后端后端经过编程生成 html 发送给浏览器（客户端）

mvvm（有利于开发）)

后端写好接口，前端请求接口数据+定义视图，在浏览器（客户端）渲染html

21. Vue2 响应式原理，（双向绑定的原理）

通过Object.defineProperty劫持对象的getter与setter

通过订阅与发布者模式结合

er观察者来连接视图与数据

当数据发生变化时候通知说要订阅该数据的订阅者更新

22.Vue3响应式原理

ES6新增的 proxy代理实现的

vue3 与Vue2的区别

响应式原理不同：Object.defineProperty和Proxy

启动方式不同：
//vue2
new Vue({store,router,render:h=>h(App)
}).$mount("#app")
// vue3
createApp(App).use(store).use(router).mount("#app")
3.全局挂载方法
// vue2
Vue.prototype.$http = axios;
// vue3
app.config.globalProperties.$http = axios;
4.Vue3 增加了setup 组合式api

23. v-if与v-show的区别

都可以隐藏节点

v-show通过css方式隐藏

v-if 直接移除dom节点

频繁切换显示与隐藏用v-show反之用v-if

24. computed与watch区别

computed有缓存，watch没有

computed从现有数据计算出新的数据，watch是监听数据变化执行handler回调函数

computed 多对一，watch一对多

25 .生命周期

option选项api ：创建前后，挂载前后，更新前后，销毁前后

setup中：没有创建前后

-------------------------------------------------------------------------------------

created 有this，发起ajax请求，监听事件，定时器

setup 没有this ，发起ajax请求，监听事件，定时器

------------------------------------------------------------------------------------

mounted 可以操做dom

---------------------------------------------------------------------------------------

beforeDestroyed ||onUnmount 移除定时器，移除事件监听

26.导航守卫

组件内部，路由独享，全局守卫

实现权限管理：

在路由配置定义meta权限

通过全局beforeEach实现路由守卫

beforeEach3个参数 to要去的页面，from从哪个页面来，next下一操作

27 . $router,和$route区别

$route是当前页面路由信息，params，query，path,fullpath

$router是整个路由实例通常带方法push，replace， back， forward ，go

28 . 路由传参，子路由

params传参 query查询传参 hash传参 meta传参

子路由：在路由配置添加children

动态添加路由，router有个AddRoutes方法

29. 你封装过哪些组件（哪些插件）？

日期格式，防抖节流，瀑布流，弹框，提示，翻译。

设计好组件的data（尽量不使用data）

定义好props（多使用）

设计好方法

设计插槽和查找作用域

注意组件的传参

哪些工具

解析时间，格式时间，获取查询参数

清空数组，url转换（qs）html转文本

对象合并，常见dom操作，防抖，节流

深拷贝

30. vuex 哪些组件

存储数据的state

修改数据唯一方式 mutations

异步操作的Actions

模块：module

映射方法：getters

31. 什么是vuex

vuex是vue的全局状态管理器，当state更新，引用state组件的视图会响应式更新。

本质上就是一个没有template的vue文件

通过vuex可以更好集中管理数据，多个组件共享数据

32. vuex和全局变量区别

都可以实现多个组件全局共享数据

vuex的数据是响应式，会自动更新视图

vuex的修改必须是mutations，更加利于调试

vuex还支持异步操作，方便vuex插件便于调试

33. vuex mutations和action区别

mutations用来改变数据（唯一方式）

actions执行异常操作

34. 哪些数据你都存储在vuex

当多个组件都需要使用的数据通常都存储在vuex里面

app信息：菜单栏信息，设备，运行模式

用户相关：token ，用户信息，权限信息，第三方登录信息

用户访问历史，操作日志

设置信息：主题，自定义菜单，标签

权限相关：路由，固定路由，菜单路由，

同时通过actions执行请求，mutations更新

35 axios封装哪些常用功能

基础配置：baseURL，timeout，headers

拦截响应与请求：加载提示，token和其他请求头，错误响应操作，添加或移除权限

36. 组件传参

父传子 props，

子传父$emit 事件

非父子关系：

ref获取引用

依赖注入：provide inject

vuex

vue2（选项options）：event Bus传参；$parent父对象，$Chilren子对象 $root根节点

37 nextTick作用（全局方法）

数据更新，等待视图更新执行的回调函数（dom操作常用）

38. vue2 有没有遇到数据更新视图不更新？

vue2 通过数组下标更新数据，视图不会更新

Vue.set(数据名，下标，数值)强制视图更新

this.$set(数组名，key，value)

vue2 数组的双向绑定监听是通过重写数组的原型方法 pop，push ..

39. 在vue-for循环中为什么时候key

key为了让vue虚拟dom节点查找与更新更加优化（优化dom的渲染）

vdom 优化diff算法：

如果key一致就不向下查找

如果tag不一致，子节点不查找

只在同级做比较

n3次方优化到n1次方

40. 什么是虚拟dom，优点

虚拟dom就是用js对象的形式去模拟dom节点
<ul><li><a href="baidu.com">百度</a></li><li>纯文本</li>
</ul>
{tag:"ul",children:[{tag:"li",children:[{tag:"a",props:{href:"baidu.com"},chilren:["百度"]}]}，{tag:"li",children:["纯文本"]}]
}
操作dom 重绘，回流，消耗页面性能

虚拟dom，操作js比操作dom要快，通过diff算法查找之前的vdom与现状vdom最小区别，通过patch更新到dom视图中

虚拟dom可以映射html，虚拟dom可以转换为ios的组件，转换为android组件（react-native）

前端通过编写js实现原生ios/Android 的效果（实现跨平台开发）

41 箭头函数与普通函数的区别？

箭头函数this指向函数的上一层作用域的this

箭头函数不能作为构造函数，没有constructor

42. this指向问题

函数的this在函数执行的确定的

构造函数 new 函数名() this执行的 new出来对象的实例

箭头函数的this上一层作用域的this

对象中的this指向对象

事件响应函数的this指向调用者

setTimout setInterval 里面this指向window

call，apply，bind 响应的函数this指向第一个参数

43. 变量提升

t = 10
function fn(test) {             if(8>10){var t=30}alert (t)
}
fn(t)

t = 10；
function tn(test){var t = undefined;if(8>10){t=30}alert(t)
}

在js var 声明的变量会被提升到当前作用域的最前面赋值为undefined

所有的函数也会被默认提升到当前作用域的最前面:函数可以先调用后声明

43. let 与var的区别

let 不会变量提升，var声明的变量会变量提升

let 不能重复声明 var可重复声明

const 声明必须赋值，值类型的值不能修改

let a = 10;
x let a = 25;var b = 10;
√ var b = 20；

44 小程序

小程序单位：rpx 750rpx宽度等于一屏的宽度

更新数据 this.setData()

全局数据 globalData:{xxx:"yyy"}

var app = getApp（）

app.globalData.xxx

限制：页面栈5层，tab栏2-5，源文件包2M总20M，setData 1M 本地存储1次1M最大100M

跳转：navigateBack 移除一层页面栈 navigate 添加一个层页面栈 redirect 替换一层栈，switchTab请空页面栈

分包与与加载：app.json 配置一下

npm: npm init 初始化，a'z'z'z'z'z'z'z'z'z'z'z'z'z'z'z'z'z'zazzzzzzzzzzzzzzzzzz i安装，构造npm

生命周期：小程序生命周期，页面的生命周，组件的生命周期

小程序：启动onLaunch 前台onShow 后台 onHide 错误 onError

页面：加载onLoad(options）onReady加载完毕 onShow显示 onHide后台运行分享，下拉，滚动，触底，底部栏切换

组件的：attach 挂载 detach 卸载 move移动。。。。

登录流程：wx.login 获取code 发给后端后端通过appid appscecret 找微信服务器换取 sessionid与openid

获取用户信息：必须是用户才能使用api getUserInfo getUserProfile

云开发：了解没有用过

自定义底部栏，顶部导航。配置

45：获取浏览器宽高

window.innerWidth wondow.innerHeight

document.documentElement.clientWidth

46:clientWidth offsetWidth, scrollWidth区别

clientWidth内容+padding宽

offsetWith 内容+padding+边框宽

scrollwidth 内容+滚动区域的宽

47 scrolleft offsetLeft

scrollLeft 滚动条滚动的距离

offsetLeft 当前元素与父元素（position非static）距离

47事件event.pageX ，event.pageY,clientX,clienX

事件点击的位置

48 手机端事件

touchStart touchMove touchEnd

事件参数 event.currrentTouches[0]

49 获取元素的边界

elem.getBoundingClientRect()

bottom: height: left: right: top:width x，y:

dom操作，距离计算（监听滚动，图片懒加载，瀑布流）

50 JQuery相关

jq源码阅读过：读过，没有全懂

无new操作怎么实现

var vm = new Vue() //通过new关键字实现实例化
$("div")

jquery的工厂函数与原型链重新指向

function jQuery (selector){return new JQuery.prototype.init(selector)
}
JQuery.fn = jQuery.prototype;
JQuery.fn.init = function(selector){return xxxx;
}
jQuery.fn.init.prototype = JQuery.prototype;
window.$=JQuery;

js对象转jq

用$函数包裹 $(js对象)

jq转js

下标获取，get方法获取

$(selector)[0]

$(selector).get(0)

window.onload 与 jQuery.ready() || $() 区别

onload 后面覆盖前面；$(function(){}) 可以执行多重

onload等于页面加载才执行；入口函数dom加载就执行

页面渲染过程

下载html 生成dom树

下载css生成css树

css树与dom树合并为渲染树

开始渲染页面，遇到js会有阻塞，

JQuery.常用方法

show hide fadeIn fadeOut toggle slideIn slideDown显示与隐藏

css（） html（） attr（） props（）text（）val 属性和值

addClass toggleClass hasClass removeClass（）类

animation() stop() 动画停止动画

$ajax,$.get $,post() .load() ajax方式

find chilren parent parents next sibings 查找节点

51.html5标签有哪些

article aisde section header footer main hgroup figure video audio

52. 行内标签，块标签，行内块

行内 a span i u code b strong sub sup em del

块 div，p，h1-h6，ul li dl dt dd ol

行内块 img iframe

表格：table thead tbody th tr td

表单 input textarea button

53.行内与块区别

行：水平排列，不可设宽高可以设margin

块：垂直排列可设宽高不可以设margin

行块：水平可设宽高可以设置margin

都可以设置paddding

行内元素浮动自动化为块

54. 如何写个三角形

宽高为0 三边透明，一边显示

.san{width:0;hegiht:0;display:block;border:10px solid transparent;"border-left-color:red;
}

55. css哪些属性可以继承

文字属性可以继承。a不继承，h标签页不继承粗细

56. css如何垂直居中

行内：文字一行，高等于行高

行内块：一行，高等于行高，veticle-aligin:middle

块:

flex 弹性布局 aligin-items:center;

display:table-cell

定位的方式

57. css权重

选择器 * 0.5 标签 1 类10 id 100 import 最高

行内>内嵌>外链(离元素节点越近权限越高)

58. 0.5px线手机端

height:1px;transform:scaleY(0.5)

59 BFC

块级格式上下文

解决：父元素高度坍塌，margin加倍问题，实现自适应宽布局（bfc之间不会重叠）

60 px pt rem em rpx

px 像素

pt ios单位通常 2倍屏（iphone 5,6,7,8） 1pt = 2px 3倍屏1pt = 3px（iphonex，iphone6 plus）

em 一个字符宽

rem 根节点一个字符宽

rpx 是小程序uni-app的宽 750= 一阁屏幕

vh 100vh = 1个屏幕的高

vw 100vw = 1个屏幕的宽

61 清除浮动

解决的是父组件高度坍塌的问题

oveflow：hidden开启bfc
设置高度
最后一子元素宽100%，清除both

.clearfix:after{content:"";display:block;clear:both;visibility:hidden;
}
// visibility隐藏不会继承 opacity可以被继承 都占用原来的位置
//display:none 不占用原来的位置

62 定位区别

relative 相对定位            正常文档流              相对于自身的位置

absolute 绝对订定位脱离文档流         相对于开启了position非static最近的父辈元素，

fixed     固定定位           脱离文档流         相对于浏览器可是窗口（不随滚动条滚动）

63 webpack 中的插件plugin与加载器loader的区别

loader用来处理非js文件的，插件在webpack运行生命周期中进行压缩，清理等工作

64 webpack有哪些优化方式

区分生产模式和开发模式

压缩优化css，压缩优化js，压缩图片，base64小文件减少请求

使用hash命名控制二次缓存

异步加载，懒加载，按需加载，摇树treeshake

64 webpack 切换环境，区分环境，跨平台传递参数

cross-env 插件跨平台传递参数，通过参数区分环境，切换环境。process.env这个参数

（axios的baseURL也是通过pross.evn区分环境的）

65不用vue脚手架自己能搭建项目吗

能，原理是用webpack 搭建，写配置文件

vue-loader 处理.vue

vue-template-compiler 编译模板

66 webpack核心概念

入口：entery 从那开始进入打包 index.js/main.js

出口：文件输入的位置 output

plugin：插件，在webpack运行生命周期过程中进行打包清理，压缩等额外操作

loader：加载器处理非.js 文件的

mode：模式production development

tip：vue.config.js 其实就是webpack.config.js的vue版本（大部分可通用）

7 + 前端面试

get 与post 请求

get缓存，post不缓存

get由于浏览器url现在只能2k，post没有理论上没有限制

get收藏书签与分享

get常用于向服务器获取数据，post常用于修改，增加删除数据

闭包

函数嵌套函数，函数作为参数被传入，函数作为返回值被返回

在函数外部修改函数内部的局部变量

创建局部作用域，避免变量的全局污染

如何解决异步

回调函数（出现回调地狱）

Promise

sync/await

生成器generator (函数前加个* yeild next)

订阅发布模式

如何实现继承

extend 关键字类实现继承

原型链继承

function Parent（）{}

function Son（）{

// 继承构造函数

Parent.call(this,参数)

}

// 继承原型

Son.prototype = Object.create(Parent.protype)

// 修正构造函数

Son.prototype.constructor= Son

事件流

冒泡流，先最具体元素到最不具体

捕获流，反之

addEventListener(事件类型，回调函数，是否捕获）

如何事件先冒泡后捕获

同一事件同时监听冒泡和捕获，分别对应处理函数

事件委托，代理

事件监听不直接放在触发的元素上面，而监听其共有的父元素上

通过事件冒泡和事件对象（event.target）判断具体元素

好处：可以对动态添加的子元素添加事件

图片懒加载与预加载

图片懒加载当用户不需要的时候先不加载图片

图片预加载：当网络有空闲先提前把可能需要的图片缓存到内存中

mouseover与mouserenter区别

over移入元或者子对象都会触发

enter移入本身才会触发

js的new操作符做了哪些事情

创建空的对象

通过call apply执行函数并把空对象作为this传入

把空对象原型原型构造函数的prototype

提问：

1. 说一下 http 和 https

https 加密，http明文； https端口443 http端口80

2. tcp 三次握手，一句话概括

C代表客户端

S代表服务端

第一次握手：S 只可以确认自己可以接受 C 发送的报文段

第二次握手：C 可以确认 S 收到了自己发送的报文段，并且可以确认自己可以接受 S 发送的报文段

第三次握手：S 可以确认 C 收到了自己发送的报文段

3. ? TCP 和 UDP 的区别

1.）TCP 是面向连接的，udp 是无连接的即发送数据前不需要先建立链接。

2）TCP 提供可靠的服务。也就是说，通过 TCP 连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP 尽最大努力交付，即不保证可靠交付。

3)TCP 只能是 1 对 1 的，UDP 支持 1 对 1,1 对多。

4. webscoket

http 协议不支持持久性连接。 webscoket 是持续的长链接

webScoket常用于聊天，消息主动推送

5. HTTP 请求的方式，HEAD 方式与OPTIONS

HEAD 只发送请求头，不发送请求体

options：允许客户端查看服务器的性能，比如说服务器支持的请求方式等等。

6. 一个图片 url 访问后直接下载怎样实现？

1. 域名解析ip

2. 发送请求头

3. 服务器应答响应头和响应体（图片内容）

4. 客户端渲染图片

7. web Quality（无障碍）

能够被残障人士使用的网站才能称得上一个易用的（易访问的）网站。

如：设置img的alt属性图片提示（通过语音也知道图片是什么）

8. 什么是 Bom? Bom 是浏览器对象。有哪些常用的 Bom 属性呢？

location 地址信息

location.href 地址

location.reload() 刷新

location.replace() 跳转

history 历史记录

history.go() 跳转

history.back() 后退

history.foward()前进

window.navigator.userAgent 浏览器的标识

10. 说一下 http2.0

提升访问速度；允许多路复用；二进制分帧（更快乐，同时容量更大了，可分割更小了）

iframe 是什么？有什么缺点？

行内框架，在网页中可以嵌入另外一个网页

缺点：阻塞onload加载事件，不利seo（搜索引擎优化）（你的网站在百度可以被人更快搜索到）

解决方法：使用js动态添加iframe 设置src

Doctype 作用?严格模式与混杂模式如何区分？它们有何意义?

Doctype 告诉浏览器你什么模式渲染页面；严格按浏览器最新标准；混杂兼容渲染

xss攻击用户使用非法javascript与网站交互实现非法的目的

后端：httponly 防止js访问cookie ，secure让https才发生cookie

cookie 浏览器与服务器交互的重要手段；cookie存储在浏览器端一小段数据

http请求与响应都会携带cookie；cookie可以被后端设置；也可以被前端设置

session是存储在服务器的当前用户的唯一标识符（安全）

通常以cookie形式存储sessionid 告诉前端当前用户的状态

一句话概括 RESTFUL

就是用 URL 定位资源，用 HTTP 描述操作

是前后端交互风格开发方式，URL 定位资源，http请求时候用put添加 delete删除 post修改 get获取等方法与服务器交互

什么是ajax？

全称：异步的javascript和xml

核心：xhr：XMLHttpRequest

作用：无刷新更新页面的数据（视图）

原理：客户端通过xhr与服务器交换数据，客户端用javascript来操作dom渲染更新数据

什么是浏览器同源策略？

https://pan.baidu.com:8080/list?name=mumu&age=18#good

https 协议

pan子域名

baidu.com 域名

:8080 端口号

/list 路径 ?name=mumu&age=18 查询参数 #good 哈希值

同源策略（安全策略）：客户端向服务器请求数据的时候，要求客户端请求的html与服务器请求的地址要

协议一致，域名一致，子域名一致，端口号一致。

什么是跨域，跨域的常见方式有哪些？

跨域是绕过浏览器的同源策略（跨域名）向服务器请求数据

CORS 服务器响应头允许：Access-Control-Allow-Origin: *

jsonp技术（天气案例）

代理请求

jsonp的原理是？

利用的script的src属性没有同源策略的限制

Vue中路由相关的组件是？

<router-view> 存放路由页面

<router-link> 切换路由

路由配置

{ path:"/about" ，

name:"about"，

component：About

}

路由传参

{path:"/produce/:id",name:"produce",component:Produce}

{$route.params.id}

路由方法

$router.go

.back()

.forward前进

.push() 添加

replace（）替换

$router 有哪些方法（5个）

go(num)跳转

back()返回

forward（）前进

push（）添加历史记录（跳转）

replace（）替换

2. 写一个produce带参数路由配置

{ name:"produce",path:"/produce/:id",component:Produce }

在页面中获取参数$route.params.id

3. 导航组件内部守卫

进入前，更新前，离开前

beforeRouteEnter(to,from,next)

beforeRouteUpdate()

beforeRouteLeave()

4. sessionStore有哪些方法（3个）localStorage也具有这些方法

setItem(key,value) 设置数据

getItem(key) 获取key数据

removeItem(key) 移除key数据

clear()清空

5. 使用axios的get请求请求/list.php 请求参数是 {name:"mumu",age:18}

并在控制台输出请求内容（2种get方法）

axios.get("list.php?name=mumu&age=18").then(res=>'').catch(err=>'')

axios.get("list.php",{params:{name:"mumu",age:18}}).then().catch()

axios({url:"/list.php",method:"get",params:{name:"mumu",age:18}}).then().catch()

axios({url:"/list.php?name=mumu&age=18",method:'get'}).then().catch()

6. 使用axios的post请求请求/login.php 请求参数是 {name:"mumu",age:18}

并在控制台输出请求内容（2种post方法）

axios.post("/login.php","name=mumu&age=18",{headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then().catch()

根据接口要求

axios.post("/login.php",{name:"mumu",age:18},{headers:{'Content-Type':'application/json'}}).then().catch()

post默认就是json格式可以省略

axios.post("/login.php",{name:"mumu",age:18}).then().catch()

axios({

url:"login.php",

method:"post",

data:"name=mumu&age=18"},

headers:{"Content-Type":"application/x-www-form-urlencoded"})

.then().catch()

7. 什么是浏览器的同源策略？

客户端向服务器请求数据，

t'r要求客户端的网址与服务器是同源

协议，端口，子域名，域名一致

8. 跨域的方式有哪些？

jsonp

CORS 响应头允许（后端允许）

服务器代理

9. jsonp的原理有哪些？(script)

利用的script的src属性没有同源策略的限制

返回的数据调用函数+数据参数形式 fn({name:"mumu",age:"18"})

function fn( data){ console.log(data,'后端返回的数据data')}

10. 如何全局挂载axios

import axios from ‘axios’

axios.default.baseURl="/" 默认请求域名

axios.default.timeout=3000 请求超时配置

axios.dafault.headers.post["content-type"]="application/x-www-form-urlencoded"

const app = createApp(App)

app.config.globalProperties.$http = axios;

前端面试题（精简版）相关推荐

【前端面试题（3）】
前端面试题大全(3) 面试题目录前端面试题大全(3) 一.说说AMD.CMD.commonJS模块化规范的区别 ? 1. CommonJS 2. AMD 3. CMD 二.说说package.jso ...
前端面试题集锦——JavaScript
前端面试题集锦--JavaScript 1.请你谈谈 Cookie 的优缺点 cookie是存储于访问者计算机中的变量 cookie是浏览器提供的一种机制可以由JavaScript对其进行控制(设置 ...
前端面试题【131道】
前端面试题 1.vue2和vue3的主要区别 3.Apply/call/bind的原理是什么? 4.说说你对原型和原型链的理解? 5.说说你对ES6中Generator的理解 6.说说你对Event ...
中级前端面试题必备知识点（2.5w+月薪）进阶
中级前端面试题必备知识点(2.5w+月薪)进阶前端已经不再是5年前刚开始火爆时候的那种html+css+js+jquery的趋势了,现在需要你完全了解前端开发的同时,还要具备将上线.持续化.闭环.自 ...
2022年最新互联网大厂前端面试题及答案-前端工程必备技能(持续整理更新中【关注收藏不迷路】）
对于做前端的朋友,或者做了前端几年了,基础不好的,或者想进大厂的想了解深入,下面的知识点很多前端朋友都没有深入了解.很重要,看完有种茅塞顿开感觉,**关注+收藏哦,总有一天用的得.** 涉及到知识点: ...
前端面试题总结(js部分)|下
40 . 有这样一个 URL: http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e , 请写一段JS程序提取 URL ...
前端面试题整理（定期更新）
前言因为面试的原因,最近又开始关注前端面试题,浏览过网上很多面试题集合,有很多小伙伴整理的很全面,但是我发现其中有很多技术点在当下已不再流行,而面试题一般都是映射开发中常遇到的一些技能和问题,再结合 ...
Web前端面试题集锦
Web前端面试题集锦前端开发面试知识点大纲: 注意转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 H ...
菜鸡前端面试题整理日记
一直以来都有写点什么东西的想法,但又整天犹犹豫豫的,一会觉得准备不够充分,写的内容没什么质量,一会又觉得没什么内容可写的,以至于一拖再拖.万事开头难,难着难着就没有下面了,以此先开个头,记录自己的成长 ...
前端面试题汇总（JavaScript面试纯干货）
前端面试题汇总(JavaScript面试纯干货) 1 闭包闭包就是能够读取其他函数内部变量的函数闭包是指有权访问另⼀个函数作⽤域中变量的函数,创建闭包的最常⻅的⽅式就是在⼀个函数内创建另⼀个函数, ...

前端面试题（精简版）

1、js的数据类型

2、值类型与引用类型的区别

3、什么是闭包，闭包的应用场景，闭包的缺点

4、什么是原型，什么是原型链

5、JS如何实现继承

6、Call，apply，bind的区别

7、new关键字做了什么？

8、深拷贝

9、浅拷贝

深拷贝和浅拷贝的区别

10. js检测对象类型

11. 事件流

12. 事件代理

13. 数组去重

14. 异步和同步

15. 手写ajax

15.1、Promise

你在哪些地方用到promise

16. get与post区别

17. 什么是RESTful

18. 如何实现跨越

19. jsonp原理

20.书写jsonp

20. 什么是MVVM（前后端分离）

20 .什么是MVC（前后不分离代码）

21. Vue2 响应式原理，（双向绑定的原理）

22.Vue3响应式原理

23. v-if与v-show的区别

24. computed与watch区别

25 .生命周期

26.导航守卫

27 . $router,和$route区别

28 . 路由传参，子路由

29. 你封装过哪些组件（哪些插件）？

30. vuex 哪些组件

31. 什么是vuex

32. vuex和全局变量区别

33. vuex mutations和action区别

34. 哪些数据你都存储在vuex

35 axios封装哪些常用功能

36. 组件传参

37 nextTick作用（全局方法）

38. vue2 有没有遇到数据更新视图不更新？

39. 在vue-for循环中为什么时候key

40. 什么是虚拟dom，优点

41 箭头函数与普通函数的区别？

42. this指向问题

43. 变量提升

43. let 与var的区别

44 小程序

45：获取浏览器宽高

46:clientWidth offsetWidth, scrollWidth区别

47 scrolleft offsetLeft

47事件event.pageX ，event.pageY,clientX,clienX

48 手机端事件

49 获取元素的边界

50 JQuery相关

51.html5标签有哪些

52. 行内标签 ，块标签，行内块

53.行内与块区别

54. 如何写个三角形

55. css哪些属性可以继承

56. css如何垂直居中

57. css权重

58. 0.5px线手机端

59 BFC

60 px pt rem em rpx

61 清除浮动

解决的是父组件高度坍塌的问题

62 定位区别

63 webpack 中的插件plugin与加载器loader的区别

64 webpack有哪些优化方式

64 webpack 切换环境，区分环境，跨平台传递参数

65不用vue脚手架自己能搭建项目吗

66 webpack核心概念

7 + 前端面试

get 与post 请求

闭包

如何解决异步

52. 行内标签，块标签，行内块

$router 有哪些方法（5个）