前端知识点
前端知识点
HTML5与 CSS3.0 新特性?
html5的新特性:
添加了video，radio标签
添加了canvas画布和svg,渲染矢量图片
添加了一些列语义化标签header,footer,main,section,aside,nav等
input的type值新添加了很多属性（email，url，number，range，Date pickers (date, month, week, time, datetime, datetime-local)，search，color）
添加了地理位置定位功能
CSS3新特性:
媒体查询（可以查询设备的物理像素然后进行自适应操作）
transform，transition，translate,scale,skelw，rotate等相关动画效果
box-shadow,text-shadow等特效
CSS3 @font-face规则,设计师可以引入任意的字体了
CSS3 @keyframes规则，可以自己创建一些动画等
2D、3D转换
添加了border-radius，border-image(图片边框)等属性(添加了圆角边框,将图片规定为包围div元素的边框)
Flex布局:
Flex布局，可以简便、完整、响应式地实现各种页面布局。
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
Rem布局:
rem是 css 的长度单位，它是相对于 <html>元素的 font-size 的相对值。假设 html { font-size: 20px; }，那么 1rem 就等于 20px。
ES6新特性:
const与 let :
使用let声明的变量可以重新赋值,但是不能在同一作用域内重新声明
使用const声明的变量必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值
箭头函数: =>
模板字面量: ( )
模板字面量用倒引号 ( `` )（而不是单引号( '' )或双引号( "" )）表示，可以包含用 ${expression} 表示的占位符
解构赋值:解构数组用[ ],解构对象用{ };解构赋值语法是一种Javascript表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。
Vue: vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。
Vue CLI: Vue CLI是一个基于 Vue.js 进行快速开发的完整系统 (脚手架)
Vuex: Vuex是一个专为 Vue.js 应用程序开发的状态管理模式
Vue-router: Vue Router是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌
Axios: Axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
从浏览器中创建 XMLHttpRequests
从node.js创建 http请求
支持Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF
ElementUI常用组件: 开关滑块弹框通知消息提示框分页走马灯面包屑
模块化、组件化开发:
模块化：是从代码的角度来进行分析，把一些可复用的代码，抽离为单个的模块；便于项目的维护和开发
组件化：是从UI角度来进行分析的，把一些可复用的 UI 元素，抽离为单独的组件；便于项目的维护和开发
组件化的好处：随着项目规模的增大，手里的组件越来越多；很方便就可以把现在的组件，拼接为一个完整的页面
1、注册
2、信息完善
3、开发小程序
4、提交审核和发布
mpvue框架: mpvue 继承自Vue.js，其技术规范和语法特点与 Vue.js 保持一致。
WeUI : WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。
Vue
Vue的核心思想：组件化开发和数据驱动。
Vue生命周期的理解？8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
Vue数据双向绑定主要是指：
数据变化更新视图，视图变化更新数据;
组件之间的传值通信
1.父组件给子组件传值
使用props，父组件可以使用props向子组件传递数据。
2.子组件向父组件通信
父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件。
Vue组件之间的通信
父子组件通信,props、emit、ref调用函数
兄弟组件通信，vuex、eventBus
你使用过Vuex吗？
Vuex是一个专为Vue.js应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
vuex有哪几种属性？
vuex具有五种属性: state、getter、mutation、action、module
vuex的state特性是？
vuex就是一个仓库，仓库里面放很多对象。state就是数据存放地，对应于一般vue对象里面的data；state里面存放的数据是响应式的
vuex的getter特性是？
getters可以对state进行计算操作，可以在多组件之间复用
vuex的mutation特性是？
action类似于mutation，action提价的是mutation，而是不是直接变更状态；
action可以包含任何异步操作
不用vuex会带来什么问题？
可维护性会下降，你要想修改数据，你得维护三个地方
可读性下降，因为一个组件里的数据，你根本看不出来是从哪来的
增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。
Vue 3.0正走在发布的路上，Vue 3.0 的目标是让 Vue 核心变得更小、更快、更强大
说说你对SPA单页面的理解，它的优缺点分别是什么？
SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。
优点：
用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
基于上面一点，SPA相对对服务器压力小；
前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点：
初次加载耗时多：为实现单页Web应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
SEO难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。
v-if和 v-show 区分使用场景
v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show就简单得多， 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。
所以，v-if适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。
computed和 watch 区分使用场景
computed：是计算属性，依赖其它属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
watch：更多的是「观察」的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；
v-for遍历必须为 item 添加 key，且避免同时使用 v-if
（1）v-for 遍历必须为 item 添加 key
在列表数据进行遍历渲染时，需要为每一项item设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。
（2）v-for 遍历避免同时使用 v-if
v-for比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。
vue-router路由模式有几种？
vue-router有3种路由模式：hash、history、abstract
hash:使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
history :依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
abstract :支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。
路由守卫
路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。对此，vue-route提供的 可以方便地实现导航守卫（navigation-guards）。导航守卫（navigation-guards）
全局前置守卫
守卫方法接收三个参数：
to：即将要进入的目标路由对象
from：当前导航正要离开的路由
next：执行下一步
路由独享的守卫
使用方法与全局守卫相同
不同的是：全局守卫可以作用于全局，路由独享守卫只作用于被设置守卫的路由
MVC MVP MVVM的区别？
MVC: MVC之间的数据通信都是单向的。View(视图层)发送指令到controller(控制层)，完成业务逻辑后，要求Model(模型层)改变状态，匠心的数据发送到(view)视图层，用户得到反馈。
MVP:在MVP中，view和model之间没有任何通信关系，所有的通信和业务逻辑都放在presenter层中。View层发送指令到presenter层，presenter层处理业务逻辑，要求model层改变状态，完成状态修改之后，发送指令到presenter层，之后再通知view层做出改变。
MVVM: Model专门用来处理数据模型。View专门用来处理用户视图，ViewModel用来使view和model双向绑定，view的任何变化都会通知ViewModel,而model的任何变化也会通知ViewModel，无论哪一项发生改变，都会使对应的视图/数据模型同时发生改变。
MVVM框架是什么？它和其它框架（Jquery）的区别是什么？哪些场景适合？
MVVM分为Model、View、ViewModel三者
Model代表数据模型，数据和业务逻辑都在Model层中定义
View代表UI视图，负责数据展示
ViewModel负责监听Model中数据的改变并且控制视图更新，处理用户交互操作：
Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步
区别：这种模式实现了Model和 View的数据自动同步，因此开发时这需要要专注对数据的维护操作即可，而不需要自己操作dom 场景：数据操作比较多的场景，更加便捷
组件中data为什么是一个函数？
因为组件是用来复用的，且JS里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。
封装vue组件的过程？
首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模快，解决了我们传统项目开发：效率低、难维护、复用性等问题。
然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据递给父组件。可以采用emit方法。
html css js jQ Es6 ajax
简述javascript的优缺点。
优点：简单易用，与Java有类似的语法，可以使用任何文本编辑工具编写，只需要浏览器就可执行程序，并且事先不用编译，逐行执行，无需进行严格的变量声明，而且内置大量现成对象，编写少量程序可以完成目标；缺点：不适合开发大型应用程序；
JavaScript原型，原型链 ? 有什么特点？
①原型对象也是普通的对象，是对象一个自带隐式的 proto属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。②原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
事件绑定和普通事件有什么区别
①事件绑定就是针对dom元素的事件，绑定在dom元素上②普通事件即为非针对dom元素的事件
事件委托是什么
利用事件冒泡的原理，让自己的所触发的事件，由他的父元素代替执行！
new操作符具体干了什么呢?
①创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。②属性和方法被加入到 this 引用的对象中。③新创建的对象由 this 所引用，并且最后隐式的返回 this 。
你使用过jQuery吗？如果有，你为什么要使用jQuery呢？
1.用过。2.如果使用原生javascript开发的话，会面临很多问题，如浏览器兼容、Ajax数据解析、Dom、事件注册操作等都非常烦锁，而jQuery正好解决了这些问题。3.当然jQuery还有非常有用的其它特性，如为dom对象绑定数据、动画、等。并且jQuery还非常容易扩展，在它的基础上开发非常灵活，也有众多的插件可用，如jQueryUI
Javascript与jQuery有什么区别？
jquery就对javascript的一个扩展，封装，就是让javascript更好用，更简单。
在jQuery中如何注册事件？
使用bind()方法注册事件，但通常我们使用与事件同名的方法注册更方便，如：click()、hover()等。
说一下this
JavaScript函数中的 this 指向并不是在函数定义的时候确定的，而是在调用的时候确定的。换句话说，函数的调用方式决定了 this 指向。
==和 === 的区别？
==会进行隐式转换，比较前将两个被比较的值转换为相同类型。然后比较两个值是否相等
===不进行隐式转换，会比较类型和值
null和undefined的区别？
undefined：类型只有一个，即undefined，当声明变量还未被初始化时就是undefined
null：类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象
正则的i标记与g标记各有何用途？
i：不区分大小写；g：全局匹配。
如何阻止表单提交？
在onsubmit事件中返回false
输入框的验证用什么事件?
change(fn)
如何判断一个变量的值是否为数字？以及有哪些手段判断变量值的数据类型？
全局函数isNaN可以判断一个变量的值是否为数字。
src与href的区别？
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
如何获取一个元素的实际位置？
使用position()或offset()都可以。
bind()、unbind()、hover()有何用途？
bind()：注册特定事件。unbind()：删除特定事件。hover()：同时注册鼠标移入、移出事件。
什么是Ajax？
Ajax（Asynchronous JavaScript + XML），即异步JavaScript + XML的缩写，主要用来页面异步刷新，也是构建RIA的一种基础技术。
谈你对JSON的理解。
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。所以它往往在AJAX中替代XML，交换数据。
你的项目中有使用到跨域吗？你在项目中是如何处理JS跨域问题的？
①有。②主要是使用其它网站提供的javascript api如QQ。使用script的src可以直接读取跨域资源。③当然跨域还有其它处理方式：如代理服务器、改变domain、JSONP等。
解释jsonp的原理，以及为什么不是真正的ajax
①Ajax与JSONP这两种技术看起来很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jQuery等框架都把JSONP作为Ajax的一种形式。②实际上Ajax与JSONP有着本质上的不同。Ajax的核心是通过XMLHttpRequest获取数据，而JSONP的核心则是动态添加<script>标签来调用服务器提供的js文件。③Ajax与JSONP的区别也不在于是否跨域，Ajax通过服务端代理也可以跨域，JSONP也可获取同源数据。
ajax有那些优缺点?如何解决跨域问题?
优点：①通过异步模式，提升了用户体验.②优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.③Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。④Ajax可以实现动态不刷新（局部刷新）缺点：①安全问题 AJAX暴露了与服务器交互的细节。②对搜索引擎的支持比较弱。③不容易调试。跨域问题：jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面。
如何向页面插入节点？
调用append方法，将新节点作为参数。
ajax、get、post、ajaxSetup、getJSON各有何用途？
①ajax：jQuery对ajax执行的核心方法。其它ajax方法都是使用该方法实现。②get：专门用于发送get请求的便捷方法。③post：专门用于发送post请求的便捷方法。④ajaxSetup：设置调用ajax方法时的默认值。⑤getJSON：专门用于向服务器请求json格式数据的便捷方法。
get和post的区别？
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符POST：一般用于修改服务器上的资源，对所发送的信息没有限制。GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。然而，在以下情况中，请使用POST请求：①无法使用缓存文件（更新服务器上的文件或数据库）向服务器发送大量数据（POST 没有数据量限制）。②发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。
清除浮动的几种方式，各自的优缺点
父级div定义height。（2）结尾处加空div标签clear:both。（3）父级div定义伪类:after和zoom。（4）父级div定义overflow:hidden。（5）父级div定义overflow:auto。（6）父级div也浮动，需要定义宽度。（7）父级div定义display:table。（8）结尾处加br标签clear:both。
xhtml和html有什么区别
①HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言②最主要的不同：XHTML元素必须被正确地嵌套。XHTML元素必须被关闭。标签名必须用小写字母。XHTML文档必须拥有根元素。
CSS引入的方式有哪些? link和@import的区别是?
CSS引入的方式包括内联 内嵌 外链 导入link和@import的区别是 ：①link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS；②页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；③import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题；④后者优先级更高
CSS选择器优先级
每个选择器都有权值，权值越大越优先
继承的样式优先级低于自身制定样式
!important优先级最高，js也无法修改
权值相同的时候，靠近元素的样式优先级搞，顺序为内联样式>内部样式表 > 外部样式表
什么是BFC
BFC就是"块级格式化上下文"的意思，创建了BFC的元素就是一个独立的盒子
什么是跨域
协议、端口和域名不一致导致的跨域跨域是因为浏览器需要遵守同源策略，发出的请求即使相应成功，也被浏览器拦截下来。
同源策略
同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互、这是一个用于隔离潜在恶意文件的重要安全机制。
关于闭包闭包就是能够读取其他函数内部变量的函数。主要有两种形式1、函数作为返回值
函数作为参数被传递要到创建这个函数的那个作用域中取值——是“创建”，而不是“调用”
同步，异步？
同步：由于js单线程，同步任务都在主线程上排队执行，前面任务没有执行完成，后面的任务会一直等待。
异步：不进入主线程，进入任务队列，等待主线程任务执行完成，开始执行。最基本的异步操作SetTimemot和SetInterval,等待主线程任务执行完，在开始执行里面的函数。
var，let，const的区别？
var：var的作用域是函数作用域，在一个函数内利用var声明一个变量，则这个函数只在这个函数内有效，存在变量提升。
let：作用域是块级作用域 不存在变量提升，不允许重复定义。
const：一般用来声明常量，且声明的常量是不允许被改变的，声明的时候就赋值，不存在变量提升，不允许重复定义。
箭头函数的特点?
官方解释：箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this
引用箭头函数有两个方面的作用：更简短函数和并且不绑定this
箭头函数不会创建this，它只会从自己的作用域链上一层继承this。
简而言之，箭头函数，永远指向当前调用的对象
箭头函数和普通函数的区别？
箭头函数：
- this指向：箭头函数指向 定义时所在的作用域中的this指向
2.箭头函数作为匿名函数，是不能作为构造函数的，不能使用new
3.箭头函数不能换行
普通函数：
this指向：谁调用就指向谁
有没有使用过css预处理语言？有哪些？介绍一下基本特性和优点？
答：css预处理有sass，less，sylus 三种预处理语言的都有一些共同特性，支持声明css变量，css常量，css函数，混淆、嵌套、引入（@import）等功能。特性和优点：既然支持常量变量和函数，那在原来需要使用js来改变css的场景就不需要大量使用js，样式列表里已经支持加减乘除等其它运算。可以定义全局css块变量，全局字体样式变量。比如主题颜色的切换。大部分内容的标题、内容样式的统一修改。css的嵌套让css代码更简洁更具有层级性更方便维护。
移动端
移动端开发自适应页面如何做？
1、通过meta标签设置viewport，移动端的理想适口。
2、设置rem单位来进行适配、加上Flex布局、百分比布局
rem原理
rem是是指相对于根元素的字体大小的单位
比如设置html font-size=100px;那么1rem=100px;之后的所有元素都可以用这个基准值来设置大小；
rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN
流式布局和响应式布局?
流式布局：使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
响应式布局：利用CSS3中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。
性能优化
图片资源懒加载
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用Vue的 vue-lazyload 插件
路由懒加载
Vue是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。
在vue项目中除了可以在 webpack.base.conf.js中url-loader中设置 limit 大小来对图片处理，对小于 limit 的图片转化为 base64 格式，其余的不做操作。所以对有些较大的图片资源，在请求资源的时候，加载会很慢，我们可以用 image-webpack-loader来压缩图片
网站性能优化
1、内容方面
减少HTTP请求：合并文件、CSS精灵、inline image
使用AJAX缓存
非必须组件延迟加载
未来所需组件预加载
减少DOM元素数量
不要404
2、服务器方面
使用CDN
使用Gzip压缩
Ajax使用GET进行请求
避免空src的img标签
3、CSS方面
将样式表放到顶部
不要使用CSS表达式
4、JavaScript
将脚本放到页面的底部
将JavaScript和CSS从外部引入
压缩JavaScript和CSS
删除不需要的脚本
减少DOM的查询
合理设计事件监听器
5、图片方面
优化图片：根据实际颜色需要选择色深、压缩
优化CSS精灵
不要在HTML中拉伸图片
保证favicon、ico小并且可缓存
6、移动方面
保证组件小于25K
前端性能优化手段？
1.尽可能使用雪碧图
2.使用字体图标代替图片
3.对HTML，css，js 文件进行压缩
4.模块按需加载
5.资源懒加载与资源预加载
6.避免使用层级较深的选择器及减少DOM深度
HTTP状态码
http常见状态码？
405：客户端请求的额方法被禁止
408：服务器等待客户端发送的请求时间过长，超时
200：服务器成功处理了请求
400：客户端发送了一个错误的请求
404：未找到资源
500：服务器内部出现错误
501：服务器遇到错误，使其无法对请求提供服务
响应信息
1xx：临时回应，表示客户端请继续
成功
200 - OK：成功传输
重定向
3xx:当服务器通知客户端请求的目标有变化，希望客户端进一步处理，将使用这些。
客户端错误
4xx:定义客户端错误，这是服务器认为Web浏览器出错的地方。
服务端错误
5xx:定义服务器端错误。尽管客户端提供了有效请求，但这些都是服务器部分发生的错误。
从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)
大概流程:
URL输入
DNS解析
TCP连接
发送HTTP请求
服务器处理请求
服务器响应请求
浏览器解析渲染页面
连接结束
补充
单页面应用和多页面应用的区别及优缺点？
单页面的概念：单页面应用(SPA)，其实就是指只有一个主页面的应用，类似前端现在的三大框架，React.Vue,Angular 浏览器一开始要加载所有必须的html,js css。所有的页面内容都包含在这个所谓的主页面中。
单页面的原理：利用js感知到URL的变化，通过这一点，可以用js动态的将当前的页面内容清除掉，然后将下一个页面的内容挂载到当前的页面上。页面每次切换跳转时，并不需要做html文件的请求，这样就节约了很多http发送延迟，我们在切换页面的时候速度很快。
单页面的优点：
1.加载速度快，用户体验好，内容的改变不需要重新加载整个页面，基于这一点SPA对服务器压力较小。
2.前后端分离
3.页面视觉效果良好
单页面的缺点：
1.不利于SEO（搜索引擎优化）
2.页面初次加载时比较慢
3.页面复杂度提高很多
多页面的概念：多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整个页面都刷新，每次都请求一个新的页面。
多页面的优点：首屏加载时间快，SEO效果好
多页面的缺点：页面切换慢，每次切换页面都需要选择性的重新加载公共资源
HTML与XHTML有什么区别？
1.所有的标记都必须要有一个相应的结束标记
2.所有标签的元素和属性的名字都必须使用小写
3.所有的 XML 标记都必须合理嵌套
4.所有的属性必须用引号 "" 括起来
5.把所有 < 和 & 特殊符号用编码表示
6.给所有属性赋一个值
7.不要在注释内容中使用 "--"
8.图片必须有说明文字
http和https的区别？
https：是以安全为目标的HTTP通道，简单讲是HTTP的安全版本，通过SSL加密。
http：超文本传输协议。是一个客服端和服务器端请求和应答的标准（tcp）,使浏览器更加高效，使网络传输减少。
对web标准及w3c的理解与认识。
标签闭合，标签小写，不乱嵌套，提高搜索机器人搜索几率，使用外链css和js脚本，结构行为表现的分离，页面下载与加载速度更快，内容能被更多的用户和更广泛的设备访问，更少的代码和组件，容易维护，改版方便，不需要改变页面内容，提供打印版不需要复制页面内容，提高网站的易用性。
为什么要初始化样式？
由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异。初始化CSS会对搜索引擎优化造成小影响。
CSS中link和@import的区别是？
Link属于html标签，而@import是CSS中提供的。
在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的CSS。
@import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题。
Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）
SASS、LESS是什么？大家为什么要使用它们？
它们是CSS预处理器。它是CSS上的一种抽象层。它们是一种特殊的语法/语言编译成CSS。
例如Less是一种动态样式语言.将CSS赋予了动态语言的特性，如变量，继承，运算， 函数。LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。
为什么要使用它们？
1.结构清晰，便于扩展。
2.可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
3.可以轻松实现多重继承。
4.完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。
ajax的理解？
ajax的原理：原理：相当于在用户和服务器之间加一个中间层（ajax引擎),使用户操作与服务器响应异步化。
ajax的优点：在不刷新整个页面的前提下与服务器通信维护数据。不会导致页面的重载可以把前端服务器的任务转接到客服端来处理，减轻服务器负担，节省宽带。
ajax的劣势：不支持back。对搜索引擎的支持比较弱；不容易调试 怎么解决呢？通过location.hash值来解决Ajax过程中导致的浏览器前进后退按键失效，解决以前被人常遇到的重复加载的问题。主要比较前后的hash值，看其是否相等，在判断是否触发ajax。
一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
1.图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
2.如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
3.如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
4.如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
5.如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。
rem em px的区别？
px：像素(Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，
em：是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
rem：是CSS3新增的一个相对单位(root em，根 em)，使用 rem 为元素设定字体大小时，仍然是相对大小， 但相对的只是 HTML 根元素。
移动端点透问题，如何解决？
问题：点透问题出现的原因就是移动端click事件300ms延迟问题，当点击上层元素时，先触发touchstart事件，然后在300ms后会触发click事件，而此时上层元素已经消失，所以下边的元素会触发click事件，这就是点透问题。
解决方法：
1.使用一个透明遮罩，屏蔽所有事件，然后400ms（对于IOS来说是个理想值）后自动屏蔽。
2. touchstart换成touchend，因为触发touchend需要200ms所以可以把触发时间这个原理问题解决掉。
3. zepto最新版已经修复了这个问题，或者使用fastclick等通用库。
4.直接使用click，不考虑延迟。
5.下层避开click事件，如a链接改为span等标签，使用js跳转页面。
你知道jQuery插件吗？你了解jQuery执行原理和插件机制吗？你都用过哪些jQuery插件？
①知道jQuery插件。②其原理是扩展jQuery本身及其核心函数的原型实现。可以调用其extend实现对它的扩展。③jQuery插件有很多，常见的有：jQueryUI、jQuery-Cookie、jQuery-Timer等。
什么叫优雅降级和渐进增强？
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
JavaScript的同源策略
概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性。为什么要有同源限制？我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。
哪些常见操作会造成内存泄漏？
①内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。②垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。③setTimeout的第一个参数使用字符串而非函数的话，会引发内存泄漏。④闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
线程与进程的区别
①一个程序至少有一个进程,一个进程至少有一个线程。②线程的划分尺度小于进程，使得多线程程序的并发性高。③另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。④线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。⑤从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
编写一个数组去重的方法
思路：1.创建一个新的数组存放结果2.创建一个空对象3.for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。说明：至于如何对比，就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。代码如下：
Array.prototype.unique3 = function(){
var res = [];
var json = {};
for(var i = 0; i < this.length; i++){
if(!json[this[i]]){
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
}var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3());
为验证手机号写一个正则。
function checkSubmitMobil()
{
if ($("#phoneNum").val() == "") {
alert("手机号码不能为空！");
//$("#moileMsg").html("手机号码不能为空！</font>");
$("#mobile").focus();
return false;
}if (!/))
{
alert("手机号码格式不正确！");
//$("#moileMsg").html("手机号码格式不正确！请重新输入！</font>");
$("#phoneNum").focus();
return false;
}
return true;}
谈谈你对Ajax的理解。你在项目中如何使用Ajax？手写一个简单的Ajax操作。
Ajax（Asynchronous JavaScript + XML），即异步JavaScript + XML的缩写，主要用来页面异步刷新，也是构建RIA的一种基础技术。因为它涉及浏览器兼容、跨域等问题，在项目中一般会使用一些基础类库辅助实现，如jQuery等。一个简单的Ajax操作如下。
var xhr = new XMLHttpRequest();//在环境中需要做浏览器兼容，这里省略了
xhr.onreadystatechange = function() {//这里注册当xhr状态发生改变后调用事件if( xhr.readyState == 4 ) {//通常在读取状态为4的时候才能获取到部分数据
所以一般状态在4的时候才进行处理if(status==200) {
//当正常请求到资源时的处理,
可以调用xhr.responseText或xhr.responseXml获取数据
}
else {
//当请求资源失败时的处理
}
}
}
xhr.open( "GET", url);//设置xhr的请求方式和url,这里使用的是GET方式，
//如果有参数，则连接在url后面
/*
如果是POST请求，还当设置请求的Content-Type
数据使用send作为参数发送
*/
xhr.send();
