以下题目都是在面试过程中整理的 答案不是标准。如有雷同纯属耦合，可与博主及时联系!
1、常用h5标签以及 h5的优势以及 兼容性问题处理
常用：
--新增input类型 search url email tel range number color date time dataTime
--web存储（localStorage sessionStorage）
--表单元素dataList
--表单属性 autocomplete autofocus placeholder requried
--新增h5标签 artical aside details footer header video audio
优势：
--Video radio减少对外部插件的需求（比如 Flash）
--改善用户体验，比如input里的email url在手机页面里调取键盘时候，
--相对于传统表单类型提供了新的验证方式：js中提供的是 邮箱验证checkValidity()；css中提供了 input:valid / input:invalid
--对本地离线存储的更好的支持
--H5完美兼容移动端设备
兼容性问题：
--ie6-8不兼容h5标签： 我们可以引入google的html5.js文件
--移动端click会产生200-300ms的延迟：引入fastclic.js 或者使用zepto的touch事件
--在移动端用position：fixed定位时候如果有定位里要调取键盘，位置会跑偏：不使用 position：fixed 用iscroll
--1像素边框的问题
2、解释一下mvc和mvvm模式？
MVC: 模型-视图-控制器(Model-View-Controller)（Model：模型，数据的拥有者；view：用户界面；controller：负责将view中用户的动作传达给model，将model的数据通过view展现出来；）mvc是单向数据通信model和view永远不能相互通信，只能通过controller传递；controller可以直接读写调用model，model通过notification 和 kvo机制与controller间接通信；controller可以直接与view对话，通过outlet直接操作view，view通过action向controller报告事件的发生，controller是view的直接数据源（数据很可能是controller从model中取得并经过加工了）。Controller是view的代理（delegate），以同步view和controller
MVVM：model--view--viewModel 模型-视图-视图模型 是mvc的增强版，vue.js angularjs 都是mvvm框架
【模型】是指后端传递的数据，用纯javascript对象表示;【视图】指的是所看到的页面;【视图模型】是mvvm模式的核心 是连接view 和model的桥梁。
ViewModel有两个方向：一是将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现方式：数据绑定;二是将视图转化成模型，即将所看到的页面转化成后端数据。实现方式：DOM事件监听主要是监听表单元素
这两个方向都实现的，我们称之为数据的双向绑定。
总结：在mvvm的框架下视图和模型是不能直接通信的。它们通过viewModel来通信，viewModel通常要实现一个observer观察者，当数据发生变化，viewModel能够监听到数据的变化，然后通知到对应的视图做自动跟新（单向绑定）；而当用户操作视图，viewModel也能监听到视图的变化，然后通知数据做改动，这样就实现了数据的双向绑定。
并且mvvm中的view和viewModel可以相互通信
Vue就是基于mvvm模式实现的一套框架，在vue中：Model：指的是js中的数据，如对象，数组等;View：指的是页面视图;ViewModel：指的是vue实例化对象
3、都用过哪些css3属性？
--Border-radius、box-show阴影、background-size、text-shadow文本阴影、word-wrap自动换行、text-wrap:none不允许换行、text-overflow:clip 文本溢出修剪文本、@font-face
--2D转换：transform（移动：translate、旋转：rotate、缩放：scale、翻转：skew()）
--过渡：transition div{transition:all 2s ease 0 2s} 应用过渡的属性名、过渡花的时间、曲线、延迟（前两项必填）
--动画 用@keyframes创建动画 用animation把动画绑定到某个选择器上
@keyframes myfirst{ from{background:red} to{background:yellow}}
div{animation:myfirst 2s}
--线性渐变
4、浏览器兼容性问题
标签兼容性问题：h5标签不兼容 页面里引入html5.js
都处理过哪些css兼容问题？之前处理兼容到IE几？
--垂直居中：vertical-align:middle 不起作用，设置line-height:
--ie6中块状元素设置浮动，同时又设置margin时，会出现双倍边距的问题 例float:left;width:100px;margin:0 100px;
解决： 设置display:inline;把块状元素转换为行内元素
--CSS控制透明度问题：一般就直接 opacity: 0.6 ; IE就 filter: alpha(opacity=60)
但在IE6下又有问题，所以又得弄成 filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
或者引入DDPngMin.js
--ie6下div高度无法小于10px 给div加overflow：hidden
--表单元素行高不一致 不对其，给其设置float
--在a标签里嵌套img时 某些浏览器中img会有蓝色边框 ；给img加border:0或者border:none
--几个图片放在一起默认有间隙 ；给图片加float:left
--按钮默认大小不一致：直用a标签来模拟按钮添加样式 或者 如果按钮是一张背景图片可以直接给按钮加背景图片
--如果父元素宽度是100%；子元素各为50%，总和会超出100%：给右边浮动的元素添加clear:right;
--鼠标指针cursor：hand 只有ie识别其他浏览器不识别：使用cursor :pointer
--如果给上边元素设置了margin-bottom 给下边元素设置了margin-top 浏览器只会识别较大的：只设置一个
--不同浏览器对于标签默认的padding margin 差异较大 我们设置margin:0; padding:0; 来清除默认样式
--浏览器最小字体是12px；如果想设置更小字体 transform scole
--给父元素下的几个子元素设置了display:inline-block 子元素之间会有间距，给父元素加font-size:0
5、原生js兼容性问题？
1>、浏览器本身盒子模型client系列和scroll系列都需要写两套
document.documentElement.clientWidth||document.body.clientWidth
document.documentElement.scrollTop||document.body.scrollTop
2>、获取所有浏览器计算过的样式 getComputedStyle
ie6-8不兼容（window下没有这个属性） 用currentStyle
window.getComputedStyle(box,null).height
box.currentStyle.height
3>、通过类名获取元素：getElementsByClassName,在ie6-8下不兼容
我们需要自己封装一个方法兼容所有浏览器
4>、事件
----e=e||window.event
----e.pageX \ e.pageY ie6-8没有这个属性 我们通过clientY+滚动条卷去的高度来获取
----事件源e.target=e.target||e.scrElement
----阻止浏览器的默认行为 e.preventDefault() 在ie6-8中e.returnValue=false
e.preventDefault?e.preventDefault():e.returnValue=false
----阻止事件冒泡传播 e.stopPropagation
e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
5>、事件监听
addEventListener ie6-8用attachEvent
box.addEventListener(‘click’,fn1,false);
Box.attachEvent(‘onclick’,fn1);
5>、dom节点相关问题 获取元素节点 以下几个ie6-8都不支持 需要用到节点的去处理
nextElementSibling 获取下一个元素节点 nextSibling
previousElementSibling 获取上一个元素节点 previousSibling
firstElementChild 获取第一个元素节点 firstChild
lastElementChild 获取最后一个元素节点lastChild
6、跨域有几种方法解决？解释jsonp原理
1>、jsonp （原生方式实现、jquery的ajax、jquery的jsonp插件）
Jsonp实现原理：引入一个script文件路径是需要调用的跨域的数据地址 将函数名传递给callback，文件载入成功后会执行url中指定的函数，并把我们需要的jsop数据作为参数传递给这个函数
Jsonp缺点：只支持get请求 不支持 post请求
2>、Document.domain+iframe跨域: Document.domain返回当前文件的域名
只适用于主域相同 子域不同的框架之间的交互，
例如：http://www.domain.com/a.html http://child.domain.com/b.html
3>、local.hash+iframe跨域
a欲与b跨域相互通信，通过中间页c来实现，三个页面不域之间利用iframe的location.hash传值，相同域之间直接js访问来通信
4>、Window.name 在一个窗口的生命周期内，窗口杂入的所有页面都是共享一个window.name,每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的
5>、H5的window.postMessage
6>、跨域资源共享 CORS
7>、nginx代理跨域
8>、nodejs中间代理跨域
9>、webSocket协议跨域
注意：如果是跨域并且是post请求 那么我们使用 CORS 跨域资源共享，但是ie9以及以下支持不是很好我们用window.name来实现
参考文章：
https://segmentfault.com/a/1190000011145364 特别全特别好
https://www.cnblogs.com/itmacy/p/6958181.html 还可以这里有三种
http://caibaojian.com/jquery-ajax-post-cors.html post跨域 CORS+window.name
7、怎么做响应式布局？
一种：流式布局法（媒体查询）:
（pc和手机公用一套时：先做一版和设计稿一样的再调其他手机的）容器和盒子的宽度一般都不写，而是用百分比；其余的样式（字体、padding、margin）都按照设计稿的一半设置；对于有些手机下不是很好看的再用media调整
一种：rem响应式布局法（等比布局）推荐
给html设一个font-size值:100px=1rem； 完全按照设计稿的大小来做，将px换算成rem； 用js来设置不同屏幕下的font-size值；
8、媒体查询都可以设置哪些属性？
Width | min-width | max-width()
Height | min-height| max-height(输出设备渲染区域的高度 即 可视区域)
Device-width | min-device-width | max-device-width (输出设备的宽度)
Device-height| min-device-height | max-device-height(输出设备的高度)
Aspect-ratio | min-aspect-ratio | max-aspect-ratio (目标显示区域的宽高比)
eg：min-aspect-ratio:1/1
Device-Aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio(设备的宽高比)
Color|min-color|max-color:颜色
Color-index | min-color-index | max-color-index颜色索引
Monochrome|min-monochrome|max-monochrome黑白
Orientation（landscape|portrait）横屏|竖屏
Resolution分辨率
Scan扫描
grid网格
媒体查询最常用的类型：all（适合所有设备）；screen（计算机屏幕）默认
9 、不同的移动设备怎么适配？
设置meta标签viewport；给html设一个font-size值:100px=1rem； 完全按照设计稿的大小来做，将px换算成rem； 用js来设置不同屏幕下的font-size值；
10、闭包是什么？优势和缺点各是什么？什么情况下会用到闭包？
在函数执行的时候形成一个私有作用域,保护里边的变量不受外界干扰。外面获取不到也修改不了
嵌套函数更能体现出的特性：当一个函数返回它内部定义的一个函数时，就产生了一个闭包，闭包不但包括被返回的函数，还包括这个函数的定义环境（当一个内部函数被其外部函数之外的变量引用时，就形成了一个闭包）。
闭包的用途：
一是实现嵌套的回调函数，
二是实现变量的私有化：js对象没有私有属性，也就是对象的每个属性都是暴露给外部的，这样可能有安全隐患
优势：保护了闭包里的变量不受外界干扰，它是私有的
缺点：闭包使用不当会造成大量内存的堆积
11、优化网站性能
----减少http请求次数（js、css能合并的合并、图片能做成雪碧图的做成雪碧图）；
----使用浏览器缓存（根据服务器端的响应header，设置缓存状态；）
----使用离线缓存（把常用的变动少的js、css、图片存储到localstorage，第二次访问的时候直接走本地缓存，在移动端应用广泛）
----使用压缩组件：传输之前，先使用GZIP压缩再传输给客户端，客户端接收之后由浏览器解压
----图片延迟加载：提高网页打开的速度
----将css样式表放在head头部 (（将css放在头部，防止出现白屏，改善用户体验)
----将js脚本放在底部（嵌入的js放在底部，如果放在head里要放在css前边）;
将js放在底部 减少页面加载的时间，浏览器在下载js的时候会阻止其他一切活动，比如其他资源的下载，内容的呈现，直到js下载、解析、执行完后才开始css、图片的并行下载，因为js中很可能有代码直接改变了dom树结构比如使用document.write或appendChild，甚至是直接使用location.href进行跳转，浏览器为了防止出现js修改dom树，需要重构dom树，所以就会阻塞其他的下载和呈现；
----使用外部的css、js 可以缓存到本地 下次用户访问时候提高页面加载速度;减少内联的css、js
----精简js：剔除不必要的注释、空白符（换行符、tab缩进、空格），减少文件大小、提高加载速度；可以使用ShrinkSafe来精简JS http://shrinksafe.dojotoolkit.org/
----精简css：移除空白、注释、0px改成0、颜色使用缩写#fff、样式最后一个的；不写；
----避免使用滤镜，滤镜会增加浏览器内存的开支，最好使用png图片；
可以使用CSS Compressor http://www.cssdrive.com/index.php/main/csscompressor /
----压缩css js 图片
----减少DOM回流和重绘：js脚本频繁的对DOM进行操作会导致页面重绘和回流，避免使用js来修改页面布局，消耗页面性能（例如 数据绑定时候可以用文档碎片（createDocumentFragment）
----标明宽度及高度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。 当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）
----网址后面加斜杠”/”(加了斜杠会减少一次判断过程，直接返回网站设置的存放在网站根目录下的默认页面)
----精简图片、Flash
对大图片、Flash，要在效果和大小之间做出平衡。
----切分组件到多个域
主要的目的是提高页面组件并行下载能力。但不要跨太多域名，建议采用2个子域名。
----使用事件代理
如果一个div中有10个按钮 不需要给每个按钮加事件绑定，给div加事件绑定就可以了，事件冒泡时可以捕捉到事件，并判断是哪个事件发出的
----减少dom元素的数量
一个复杂的页面意味着需要下载更多数据，同时也意味着JavaScript遍历DOM的效率越慢
--不要出现404错误
--避免使用滤镜
参考网址：
http://www.360doc.cn/article/5054188_179121203.html
https://www.jianshu.com/p/897569276fdf
11、怎样编写高性能的javascript
--手动释放没有用的对象内存 obj=null
--解绑那些不再需要的事件监听器，尤其是那些即将被销毁的DOM对象所绑定的事件监器
--减少对DOM的操作，减少dom的回流和重绘。例如：往页面里绑定dom元素的时候可以使用createDocumentFragment一次性添加到页面里，而不是一条一条的添加
--使用惰性思想，解决每次都要进行判断这个问题；例如：为了兼容标准浏览器和ie浏览器，我们每次都需要对浏览器环境进行一次判断，用惰性思想只需判断一次即可
--变量尽量使用局部变量，避免使用全局变量，函数内的变量函数执行完后就会销毁，而全局变量页面关闭或刷新才会销毁，而且污染全局变量
--处理浏览器兼容性问题的时候，我们尽量避免使用try catch 因为不管当前是浏览器兼不兼容都需要先把try中的代码执行一遍，降低了性能。我们可以判断当前浏览器中是否存在这个属性方法，存在就兼容 不存在就不兼容，或者判断浏览器版本号；常用的是第二种方法
--函数内部不要返回一个未声明的变量，会污染外部变量，会使速度变慢
--在存储数据的时候能使用数组就不使用对象，因为变量对象要比遍历数组快的多，内存方面也高效
--使用对象时的技巧：使用一个构造函数来创建对象。这将确保它创建的全部对象具有同样的隐藏类，并且有助于避免更改这些类，速度也快于Object.create（）
--使用模块模式缓存函数，性能要优于原型模式
--使用数组时候，尽量不要删除数组元素，这样改变了数组的索引和解构性能就会变慢，可以把数组最后一项拿过来替换当前项，再删除数组最后一项
--尽量不要使用for-in循环访问数组，建议用for循环 并且将for循环里的ary.leng保存在一个变量里，不然每次都要计算
--获取dom对象要进行缓存，不要每次都去获取
参考网站：https://www.cnblogs.com/yjbjingcha/p/7029057.html
12、jquery中this和$(this)的区别
This表示的是javascript提供的当前对象
$(this)表示的是用jquery封装好的当前对象
13、移动端和pc端有什么区别？
兼容性：pc要考虑的兼容性更多一些；移动用的是webkit内核 需要考虑的兼容性少一些，更多考虑的是不同手机分辨率的适配；
布局：移动端要做到自适应我们用rem布局
动画：pc端对于css3动画不兼容，但在移动端我们要做一些动画、特效用css3简单又高效
框架上：pc用的是jquery；移动用的是zepto，更小一些
事件：移动端多出来的是触屏事件，而缺少hover事件，移动端 弹出手机键盘的处理
操作方式：pc端使用鼠标操作相对单一（左击、右击、双击、滑动）交互效果少；移动端手指操作（点击、滑动、双击、双指放大、双指缩小、五指收缩、苹果最近的3Dtouch按压力度、摇一摇）；
屏幕尺寸：移动端设备大，容错性高一些；移动端相对来说屏幕小，操作局限性大，这样在设计上可用的空间尤得珍贵
传感器：移动端的（压力、方向、重力、GPS、NFC、 指纹识别、3Dtouch、陀螺仪）
14、同步和异步的区别
Javascript是单线程的，单线程意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务，所有任务分为两种，一种是同步任务，一种是异步任务
同步：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步：不进入主线程而进入“任务队列”的任务，只有等主线程任务执行完毕，”任务队列“开始通知主线程请求执行任务，该任务才会进入主线程执行
定时器、事件绑定、ajax读取数据的时候一般都设置为异步编程、回调函数
15、es6都用过哪些？
1>、Let变量、const常量 是块级作用域（只对当前函数内部、代码块内容有效）即{}大括号的代码块就是let和const的作用域
2>、模板字符串``反引号 ：将表达式嵌入字符串中进行拼接 用${}来界定：`hello ${name}`
const template=`<div> <span>nihaoaaaaa</span></div>`
3>、includes 判断是否包含 然后返回布尔值 str.includes(‘y’)
4>、repeat 获取字符串重复n次 s.repeat(3);获取s字符串并重复3次
5>、函数：为我们提供了默认值：function action(num=300){}
箭头函数：不需要function 省略return 继承上下文的this
当你有且只有一个参数时候可以省略(),只有一个表达式时候可以省略{} [1,2,3].map(x=>x+1)
6>、键值对重名可简写
7>、使字面量赋值更简洁：
const people={
name:"liu",
getName:function(){
Console.log(this.name)}}
const people={
name:"liu",
getName(){
console.log(this.name)}}
8>、数组和对象不用一个一个的提取：解构
9>、导入import 导出 export
全部导入：import people from ‘./example’
将整个模块当作单一对象进行导入：该模块所有导出都会作为对象的属性存在
Import * as example from “./example.js”
Console.log(example.name)
Console.log(example.age)
Console.log(example.getName())
部分导入
Import {name,age} from ‘./example’
导出默认 有且只有一个默认
export default App
导出部分
Export class App extend Component{}
16、 html语义化的理解？
Html语义化是正确的标签做正确的事情；
有利于搜索引擎优化提高网页权重；便于开发者阅读维护提高效率；清楚的看出网页结构增强可读性；
例如：p是段落；h1-h5是标题；ul、ol是无序列表；nav是导航；header页眉；footer页脚；strong强调；em斜体
17、jquery 和zepto的区别
1>、jquery主要用于pc，zepto主要用于移动端
2>、jquery中提供了很多选择器类型和dom操作方法，但zepto中只是先了部分常用的选择器和方法：eg：jq中的动画方法有（animate、hide、show、toggle、fadeIn、fadeOut、fadeTaggle、slideDown、slideUp、slideToggle），但zepto中只有animate
3>、zepto比jq小的多
4>、zepto的animate动画方法支持了css动画
5>、zepto专门准备了移动端常用的事件操作：tap（点击）、singleTap（单击）、doubleTap（双击）、longTap（长按）、swipe（滑动）、swipeUp、swipeDown、swipeleft、swiperight
18、从地址栏输入url后到页面渲染说一下具体过程？能说多细就说多细（未写完）
域名解析（首先搜索浏览器自身的DNS缓存，看自身缓存中有没有对应的域名，看有没有过期，如果没有 浏览器会找操作系统自身的DNS缓存，如果没有尝试读取host文件）；
先向DNS发送一条请求->找到外网的ip和端口号----->再通过外网的ip和端口号找到这台服务器----->找到服务器对应的端口号，服务器接收到请求后把请求页面中的源代码返回给客户端，浏览器接收到源代码后按照w3c规范进行解析并请求html页面中的（css、js、图片）--最后浏览器对页面进行渲染
19、什么是事件冒泡？ 什么是事件委托？
事件冒泡：从当前触发的事件目标一级一级往上传递，依次触发，直到document为止
事件委托：利用事件的冒泡机制，将事件委托给更大范围的DOM元素，提高了性能（我们可以给整个页面指定一个onclick事件处理程序，而不必给每个可单击的元素分别添加事件处理程序）
20、js怎样添加、移除、移动、复制、创建和查找节点
(1) 创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
(2) 添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
(3) 查找
getElementsByTagName()
getElementsByName()
getElementById()
(4) 移动节点
odiv.style.left=parseInt(odiv.style.left)+50+”px”
<div id=’odiv’ style=’position:absolute;left:10px’></div>
21、您对js原型是如何理解的？您对js继承是如何理解的？举例说明js的继承
This：
This表示当前对象；
如果在全局范围内使用this，这指当前页面对象window；
如果在函数中使用this，函数运行时在什么对象上被调用；
（自执行函数中的this永远是window；给dom元素绑定方法方法执行时里边的this是当前元素；方法执行时看前边有没有点 点前边是谁方法中的this就是谁；类中的this是当前类的实例；call apply bind 对可以改变this关键字一旦遇到他们以前4条都没用）
Prototype：
prototype本质上还是一个javascript对象；每一个函数都有一个默认的prototype属性；如果这个函数被用在创建自定义对象的场景中，我们称为构造函数。
作为类比js中的内部的数据类型 -字符串（String）、数字（Number）、数组（Array）、对象（Object）、日期（Data）都是作为构造函数来实现的
例如数组中的许多方法（concat、join、push）都是在prototype中定义的，如果我们修改了这些类的原型，那些预定义的方法就消失了，但我们可以向其中添加自己的扩展方法（如果用for in方法循环数组里的每一项的时候，扩展的方法也会被循环出来，我们需要这样做arr.hasOwnProperty(i) ）
Constructor:
每一个函数都有一个默认的属性prototype，而这个prototype上有一个constructor默认指向这个函数；如果我们重新定义了函数的prototype，那么construction就不再指向这个函数，我们可以在这个函数的原型上扩展方法或者重新覆盖下Person.prototype.constructor=Person;
22 、什么是原型的继承
1>、原型继承是我们js中常用的一种继承方式；
2>、子类B想要继承父类A中所有的属性和方法（私有+公有）只需让B.prototype=new A 即可
3>、原型继承的特点：它是把父类中私有+公有的都继承到了子类的原型上（子类公有）
核心：原型继承并不是把父类中的属性和方法克隆一份一模一样的给B，而是让B和A之间增加了原型链的链接，以后B的实例n想用A中的getx方法，需要一级一级向上查找
23、数组5中迭代方法：
every()：对数组中每一项执行函数，如果每一项都返回true，则该方法返回true
some()：对数组中每一项执行函数，只要有一项返回了true，则该方法返回true
filter()：对数组中的每一项执行函数，把里面返回true的项，组成一个数组返回
forEach()：对数组中的每一项执行函数。没有返回值。类似于for循环
map()：对数组中的每一项执行函数，返回（处理后的）每一项
注：5种方法都不会改变数组本身；函数都接收三个参数（数组中的每一项、每一项的索引值、数组对象本身）
var arr=[1,2,3,4,5];
var res=arr.every(function(i,index,o){ return i>2;});
console.log(res) //false
24、类数组转化为数组：
Array.prototype.slice.call(arguments);
25 、cookie不设置过期时间，默认过期时间是多少？
关闭浏览器就结束了
26、怎样解析后台返回来的json格式的数据（JSON格式的字符串转化为JSON格式的对象）
JSON 格式的字符串 var str1=’{“name”:”haorooms”,”sex”:”man”}’;
JSON 格式的对象 var str1={“name”:”haorooms”,”sex”:”man”};
JSON 格式的字符串转化成JSON格式的对象
var obj=eval(‘(’+str+’)’);
Var obj=JSON.parse(str);
Var obj=str.parseJSON();//需要引入json.js库
Var obj=$.parseJSON();//jquery里自带的
JSON 格式的对象转化成JSON格式的字符串
Var last=JSON.stringify(obj);
Var last=obj.toJSONString();//需要引入json.js库
27、网络状态码
200或以2开头 代码请求已成功被服务器接收
3xx 系列 用来重定向的 301永久重定向、302临时重定向、304本次读取的内容是读取缓存中的数据
4xx 系列 客户端请求错误 400 客户端传递给服务器的参数出现错误、401无权限访问、404客户端访问的地址不存在
5xx 系列 服务器的错误 500 未知的服务器错误、503服务器已经超负荷
28、用到哪些css插件
Bootstrap、animate.css
29、http请求信息由哪三部分组成
请求方法URI协议/版本、请求头、请求正文
30、清理网站缓存的方法
meta方法
Jauery Ajax清除浏览器缓存：cache：false 或者 url参数后加随机数或加随机时间
31、数据类型检测的四种方式
1)、 typeof 返回的是字符串 ”number” , ”boolean” , “string” , “undefined” , “function” , “object” 用途检测参数是否传值 或者检测参数是不是function
局限性：不能区分数组，对象、正则，因为返回的都是”object”
2)、instanceof 检测一个实例是否属于某个类：
局限性：只要在当前实例的原型链上，我们检测出来的结果都是true；
对于基本数据类型，字面量方式无法检测，可以检测出实例创建的方式，只有实例方式创建出来的才是标准的对象数据类型值，也是Number这个类的一个实例
3)、constructor构造函数 可以检测基本数据类型；也可以检测出是数组、正则、对象 （正好解决了instanceof第一个局限 和typeof的局限）
局限性：如果把类的原型重写 覆盖掉 检测结果就不准确了
4)、Oject.prototype.toString.call()最全的方式
[object object] 第一个object代表当前实例是对象数据类型，
第二个object代表的是obj所属的类是object
toString方法：对于Number、String、Boolean、Array、RegExp、Date、Function原型上的toString方法都是把当前当前类型转换成字符串的类型
Object.prototype.toString不是用来转换为字符串的
eg:
var arr=["a","b","c"]
console.log(Object.prototype.toString.call(arr)==="[object Array]") //true
32、js数组主要有哪些方法：
Shift()、unshift()、pop()、push()、concat()、splice(1,5)、slice()、reverse()、sort()
Map /forEach indexOf /lastIndexOf toString把数组转换为字符串
join按照分割符把数组中的每一项拼接成一个字符串
33、左边固定 右边自适应的布局
方法一：左侧设置左浮动，右边设置100%
方法二：flex布局
方法四、左侧绝对定位 右侧margin-left
34、本地存储的方案
1>、传统：
Cookie：把信息存储到客户端的浏览器中（但是项目服务器端也是可以获取到cookie的）
Session：把信息存储到服务器上
2>、html5：webstorage
Localstorage：永久存储到客户端的本地
SessionStorage：属于临时的会话存储，信息的会话存储，会话窗口存在信息存在，会话窗口关闭信息就消失了。
Cookie和localstorage的区别：
-----存储内容的大小
-----兼容性：cookie兼容所有浏览器，localstorage不兼容ie6-8
----存储时间限制：cookie存储的内容有时间限制，localstorage是 永久存储到本地
-----用户可能出于安全的角度禁用cookie（无痕浏览器）但是不能禁止localstorage
------应用：cookie用于存储用户名密码，localstorage用于存储js、css源代码
34、手机网站遇到的兼容性问题
1>、网站的头部或者底部使用了positon定位，如果定位区域还要调取键盘的话就会出现很多问题，因为移动端浏览器对手机都支持不好。解决：这个问题就是不用position定位，使用局部滚动isscroll.js
2>、移动端使用click会存在300ms延迟：浏览器在第一次点击结束会，还需要等到300ms看是否触发第二次点击，如果触发了第二次点击就与click事件了。解决：用fastclick.js或者用zepto.js的touch模块
3>、对于非可点元素如（select、span）监听click事件，ios下不会触发，css增加cursor:pointer即可
4>、在ios和andriod中，audio、video元素无法自动播放：给html绑定touchstarch事件
35、manifest离线存储 怎么刷新？
用户清空缓存；manifest文件被修改；由程序来更新
36、webpack是做什么用的？
Webpack是一个模块打包器，
将多种静态资源js、css、less换成一个静态文件，减少了页面请求，
Webpack本身只能处理javascript文件，如果要处理其他类型的文件，就需要使用loader进行转换
37、实现不定高度元素垂直居中的几种方法 其中有个flex
参考网址：https://mobile.tangshuang.net/3197.html
方法一：
Parent{ Position:relative }
Child{ Position:absolute;Top:50%;Transform:translateY(-50%)}
方法二：flex方法
.container { display: flex; align-items: center; justify-content: center;}
<div class="container">
<div class="inner">
this is a box fixed in center of screen<br>The second line
</div>
</div>
简单解释一下，当display: flex时，表示该容器内部的元素将按照flex进行布局。align-items: center表示这些元素将相对于本容器水平居中，justify-content: center也是同样的道理垂直居中。对.container赋予了这些样式之后，作为它的内部元素.inner自己自觉的居中了。而且这里你会发现，由于没有使用text-align: center，.inner里面的文字是不会居中的，也就是说仅仅.inner这个容器居中而已。
38、浮动元素垂直居中：
1、（父盒子有宽高）父元素为position：relative 子元素：position:absolute; top:50%; left:50%;margin-left:-宽度一半
2、（父盒子没有宽高） 父元素为position：relative 子元素：position:absolute; margin:auto; top:0;left:0;right:0;bottom:0
39、写出你所知道的css选择器
参考网址：https://m.baidu.com/from=1013672b/bd_page_type=1/ssid=0/uid=0/pu=usm%402%2Csz%401320_1004%2Cta%40iphone_2_7.1_11_9.2/baiduid=FF28D2DDA660A06D0F18E70D2FBBBD3F/w=0_10_/t=iphone/l=3/tc?ref=www_iphone&lid=6332165674989771974&order=2&fm=alop&isAtom=1&is_baidu=0&tj=www_normal_2_0_10_title&vit=osres&m=8&srd=1&cltj=cloud_title&asres=1&title=CSS%E9%80%89%E6%8B%A9%E5%99%A8%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C&dict=32&wd=&eqid=57e05f21d4afdc00100000035bf2318b&w_qd=IlPT2AEptyoA_yi7D6EouwmuJExSm7ooqjwYpePUuAG&tcplug=1&sec=34299&di=4324426a0babbe3e&bdenc=1&nsrc=IlPT2AEptyoA_yixCFOxXnANedT62v3IEQGG_zcHATm7ok_rxP4kHRhdXHKhVniJEFPwwiPQpsxCg6fcOjpzidYYbu6qgihf
1>、标签选择器：p{list-style:none}
2>、类class选择器 .box{width:100px}
3>、id选择器 #box{width:100px}
4>、通配符选择器（*） *{margin:0}
5>、组合选择器 .box,.header{}
6>、后代选择器 li a{}
7>、子选择器ul > li
8>、伪类选择器：a标签里的hover,active,link,visited
9>、相邻选择器（h1+p）
10>、属性选择器（a[rel="external"]）
a[src^=”https”] 选择其src属性值以”https”开头的每个元素
a[src$=”.pdf”] 选择其src属性值以”.pdf”结尾的所有元素
a[src*=”abc”] 选择其src属性中包含”abc”子串的每个元素
哪些属性可以继承？
Font-family、font-size、font-style、color、line-height、list-style、text-indent、text-align...
哪些属性不可继承
Margin border width height padding background position left right top bottom...
优先级的算法：
用!import可以改变优先级别为最高，其次是style对象，然后是 id>class>tag,另外同级样式按照声明的顺序后出现的顺序具有最高优先级
40、编写一个类和类继承，类名为Person，含有属性 name,age,含有方法sayhello，编写一个Student类，继承自Person，自由属性score，自有方法study
41、什么叫做类数组
类数组是对象数据类型的。
以正整数作为索引，索引逐级递增，索引代表的是当前对应的某一个元素。
还有一个length的属性代表类数组的个数
通过getElementsByTagName getElementByClassName 获取的都是类数组 函数里的arguments
42、字符串的方法 String
1.charAt(索引) 获取指定索引位置的字符 str.charAt(8)
2.subStr(n,m) 从索引开始截取m个
3.SubString(n,m)从索引n开始找到索引为m处（不包含m），把找到的以字符串方式返回
4.slice(n,m) 从索引n开始找到索引为m处（不包含m），把找到的以字符串方式返回 支持负数作为索引
5.indexOf/lastIndexOf str.indexOf(“!")
6、toLoweCase/toUpperCase
7.replace 替换 str.replace(“liu”,”刘”) str.replace(“/liu/g”,”刘”) 在不适用正则的情况下只能替换一次
8. split 按照指定字符 分割成数组（例如时间的格式化）
43、获取[n-m]之间的随机整数
Math.round(Math.random()*(m-n)+n)
44、ajax属性jquery
type 请求方式 get post
datatype 服务器返回的数据类型xml html script jsonp json text
contentType 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
beforeSend
在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。
45、事件流分为哪几个阶段
捕获阶段：从外向里依次查找元素
目标阶段：当前事件源本身的操作
冒泡阶段：从内到外一次触发相关的行为（我们最常用的就是冒泡阶段）
DOM0级事件只能这些方法在冒泡阶段执行，怎么控制在捕获阶段完成，我们用DOM2级事件
addEventListener-->第一个参数是行为的类型， 第二个参数是给当前的绑定的方法，第三个参数是控制在哪个阶段发生：true 在捕获阶段发生 false在冒泡阶段发生
document.body.addEventListener("click",function(){
console.log("body");
},false);
46、编写一个复制对象值的方法
参考网址：https://www.cnblogs.com/libin-1/p/6845458.html
复制对象有 浅复制、深复制。
浅复制：没有办法真正复制一个对象，只是保存了该对象的引用地址，一旦原对象的值改变，复制的对象值也会改变
深复制可以实现真正的复制一个对象。
浅复制方法：Es6里Object.assign的第一个参数是目标对象可以是一个或者多个
Let target={a:123};
Let source1={b:456};
Let source2={c:789,d:{e:”lovely”}}
Left obj=Object.assign(target,source1,source2);
Console.log(obj)==>{a:123,b:456,c:789,d:{e:”lovely”}}
Source2.d.e=”hello”;
Console.log(obj)==>{a:123,b:456,c:789,d:{e:”hello”}}//源对象改变，它也改变了
深复制方法：先将对象转换成字符串 再将字符串转换成对象
let source2={c:789,d:{e:"lovely"}}
let obj2=JSON.parse(JSON.stringify(source2));源对象怎么改都不会影响到它
(还可以用递归编写一个方法)
47、box-sizing属性
box-sizing属性包括content-box（default），border-box，padding-box。
1、content-box，border和padding不计算入width之内
2、padding-box，padding计算入width内
3、border-box，border和padding计算入width之内，
48、页面渲染过程
参考网址：https://m.jb51.net/show/105026
1.解析HTML文件，创建DOM树
自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
2.解析CSS
优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；
3.将CSS与DOM合并，构建渲染树（renderingtree）
DOM树与HTML一一对应，渲染树会忽略诸如head、display:none的元素
4.布局和绘制，重绘（repaint）和重排（reflow）
重排：若渲染树的一部分更新，且尺寸变化，就会发生重排；
重绘：部分节点需要更新，但不改变其他集合形状。如改变某个元素的颜色，就会发生重绘。
49、Jquery上获取宽度的三个函数
width()返回元素的宽度
innerWidth()返回元素的宽度 包括内边距
outerWidth()返回元素的宽度 包括内边距和边框
outerWidth(true)返回元素的宽度 包括内边距、边框、外边距
50、Jquery上两种扩展方法
参考网址 https://www.cnblogs.com/gaoyukun/p/8823549.html
$.extend();
(function(){
$.txtend({
get:function(name){
Console.log(name);
}
})
})();
调用的时候 $.get(“liu”); //调用时直接$.函数名(参数);
$.fn.extend();
(function(){
$.fn.extend({
get:function(name){
Console.log(name);
}
})
})()
$(“button”).get(“liu”); /调用时要$(标签名).函数名();
