（非原创）前端面试问题整理（34题）

1.http缓存机制，浏览器缓存到底是什么？
所谓的http缓存，就是浏览器自己给你的一个功能，一个缓存数据库，夹在服务端和客户端中间，你只需要设置一些参数即可实现  缓存/不缓存/时效内缓存/时效外缓存等（默认存在缓存）
浏览器缓存分为强缓存和协商缓存，浏览器加载一个页面的简单流程如下：（1）浏览器先根据这个资源的http头信息来判断是否命中强缓存。如果命中则直接加在缓存中的资源，并不会将请求发送到服务器。（2）如果未命中强缓存，则浏览器会将资源加载请求发送到服务器。服务器来判断浏览器本地缓存是否失效。若可以使用，则服务器并不会返回资源信息，浏览器继续从缓存加载资源。（3）如果未命中协商缓存，则服务器会将完整的资源返回给浏览器，浏览器加载新资源，并更新缓存。---------------------------------------------2.浏览器 cookie 和 session 的认识
session 是基于 cookie 实现的。cookie 保存在客户端浏览器中，而 session 保存在服务器上。cookie 机制是通过检查客户身上的“通行证”来确定客户身份的话，那么 session 机制就是通过检查服务器上的“客户明细表”来确认客户身份。session 相当于程序在服务器上建立的一份客户档案，客户来访的时候只需要查询客户档案表就可以了。cookie 和 session 的区别：存在的位置：cookie 存在于客户端，临时文件夹中；session 存在于服务器的内存中，一个 session 域对象为一个用户浏览器服务安全性cookie 是以明文的方式存放在客户端的，安全性低，可以通过一个加密算法进行加密后存放；session 存放于服务器的内存中，所以安全性好生命周期(以 20 分钟为例)cookie 的生命周期是累计的，从创建时，就开始计时，20 分钟后 cookie 生命周期结束；session 的生命周期是间隔的，从创建时，开始计时如在 20 分钟，没有访问 session，那么 session 生命周期被销毁。但是，如果在 20 分钟内（如在第 19 分钟时）访问过 session，那么，将重新计算 session 的生命周期。关机会造成 session 生命周期的结束，但是对 cookie 没有影响访问范围cookie 为多个用户浏览器共享；session 为一个用户浏览器独享----------------------------------------------3.前端常用框架：
bootstrap，angular，Vue，react----------------------------------------------4.响应式布局：
响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化响应式布局主要通过:(媒体查询 media query) 来为不同的尺寸的屏幕下同一个元素来设置不同的样式.----------------------------------------------5.混合app：（了解）Hybrid App是指介于web-app（网页APP，如京东web）、native-app（原生应用，如手机上面的APP应用）这两者之间的app,兼具2者的优势。就是包了个客户端的壳，其实里面是HTML5的网页。---------------------------------------------6.async/await 和 promise 的区别
promise是ES6为解决异步回调而生，避免出现回调地狱。async/await是基于Promise实现的，它不能用于普通的回调函数。async/await使得异步代码看起来像同步代码。使用Async/Await明显节约了不少代码。我们不需要写.then，不需要写匿名函数处理Promise的resolve值，也不需要定义多余的data变量，还避免了嵌套代码。async/await让我们可以同时捕获异步和同步代码抛出的异常。Promise如果在then()函数里出现异常，在Promise的外面的try/catch是捕获不到，这种情况我们需要使用Promise的catch()函数。----------------------------------------------7.开发环境和运行环境：
一般开发环境就是有很多调试代码，和调试信息输出的环境。运行环境把调试部分都删除，或屏蔽了，速度会更快。开发环境：开发环境是程序猿们专门用于开发的服务器，配置可以比较随意， 为了开发调试方便，一般打开全部错误报告。生产环境：是值正式提供对外服务的，一般会关掉错误报告，打开错误日志。-------------------------------------------------8.jquery 和 vue 的区别
jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。 Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。vue适用的场景：复杂数据操作的后台页面，表单填写页面jquery适用的场景：比如说一些html5的动画页面，一些需要js来操作页面样式的页面然而二者也是可以结合起来一起使用的，vue侧重数据绑定，jquery侧重样式操作，动画效果等，则会更加高效率的完成业务需求---------------------------------------------------9.html中的行内标签，块级标签，行内快标签
块级标签：独占一行，不和其他元素待在同一行，可以设置宽高。（div，p，h1-h6，ul，li，dl，dt）行内标签：能和其他元素待在同一行，不能设置宽高。（a，span，strong，u，em）行内块标签：能和其他元素待在同一行，能设置宽高。（img,input,textarea）-----------------------------------------------------10.Css3 盒子模型
在CSS里，每个可视的HTML元素在页面上都会被渲染成一个矩形区域，通常被称为盒子模型。盒子模型主要定义四个区域：内容(content)、内边距(padding)、边框(border)，外边距(margin)。
盒子模型有两种类型：传统的content-box和CSS3之后才导入的border-box，由box-sizing属性定义。虽然border-box更位直观，但因为兼容的原因，缺省值仍然是传统的content-box。
content-box：width和height定义的是内容(Content)部分的宽度和高度而不是整个盒子的高度，内边距(padding)、边框(border)和外边距(margin)依次加在外面。背景会填充padding和content部分。
border-box：width和height定义包含边框(border)，内边距(padding)和内容(content)，但不包含外边距(margin)-----------------------------------------------------11.原型链
每个对象都可以有一个原型_proto_，这个原型还可以有它自己的原型，以此类推，形成一个原型链。查找特定属性的时候，我们先去这个对象里去找，如果没有的话就去它的原型对象里面去，如果还是没有的话再去向原型对象的原型对象里去寻找...... 这个操作被委托在整个原型链上，这个就是我们说的原型链。
__proto__ 是原型链查询中实际用到的，它总是指向 prototype原型对象；
prototype （原型对象）是函数所独有的，在定义构造函数时自动创建，它总是被 __proto__ 所指。
所有对象都有__proto__属性，函数这个特殊对象除了具有__proto__属性，还有特有的原型属性prototype。prototype对象默认有两个属性，constructor属性和__proto__属性。prototype属性可以给函数和对象添加可共享（继承）的方法、属性，而__proto__是查找某函数或对象的原型链方式。constructor，这个属性包含了一个指针，指回原构造函数。----------------------------------------------------12.为什么在cmd 中输入 vue ui就可以打开 vue-cli脚手架：
@vue/cli3.0增加一个可视化项目管理工具，全局安装完成cli3.0之后，可以直接在cmd输入命令：vue ui  启动即可，地址默认是localhost:8000--------------------------------------------13.跨域：
1. JSONP（服务器send调用了前端函数时2.CORS跨域资源共享（服务器响应头中带有access-control-origin时则允许浏览器跨域3.服务器代理（a浏览器请求a服务器跨域b服务器，a服务器请求b服务器--------------------------------------------14.methods 里 使用 箭头函数 会怎样
没有this指向-------------------------------------------------15.js数据类型
Undefined、Null、Bollean、Number、String-------------------------------------------------16.生命周期钩子函数
①beforeCreate组件实例将要创建，一般在该时机，开启加载一个动画。②created组件实例创建完成，在该时机可以访问实例中的data的属性和methods中的方法，但不能操作dom。因为页面还未加载成功，页面未显示。注意：调用methods中的方法，完成网络请求，vue推荐的两种数据获取方式1、beforeRouteEnter 该路由加载之前请求数据，数据请求完成执行next（），显示目标路由（优点：保证页面显示时，一定可以拿到数据）2、created，在该时机发起请求，获取数据③beforeMount组件实例将要挂载到挂载点,页面未显示，开发中很少使用④mounted组件模板已经渲染到指定的el，页面显示，可以操作dom。⑤beforeUpdate组件将要更新⑥updated组件更新完成注意：关于update的钩子函数，都是页面动态渲染有关，每当数据变化是，变会页面更新，都会触发这些钩子，这些钩子的触发频率很高，我们极少操作，即便操作，也要保证内部方法轻量级。⑦beforeDestroy组件将要销毁⑧destroyed组件销毁完成。常在该时机移除耗时操作，比如计时器等----------------------------------------------------17.原生ajax的实现步骤
1.创建ajax对象var xhr = new XMLHttpRequest();2.告诉ajax请求地址以及请求方式(ajax下的open方法)xhr.open(‘get’,’http://www.example.com’); 第一个参数为请求方式，第二个参数为请求地址/服务器端对应的路由请求地址3.发送请求xhr.send();4.获取服务器端与客户端的响应数据xhr.onload = function () {console.log(xhr.responseText);  }xhr.responseText 获取服务器端的响应数据
post请求有两种：都需要设置请求格式参数（1）post请求xhr.setRequstHeader(‘Content-Type’,’application/x-www-form-urlencoded’);  （2）json格式xhr.setRequstHeader(‘Content-Type’,’application/json’);  固定写法，第一个参数报文属性名称，第二个参数报文属性对应的值
get请求，携带参数在open()的url后面；post请求，参数在send（）中携带------------------------------------------------18.es6新特性
1.const和letlet表示声明变量，而const表示声明常量，两者都为块级作用域；const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了：
2.模板字符串在ES6之前，我们往往这么处理模板字符串：通过“\”和“+”来构建模板而对ES6来说基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定；ES6反引号(``)直接搞定；
3.箭头函数ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体；箭头函数三个特点：不需要 function 关键字来创建函数省略 return 关键字继承当前上下文的 this 关键字
4.for...of 和 for...infor...of 用于遍历一个迭代器for...in 用来遍历对象中的属性
5.对象和数组解构例：const {data:res} 就是数据解构const {data:res} = await this.$http.get();----------------------------------------------------19.css权重
！Important -> #id -> 属性选择器，class 或伪类 -> 标签选择器或伪元素 -> 通配符*----------------------------------------------20.Css伪元素和伪类伪元素和伪类都是为了给一些特殊需求加样式，定义上基本一致伪类像类选择器一样给已存在某个元素添加额外的样式；伪元素则是给自己虚拟的元素添加样式。
常用的伪类：hover，activehover指当鼠标移动到元素上时触发某种样式；activate指鼠标按下时的某种样式。
常用伪元素：before 和 after是经常经常重用的伪元素。
21.本地存储LocalStorage
sessionStorage，只会在窗口打开的时候才有效，一次性缓存会话，关闭浏览器自动释放localStorage，只要没有手动清除，就会一直保留，永久存储，以文件形式存储cookie,是用来跟踪用户信息的，默认只是一次性会话，维持到浏览器关闭---------------------------------------------------22.移动端布局：流式（百分比）布局，rem布局，响应式布局（媒体查询），flex（弹性）布局---------------------------------------------------23.页面的生命周期是什么：
1.页请求：页请求发生在页面生命周期开始之前，用户请求页时，ASP.NET将确定是否需要分析和编译页2.开始：在开始阶段，将设置页属性，如Request和Response。在此阶段，页还将确定请求是回发请求还是新请求，并设置IsPostBack属性3.页初始化：在页初始化期间，可以使用页中的控件，并设置每个控件的UniqueID属性。4.加载：在加载期间，如果当前请求是回发请求，则将使用从视图状态和控件状态恢复的信息加载控件属性。5.验证：在验证期间，将调用所有验证程序控件的Validate方法，此方法将设置各个验证程序控件和页的IsValidate属性。6.回发事件处理：如果请求是回发请求，则将调用所有事件处理程序7.呈现：在呈现之前，会针对该页和所有控件保存视图状态。在呈现阶段中，页会针对每个控件调用Render方法，它会提供一个文本编写器，用于将控件的输出写入页的Response属性和OutputStream中8.卸载：完全呈现页并将页发送至客户端、准备丢弃该页后，将调用卸载。此时，将卸载页属性并执行清理。
也可以说从创建-销毁的过程创建前后，载入前后，更新前后，销毁前后----------------------------------------------------24.什么是MVVM：
是一种设计思想。Model层代表数据模型，View代表UI组件。ViewModel是一个同步View和Model的对象。在mvvm框架下，view和model之间没有直接的联系，而是通过viewmodel进行交互，model和viewmodel之间的交互是双向的，因此view数据的变化会同步到model上，而model数据的变化也会立即反映到view上。--------------------------------------------------25.git常用命令
配置姓名和邮箱：git config --golbal user.name/user.email  查看配置信息 git config --list初始化本地仓库 git init查看文件状态 git status添加文件到暂存区 git add 文件名提交到本地仓库 git commit -m 日志说明查看分支 git branch创建分支 git branch develop切换分支 git checkout 分支名克隆仓库 git clone往服务器推送 git push 地址 分支名-----------------------------------------------------26.js由那三部分组成？详细描述一下？
js有三部分组成，即ECMAScript、DOM、BOM三部分组成。ECMAScript是核心解释器、DOM(Document Object Model)是文档对象模型、BOM(Browser Object Model)是浏览器对象模型。
ECMAScript也是一种语言，它本身不包含输入输出定义；ECMA-262规定了语法、类型、语句、关键词、保留字、操作符、对象，ECMAScript就是对实现该规定的各个方面内容的语言的描述。javascript实现了ECMAScript。
BOM(Browser Object Model)是浏览器对象模型。提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
DOM是文档对象模型，它主要包含了获取元素、修改样式、操作元素三个方面的内容，我们的绝大部分操作都是DOM操作，DOM操作大部分是可以兼容的，因为多个浏览器具有兼容写法。----------------------------------------------------27.js的继承
1.原型链继承（新实例的原型等于父类的实例。）2.接用构造函数继承（用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制）））3.组合继承（组合原型链继承和借用构造函数继承）（常用）（结合了两种模式的优点，传参和复用）4.原型式继承（用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。）---------------------------------------------------28.什么是闭包？
函数嵌套函数内部的函数可以引用外部函数的参数或者变量参数和变量不会被垃圾回收机制回收，因为内部函数还在引用------------------------------------------------29.jQuery中有哪几种类型的选择器？
从我自己的角度来讲，可以有3种类型的选择器，如下：1、基本选择器：直接根据id、css类名、元素名返回匹配的dom元素。2、层次选择器：也叫做路径选择器，可以根据路径层次来选择相应的DOM元素。3、过滤选择器：在前面的基础上过滤相关条件，得到匹配的dom元素。--------------------------------------------------30.http协议是什么？

HTTP（超文本传输协议）是一个基于请求与响应模式的、无状态的、应用层的协议，常基于TCP的连接方式，HTTP1.1版本中给出一种持续连接的机制，绝大多数的Web开发，都是构建在HTTP协议之上的Web应用。
http是属于“应用层的协议”，而且是基于TCP/IP协议的。HTTP协议通常承载于TCP协议之上，有时也承载于TLS或SSL协议层之上，这个时候，就成了我们常说的HTTPS。
在TCP/IP协议中，TCP协议提供可靠的连接服务，连接是通过三次握手进行初始化的。三次握手是指建立一个 TCP 连接时需要客户端和服务器端总共发送三个包以确认连接的建立。三次握手的目的是同步连接双方的序列号和确认号并交换 TCP窗口大小信息，为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。1.第一次握手：建立连接时：客户端发送syn（syn=j）包到服务器，等待服务器确定2.第二次握手：服务器收到syn包(ack=j+1),同时自己也发送一个syn包(syn=k)，即SYN+ACK包。3.第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ack(ack=k+1)，此包发送完毕，tcp连接成功--------------------------------------------------31.Http协议中有哪些请求方式?
GET:用于请求访问已经被URI(统一资源标识符)识别的资源,可以通过URL传参给服务器POST:用于传输信息给服务器,主要功能与GET方法类似,但一般推荐使用POST方式PUT:传输文件,报文主体中包含文件内容,保存到对应URI位置HEAD:获得报文首部,与GET方法类似,只是不返回报文主体,一般用于验证URI是否有效DELETE:删除文件,与PUT方法相反,删除对应URI位置的文件OPTIONS:查询响应URI支持的HTTP方法---------------------------------------------------32.JSON和JSONP是什么？
JSON是一种数据交换格式，而JSONP是一种被开发人员创造出来的一种非官方的跨域数据交互协议。
JSON数据格式在前端开发这个领域用的比较多基于纯文本，跨平台传递简单；JavaScript原生支持，后台语言几乎全部支持；轻量级数据格式，占用字符数量极少，特别适合互联网传递；可读性较强；容易编写和解析；
JSONP数据交互协议一般用于Ajax跨域请求。Ajax直接请求普通文件存在跨域无权限访问的问题，然而web页面上调用js文件则不受是否跨域的影响（凡是拥有src该属性的标签都有跨域的能力），于是通过web端跨域访问数据的时候，设法把数据装进js格式的文件里面。获取之后便可以在web端进一步进行处理。
为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
------------------------------------------------33.css3新增属性都有哪些？
1.css3边框：border-radius，box-shadow，border-image2.css3背景：background-size： 属性规定背景图片的尺寸。3.css3 2D转换：transform()，translate()，rotate()4.css3 3D转换：rotateX()绕x轴旋转；rotateY()绕y轴旋转。例：transform：rotateX(120deg);5.css3 动画6.css3 过渡-------------------------------------------------34.什么是钩子函数？
钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。