web 前端面试题50道
整理出来web前端面试比较常见的50道题
目录
5、谈谈你对静态布局、自适应布局、响应式布局、弹性布局的理解？
15.promise.all和promise.race的区别
18.window.onload和$(document).ready()的区别
23.setTimeout、Promise、Async/Await的区别
42.小程序wx.setStorageSync和wx.setStorage的区别
43.Form 的Submit提交与 ajax请求有哪些区别?如何将Form表单的数据使用ajax提交?
1、前端如何实现优化性能
(1)减少网络时间
①使用DNS缓存技术 ②减少需要传输的文件尺寸 ③加快文件传输速度
(2)减少发送的请求数量
①利用浏览器缓存 ②使用合并的图片文件
(3)提高浏览器下载的并发度
①JS文件放在HTML文档最后 ②使用多个域名
(4)让页面尽早开始显示
①将样式表的引用放在HTML文档的开头，将JS的引用放在HTML文档的最后，这样JS文件的下载和执行会在所有页面都下载完成后，不会阻止其他页面元素的显示。从用户感官上说，JS文件的下载和执行时间完全不会被用户感觉到。
2、cookie sessionStorage localStorage 区别
区别：
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
3、Canvas和SvG的区别是什么？
两者的区别如下：
一旦 Canvas绘制完成将不能访问像素或操作它；任何使用SVG绘制的形状都能被记忆和操作，可以被浏览器 再次显示。
Canvas对绘制动画和游戏非常有利；SVG对创建图形（如CAD）非常有利。
因为不需要记住以后事情，所以 Canvas运行更快；因为为了之后的操作，SVG需要记录坐标，所以运行比较 缓慢。
在 Canvas中不能为绘制对象绑定相关事件；在SVG中可以为绘制对象绑定相关事件。
Canvas绘制出的是位图，因此与分辨率有关；SvG绘制出的是矢量图，因此与分辨率无关
4、清除浮动的方式
第一种 清除浮动方式 clear 在浮动元素的同级末尾加上 一个空div 并添加样式 clear属性
第二种 当子元素发生浮动 使用 overflow属性会强制性包裹起来浮动内容 而达到清除浮动的效果
第三种：用伪类去实现清除浮动 ： after伪类 来实现清除浮动 有借助第二种方式的方法
5、谈谈你对静态布局、自适应布局、响应式布局、弹性布局的理解？
静态布局
描述：就是设定好的长和宽，大小不会改变，不管你多大的屏幕它都是那么大，分辨率是不会改变的
自适应布局
描述：不同屏幕分辨率下，保持原有展示方式。元素的尺寸大小可以改变，但展示方式不会改变
响应式布局
描述：不同屏幕分辨率下，展示方式不同
弹性布局（flex布局）
描述：目前比较流行的一种布局，使用传统布局难以实现一些复杂的布局，使用flex布局实现就变得非常容易
6、JS判断数据类型的方法
1、typeof
2、instanceof
3、constructor
4、toString
5、is Array 判断是否为数组
7、数组的方法
push() 末尾添加 、 join() 数组转化字符串、 pop() 末尾删除 、 unshift() 首个添加、 shift() 第一个删除 、 sort() 排序、 concat() 合并数组 、 slice() 截取 、 splice() 数组更新、 indexOf() 从开头查询 查询到即结束 、 lastIndexOf() 从末尾查询 查询到即结束、 reverse() 数组倒序
map()方法 给数组的每个元素做特殊的处理 返回一个新的数组
filter() 方法 过滤一个数组中符合要求的元素，返回一个新数组
some()方法 用于数组判断 当数组中只要有一个符合条件就返回 true
forEach此方法是用来代替 for 循环遍历数组
every返回值是布尔值，判断数组中的值是否都符合条件，如果是则返回true，有一个不符合则返回false
find 、findLast返回值为符合条件的对应的那个值后者从后往前遍历
includes方法用来判断一个数组是否包含一个指定的值，包含就返回 true , 否则返回false。
8、字符串方法
charAt() 返回指定位置字符 concat() 连接字符串 replace() 替换 split() 分割 indexOf() 从前往后第一次出现 lastindexOf() 从后往前第一次出现 toLowerCase() 转换为小写 toUpperCase() 转换为大写 clice()字符串截取 subString() 字符串截取
includes()：返回布尔值，表示是否找到了参数字符串。 startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。 endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。 repeat()方法返回一个新字符串，表示将原字符串重复n次
padStart()和padEnd()接受两个参数第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。少补多删
9、数组去重
利用ES6 Set去重（ES6中最常用）
function unique (arr) {
return Array.from(new Set(arr))
}利用filter
function unique(arr) {
return arr.filter(function(item, index, arr) {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
return arr.indexOf(item, 0) === index;
});
}利用for嵌套for，然后splice去重（ES5中最常用）
function unique(arr){
for(var i=0; i<arr.length; i++){
for(var j=i+1; j<arr.length; j++){
if(arr[i]==arr[j]){ //第一个等同于第二个，splice方法删除第二个
arr.splice(j,1);
j--;
}
}
}
return arr;
}10、var let const的区别
①var有变量提升 let、const没有变量提升 ②var除函数内部都为全局变量 let、const都属于块级作用域 ③var可以重复定义，会覆盖之前的变量 let、const不能重复定义，报错 ④var没有暂时性死区 let、const有暂时性死区 ⑤var声明为全局变量的时候会挂载到window let、 const不会挂载到window ⑥var、let为变量 const为常量
11、new操作符具体做了哪些事情
①new会在内存中创建一个新的空对象 ②new会让this指向这个对象 ③执行构造函数里的代码，给这个新对象添加属性和方法 ④new 会返回这个新对象（所以构造函数不需要return）
12、说一说JavaScript中的this指向
1、普通函数调用，此时 this 指向 window
2、构造函数调用， 此时 this 指向 实例对象
3、对象方法调用， 此时 this 指向 该方法所属的对象
4、通过事件绑定的方法， 此时 this 指向 绑定事件的对象
5、定时器函数， 此时 this 指向 window
13、数组扁平化
[1, [2, [3]]].flat(2) // [1, 2, 3]ES6 实现：
function flatten(arr) { while (arr.some(item => Array.isArray(item))) { arr = [].concat(...arr); } return arr; }
14.什么是事件循环
①同步和异步任务进入不同的场所，同步进入主线程，异步进入事件列表并注册函数 ②当指定的事情完成时，事件列表会将这个函数移入Event Queue ③主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，放入主线程执行. ④上述过程会不断重复，也就是我们所说的事件循环
15.promise.all和promise.race的区别
①只有所有的状态都变成fulfilled，p的状态才变成fulfilled，此时他们的返回值组成一个数组，传递给p的回调函数 ②只要p1,p2,p3之中有一个被rejected，p的状态就会变成rejected。此时第一个被rejected的实例的返回值，会传递给p的回调函数 ③只要有一个promise状态改变，外层的promise的状态就会改变，率先改变的promise的返回值就会传递给外层的返回值
16.promise的优缺点
①可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数，此外，promise对象提供统一的接口，使得控制异步操作更容易 ②无法取消promise，一旦建立，立即执行，无法中途取消 ③如果不设置回调函数，内部抛出错误，不会反应到外部 ③当处于pending状态时 ，无法得知目前进展到哪一个阶段，（刚刚开始还是即将完成）
17.箭头函数和普通函数的区别
①箭头函数体内的this对象，就是定义时所在的对象，而不不是使用是的对象 ②箭头函数没有arguments，如果要用可以用rest代替 ③箭头函数不能作为构造函数，不能使用 new ④箭头函数没有原型，不能继承 ⑤箭头函数不能当 做Generator函数，不能使用yield关键字
18.window.onload和$(document).ready()的区别
①window.onload必须等网页中所有的内容加载完成后才执行
$(document).ready()等DOM加载完成后执行
②window.onload同一页面不能编写多个
$(document).ready()同一页面可以编写多个
③简写方式window.onload无
$(document).ready()==>(function(){})
<br/>
19、页面请求方式有几种？
get：请求指定页面信息，并返回实体主体。 head：类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头。 post:向指定资源提交数据进行处理请求（例如提交表单或上传文件），数据包含在请求体中。post请求可能会导致新的资源的建立或已有资源的修改。 put：从客户端向服务器传送的数据取代指定的文档的内容。 delete：请求服务器删除指定的页面。 connect：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。 options：允许客户端查看服务器的性能。 trace：回显服务器收到的请求，主要用于测试或诊断。
20、什么是跨域？如何解决？
指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
跨域的解决方案 1、 通过jsonp跨域 2、 document.domain + iframe跨域 3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享（CORS） 7、 nginx代理跨域
21.URL到整个页面加载完毕及显示到屏幕上的整个流程
①输入地址 ②浏览器查找域名的IP地址 ③浏览器向Web服务器发送一个http请求 ④服务器的永久重定向响应 ⑤浏览器跟踪重定向地址 ⑥服务器处理请求 ⑦服务器返回一个http请求 ⑧浏览器显示HTML ⑨浏览器发送请求获取嵌入在HTML中的资源（视频、图片等）
22.列举4种以上网站性能优化的方法
①尽量减少HTTP请求次数 ②预加载 ③减少DOM元素数量 ④减少DOM访问 ⑤可缓存的AJAX ⑥减少DNS查找次数 ⑦使用外部JavaScript和CSS ⑧削减JavaScript和CSS ⑨避免跳转 ⑩延时加载内容 ①使iframe的数量最小 ②把样式表置于顶部 ③用<link>代替@import ④剔除重复脚本 ⑤减小Cookie体积,最好使用localStorage ⑥优化CSS Spirite
23.setTimeout、Promise、Async/Await的区别
这题主要是考察这三者在事件循环中的区别，事件循环中分为宏任务队列和微任务队列。 (1) 其中settimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行； (2) promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行； (3) async函数表示函数里面可能会有异步方法，await后面跟一个表达式，async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行。 <br/>
24.set和map的区别
①Set和map主要的应用场景在于数据重组和数据储存 ②set是一种叫做集合的数据结构，map是一种叫做字典的数据结构 ③set本身是一种构造函数，用来生成set数据结构。set对象允许你储存任何类型的唯一值，无论是原始值或者是对象引用 ④map本质上是键值对的集合，类似集合，可以遍历(forEach)，方法很多可以跟各种数据格式转换
25.写出你知道的所有loader以及作用
①babel-loader：处理js文件，会将es5以上的语法进行转义 ②css-loader：帮助webpack打包处理CSS文件 ③style-loader：将css-loader打包好的CSS代码以<style></style>标签的形式插入到HTML文件中 ④less-loader：用于处理编译.less文件，将其转为CSS文件代码 ⑤sass-loader：加载sass/scss，并且把sass/scss编译成css ⑥url-loader：用来处理图片
26.小程序的项目结构
①-project.config.json：项目的配置文件。比如设置项目的名字，设置appid等。 ②-app.js：小程序逻辑处理（全局js）。比如小程序加载完成执行的代码 ③-app.json：小程序的公共配置。比如小程序的页面，是否有tabBar等 ④-app.wxss：小程序公共样式（全局css）。在这里面写的样式可以被所有页面使用 ⑤-pages：存储小程序页面 -index：页面的名称 -index.js：index页面的逻辑处理文件（局部js） -index.json：index页面的配置文件 -index.wxml：index页面的页面结构（相当于HTML） -index.wxss：index页面的样式（局部css） -其他页面
27.webpack如何优化性能
①构建性能：当构建性能越高，开发效率越高，减少模块解析，优化loader性能，限制loader的应用，缓存loader的结果，多线程打包，开启热替换 ②传输性能：在这方面重点考虑网络中总的传输量，以及文件数量，分包，手动分包，自定分包，模块体积优化，代码压缩，懒加载，gzip，辅助工具 ③运行性能：主要是指js在客户端的运行效率，运行性能
28.loader 与plugin的区别
Loader本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。 因为 Webpack 只认识 JavaScript，所以 Loader 就成了翻译官，对其他类型的资源进行转译的预处理工作。
Plugin就是插件，基于事件流框架Tapable，插件可以扩展 Webpack 的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
Loader在 module.rules 中配置，作为模块的解析规则，类型为数组。每一项都是一个 Object，内部包含了 test(类型文件)、loader、options (参数)等属性。
Plugin在 plugins 中单独配置，类型为数组，每一项是一个 Plugin 的实例，参数都通过构造函数传入。
29.什么是热更新
页面能实时的更新我们保存的内容，而不是需要手动的刷新
热更新的原理：保存之后与之前的内容进行对比，如果对比发现有修改，就更新修改后的内容，如果发现没有更新的内容，那我们就保持之前的内容不变
30.写出你知道的所有loader及作用
babel-loader：处理js文件，会将es5以上的语法进行转义 css-loader：帮助webpack打包处理CSS文件 style-loader：将css-loader打包好的CSS代码以<style></style>标签的形式插入到HTML文件中 less-loader：用于处理编译.less文件，将其转为CSS文件代码 sass-loader：加载sass/scss，并且把sass/scss编译成css url-loader：用来处理图片
31.webpack如何实现预加载
在声明 import 时，使用webapck的内置指令webpackPrefetch: true就可以对指定资源进行预加载
预加载：等其他资源加载完毕，浏览器空闲了，再偷偷加载被设置为预加载的资源
import(webpackChunkName:'test' ,webpackPrefetch:true"./test").then(({test}) => {
console.log('test加载成功')
test()
})32.五种路由(wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.navigateBack)的使用和区别
1、wx.switchTab（跳转主页）：跳转到tabBar页面，并关闭其他所有非tabBar页面，用于跳转到主页。
2、wx.reLaunch（关闭所有页面跳转）：关闭所有页面，打开到应用内的某个页面。
3、wx.redirectTo（关闭当前页面跳转）：关闭当前页面，跳转到应用内的某个页面，但不允许跳转到tabBar页面。
4、wx.navigateTo（保留页面跳转）：保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面。
5、wx.navigateBack（页面返回）：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
33.setData的作用
setData函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data的值（同步）
34.wx：key的作用
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，需要使用wx：key来指定列表中项目的唯一的标识符
35.小程序的生命周期
首先小程序的生命周期函数是在
app.js里面调用的，App(Object)函数用来注册一个小程序。接受一个Object参数，指定其小程序的生命周期回调；一般有onLaunch监听小程序初始化、onShow监听小程序显示、onHide监听小程序隐藏等生命周期回调函数。1.当用户首次打开小程序，就触发 onLaunch（只触发一次），小程序程序就开始进行初始化。
2.当小程序代码初始化完成后，触发onShow方法，监听小程序显示，这个时候我们就可以看到页面。
3.当小程序从前台进入后台，触发 onHide方法，当我们切换到其他手机程序（从百度APP到QQAPP手机程序）使用，应用切换放置后台运行了。
4.当小程序从后台进入前台显示，触发 onShow方法，当我们切换到已经回手机程序使用，应用切换放置前台（从QQAPP到百度APP手机程序）运行了。
5.当小程序发生脚本错误，或者 api 调用失败时，会触发 onError方法 并带上错误信息
36.页面的生命周期
| data | 页面的初始数据 |
|---|---|
| onLoad | 程序初始化完成后，页面首次加载触发onload，只会触发一次 |
| onShow | 生命周期函数 -- 监听页面显示 |
| onReady | 生命周期函数 -- 监听页面初次渲染完成 |
| onHide | 生命周期函数 -- 监听页面隐藏 |
| onUnload | 生命周期函数 -- 监听页面卸载 |
| onPullDownRefresh | 页面相关事件处理函数--监听用户下拉动作 |
| onReachBottom | 页面上拉触底事件的处理函数 |
37.微信小程序如何实现页面之间的数据共享
①使用组件模板template传递参数 ②使用全局变量实现数据传递let App = getApp() ③组件之间的传递，绑定属性 ④本地缓存（Storage） ⑤五种路由传输
38.bindtap和catchtap的区别
bindtap事件绑定不会阻止冒泡事件 catchtap事件绑定可以阻止冒泡事件
39.小程序独立分包与普通分包的区别
普通分包：必须依赖于主包才能运行，可以引用主包内的公共资源
独立分包：可以不下载主包的情况下，独立运行，不能引用主包内的公共资源
40.button的open-type的属性有哪些？
contact：打开客服会话 bindcontact：回调
share：触发用户转发
getPhoneNumber：获取用户手机号 bindgetphonenumber：回调
getUserInfo：获取用户信息 bindgetuserinfo：回调
openSetting：打开授权设置页小程序独立分包与普通分包的区别
41.commonjs与ES6的module的区别
1、两者的模块导入导出语法不同，commonjs是module.exports，exports导出，require导入；ES6则是export导出，import导入。
2、commonjs是运行时加载模块，ES6是在静编译期间就确定模块的依赖
3、ES6在编译期间会将所有的import提升到顶部，commonjs不会提升require
4、commonjs导出的是一个值拷贝，会对加载结果进行缓存，一旦内部在修改这个值，则不会同步到外部。ES6是导出的一个引用，内部修改可以同步到外部
5、commonjs中顶层的this指向这个模块本身，而ES6中顶层this执行undefined。
42.小程序wx.setStorageSync和wx.setStorage的区别
(1)功能：将数据存储在本地缓存中指定的key中。会覆盖掉原来该key对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个key允许存储的最大数据长度为1MB，所有数据存储上限为10MB (2)区别：wx.setStorageSync是同步缓存 wx.setStorage是异步缓存 ①使用异步缓存，无论成功与否，程序都会向下执行 ②使用同步缓存，只有缓存成功，程序才会向下执行 ③异步缓存性能更佳，用户体验更好 ④同步缓存的数据更加安全
43.Form 的Submit提交与 ajax请求有哪些区别?如何将Form表单的数据使用ajax提交?
①Ajax提交是异步进行，网页不需要刷新，而Form表单提交时需要刷新 ②Ajax必须要用JS来实现，而Form表单不是必须 ③Ajax需要实用程序来对其进行数据处理，Form表单提交是根据表单结构自动完成，不需要代码干预 ①将Form表单数据序列化 ②通过窗口查找Form提交
44.微信小程序和H5的区别
①运行环境不同（小程序在微信运行，H5在浏览器运行） ②开发成本不同（H5需要兼容不同的浏览器） ③获取系统权限不同（系统级权限可以和小程序无缝衔接） ④应用在生成环境的隐形速度流程（H5需不断对项目优化来提高用户体验）
45.说出小程序当中常用的UI组件
视图容器组件：view、swiper、swiper-item 基础内容组件：text、icon、rich-text 表单组件：button、from、CheckBox、input 导航组件：navigator 媒体组件：image
46.JS延迟加载的方式有哪些？
1、 JS的延迟加载有助与提高页面的加载速度。 2、 defer和async、动态创建DOM方式（用得最多）、按需异步载入 3、 JSdefer：延迟脚本。立即下载，但延迟执行（延迟到整个页面都解析完毕后再运行），按照脚本出现的先后顺序执行。 4、 async：异步脚本。下载完立即执行，但不保证按照脚本出现的先后顺序执行。
47. 介绍路由的history
history对象保存着用户的上网记录，从浏览器窗口打开的那一刻算起。 出于安全的考虑，开发人员无法得知用户浏览过的URL。 不过，借由用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退与前进
48、说说异步编程的实现方式?
回调函数
优点：简单、容易理解 缺点：不利于维护、代码耦合高
事件监听
优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数 缺点：事件驱动型，流程不够清晰 发布/订阅(观察者模式) 类似于事件监听，但是可以通过‘消息中心’，了解现在有多少发布者，多少订阅者
Promise 对象
优点：可以利用 then 方法，进行链式写法；可以书写错误时的回调函数 缺点：编写和理解，相对比较难
Generator 函数
优点：函数体内外的数据交换、错误处理机制 缺点：流程管理不方便
async 函数
优点：内置执行器、更好的语义、更广的适用性、返回的是 Promise、结构清晰 缺点：错误处理机制
49、Jsonp和Ajax的区别
Ajax属于同源策略，Jsonp属于非同源策略 原理不一样： 1.Ajax:new XMLHttpRequest 2.jsonp:通过动态创建script标签，添加src属性，前端通过传一个callback给后台，后台返回函数调用，前台将返回的函数调用再进行解析 返回值不一样： 1.Ajax返回的是一个对象 2.jsonp返回的是字符串 请求方式不一样： Ajax有多种请求方式—(get,post,delete,put,patch) jsonp：只有get
50、说说你对Javascript作用域的理解？
作用域是指在程序中定义变量的区域，该位置决定了变量的生命周期。通俗地理解，作用域就是变量与函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期。
在 ES6 之前，ES 的作用域只有两种：全局作用域和函数作用域。
全局作用域中的对象在代码中的任何地方都能访问，其生命周期伴随着页面的生命周期。 函数作用域就是在函数内部定义的变量或者函数，并且定义的变量或者函数只能在函数内部被访问。函数执行结束之后，函数内部定义的变量会被销毁。 ES6 出现了块级作用域，块级作用域就是使用一对大括号包裹的一段代码，比如函数、判断语句、循环语句，甚至单独的一个{}都可以被看作是一个块级作用域。
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
12
0- 0
已为社区贡献1条内容
所有评论(0)