web 前端面试题50道

1、前端如何实现优化性能

(1)减少网络时间

①使用DNS缓存技术 ​ ②减少需要传输的文件尺寸 ​ ③加快文件传输速度

(2)减少发送的请求数量

①利用浏览器缓存 ​ ②使用合并的图片文件

(3)提高浏览器下载的并发度

①JS文件放在HTML文档最后 ​ ②使用多个域名

(4)让页面尽早开始显示

①将样式表的引用放在HTML文档的开头，将JS的引用放在HTML文档的最后，这样JS文件的下载和执行会在所有页面都下载完成后，不会阻止其他页面元素的显示。从用户感官上说，JS文件的下载和执行时间完全不会被用户感觉到。

2、cookie sessionStorage localStorage 区别

区别：

1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
2. 存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
3. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
4. 作用域不同，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 出现了块级作用域，块级作用域就是使用一对大括号包裹的一段代码，比如函数、判断语句、循环语句，甚至单独的一个{}都可以被看作是一个块级作用域。