1.介绍一下你的技术栈
HTML5 + CSS3 + ES6 + Jquery + React + Webpack + git + npm ....
2.简单自我介绍
3.电商网站怎样做优化，提高加载速度？
4.什么是同源策略，如何实现跨域？
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。若地址里面的协议、域名和端口号均相同则属于同源。
如何实现跨域？
jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端设置http header、后端在服务器上设置cors。
1.jsonp实现跨域
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
// 传参并指定回调执行函数为onBack
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
function onBack(res) {
alert(JSON.stringify(res));
}
</script>
2.跨域资源共享（CORS）
https://segmentfault.com/a/1190000011145364
5.什么CSS放前面，JS脚本放后面？
下载某一个js时其他任务是暂停的，需要等这个JS下载并执行完毕后再下载其他的。
6.http协议中 GET和POST有什么区别，分别适用什么场景？
7. http 状态码 200 302 304 403 404 500分别代表什么？
1 消息类
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
2 成功
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
3 重定向
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
4 错误，一般是指客户端错误
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
5 6 服务器错误
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
8.什么是XSS CSRF攻击，如何防范？
9.一个页面从输入URL到加载显示完成，这个过程发生了什么？
简洁版：
1.浏览器根据请求的URL交给DNS域名解析，找到真实的IP，向服务器发起请求；
2.服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、CSS、JavaScript等）；
3.浏览器对加载到的资源（HTML、CSS、JavaScript等）进行语法解析，构建相应的内部数据结构（DOM树、CSS树、render树等）；
4.载入解析到的资源文件、渲染页面、完成。
详细版：
1.首先浏览器开启一个线程来处理这个请求，对URL分析判断，如果是http协议就按照Web方式来处理；
2.其次浏览器会对URL进行解析，一般包括（协议头、主机域名或IP地址、端口号、请求路径、查询参数、hash等），然后开启网络线程发出一个完整到http请求；
3.当然一般我们输入的URL是服务器域名，这时就需要DNS通过域名查询得到对应的IP；
4.DNS首先会查看浏览器DNS缓存，没有就查询计算机本地DNS缓存，还没有就询问递归式DNS服务器（即网络提供商，一般这个服务器都会有自己的缓存，所以IP查询一般在这里完成），如果没有缓存，那就需要通过根域名和TLD域名服务器指到对应的权威DNS服务器找回记录，并缓存到递归式服务器，然后递归服务器在将记录返回给本地。
5.有了IP地址，此时网络层便会通过IP地址寻的对应服务器的物理地址
6.寻得服务器地址，客户端在网络传输层便可以和服务器通过三次握手建立tcp\ip连接
7.连接建立后网络数据链路层将数据包装成帧；
8.最后物理层利用物理介质进行传输；
9.到了服务器，就会通过相反的方式将数据一层一层的还原回去；
10.请求到了后台服务器，一般会有统一的验证，如安全验证、跨域验证等，验证未通过就直接返回相应的http报文
11.验证通过后，就会进入后台代码，此时程序收到请求，然后执行对应的操作（如查询数据库等）；
12.如果浏览器访问过，且缓存上有对应的资源，便会与服务器最后修改时间对比，一致便返回304，告诉浏览器可使用本地缓存；
13.前端浏览器接收到响应成功的报文后便开始下载网页
14.下载完的网页将被交给浏览器内核（渲染进程）进行处理：
1. 根据顶部定义的DTD类型进行对应的解析方式；
2. 渲染进程内部是多线程的，网页的解析将会被交给内部的GUI渲染线程处理；
3. 首先渲染线程中的HTML解释器，将HTML网页和资源从字节流解释转换成字符流；
4. 再通过词法分析器将字符流解释成词语；
5. 之后经过语法分析器根据词语构建成节点；最后通过这些节点组建一个DOM树；
6. 这个过程中，如果遇到的DOM节点是JavaScript代码，就会调用JavaScript引擎对JavaScript代码进行解释执行，此时由JavaScript引擎和GUI渲染线程的互斥，GUI渲染线程就会被挂起，渲染过程停止；如果JavaScript代码的运行中对DOM树进行了修改，那么DOM的构建需要从新开始；
7. 如果节点需要依赖其他资源，如（图片，CSS等），便会调用网络模块的资源加载器来加载它们，但它们是异步的，不会阻塞当前DOM树的构建；
8. 如果遇到的是JavaScript资源URL（没有标记异步），则需要停止当前DOM的构建，直到JavaScript的资源加载并被JavaScript引擎执行后才继续构建DOM；
9. 对于CSS，CSS解释器会将CSS文件解释成内部表示结构，生成CSS规则树；
10. 然后合并CSS规则树和DOM树，生成render渲染树；
11. 最后对render树进行布局和绘制，并将结果通过IO线程传递给Browser控制进程进行显示。
10.常用正则表达式
//验证邮箱
/^w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
//验证手机号
/^1[3|5|8|7]d{9}$/
//验证URL
/^http://.+./
//验证身份证号码
/(^d{15}$)|(^d{17}([0-9]|X|x)$)/
11.什么是渐进增强和优雅降级？
* 渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
* 优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
12.请解释什么是事件代理
* 事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能
13.常见浏览器内核有哪些？
* Blink内核：新版 Chrome、新版 Opera
* Webkit内核：Safari、原Chrome
* Gecko内核：FireFox、Netscape6及以上版本
* Trident内核（又称MSHTML内核）：IE、国产浏览器
* Presto内核：原Opera7及以上
14.请说说对MVC，MVP和MVVM的理解
* MVC即model\view\controller，是最常见的软件架构模式。view是指用户界面，controller则处理业务逻辑，而model则用来存储数据。view传送指令到controller，controller完成业务逻辑后要求model改变状态，model将新数据发送给view，使用户得到反馈。各部分的通信都是单向的。
* MVP将controller改为presenter，在这种模式中，各个部分之间的通信都是双向的。view与model不发送直接联系，都通过presenter传递。view非常薄，不部署任何业务逻辑，而presenter非常厚。
* MVVM将presenter改为viewModel，和MVP模式非常相似，唯一的区别在于它是双向绑定，view改变，自动反应在viewModel上，反之亦然。
15. 重绘和回流（考察频率：中）
* 重绘：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
* 回流：当Render Tree（DOM）中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
回流要比重绘消耗性能开支更大。
回流必将引起重绘，重绘不一定会引起回流
16.浏览器渲染页面过程：
* 根据 HTML 结构生成 DOM 树
* 根据 CSS 生成 CSSOM
* 将 DOM 和 CSSOM 整合形成 RenderTree
* 根据 RenderTree 开始渲染和展示
* 遇到script标签时，会执行并阻塞渲染
17.介绍一下你对浏览器内核的理解
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
* 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
* JS引擎则：解析和执行javascript来实现网页的动态效果。
* 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
18.你有用过哪些前端性能优化的方法？
（1） 减少http请求次数：CSS,Sprites,JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。
19.如何做SEO优化？
(1)网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。
1. 控制首页链接数量
2.扁平化的目录层次，尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页
3.导航优化
4. 网站的结构布局--不可忽略的细节
页面头部：logo及主导航，以及用户的信息。
页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。
页面底部：版权信息和友情链接。
特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。
5.控制页面的大小，减少http请求，提高网站的加载速度。
一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。
(2)网页代码优化
1.<title>标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的<title>标题中不要设置相同的内容。
2.<meta keywords>标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
3.<meta description>标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
4.<body>中的标签：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，<nav>标签是用来设置页面主导航的等。
5.<a>标签：页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
6.正文标题要用<h1>标签：“蜘蛛” 认为它最重要，若不喜欢<h1>的默认样式可以通过CSS设置。尽量做到正文标题用<h1>标签，副标题用<h2>标签, 而其它地方不应该随便乱用 h 标题标签。
8.表格应该使用<caption>表格标题标签
9.<img>应使用 "alt" 属性加以说明
10.<strong>、<em>标签 : 需要强调时使用。<strong>标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，<em>标签强调效果仅次于<strong>标签。
（二）HTML部分：
1.HTML5新标签有哪些？
答：
* 绘画 canvas
* 用于媒介回放的 video 和 audio 元素
* 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
* sessionStorage 的数据在浏览器关闭后自动删除
* 语意化更好的内容元素，比如 article、footer、header、nav、section
* 表单控件，calendar、date、time、email、url、search
* 新的技术webworker, websocket, Geolocation
2.常用meta标签有哪些？
<!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection"content="telephone=no, email=no" />
其他meta标签
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
3.viewport属性
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 设置viewport宽度，为一个正整数，或字符串‘device-width’
// device-width 设备宽度
// height 一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale 默认缩放比例（初始缩放比例），为一个数字，可以带小数
// minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable 是否允许手动缩放
4.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
* cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
* cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递
* sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
* cookie数据大小不能超过4k
* sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
有期时间：
* localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
* sessionStorage 数据在当前浏览器窗口关闭后自动删除
* cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
5.什么是语义化，为什么要语义化，谈谈你的理解
HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构
css命名的语义化是指：为html标签添加有意义的class
为什么需要语义化：
1.去掉样式后页面呈现清晰的结构
2.盲人使用读屏器更好地阅读
3.搜索引擎更好地理解页面，有利于收录
4.便团队项目的可持续运作及维护
简述一下你对HTML语义化的理解？
1.用正确的标签做正确的事情。
2.html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
3.即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
4.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
5.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
6.label 的作用是什么？怎么使用的？
label标签来定义表单控件的关系：
当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上
使用方法1：
<label for="mobile">Number:</label>
<input type="text" id="mobile"/>
使用方法2：
<label>Date:<input type="text"/></label>
（三）CSS部分：
1. 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
* 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
* 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
2.什么是 CSS3 Flex 弹性盒子模型布局，有哪些属性
答：
* 一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
* 较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
* 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
* 它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
* 常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。
* 在布局上有了比以前更加灵活的空间。
3.CSS3 有哪些新属性
答：1.transform 元素变形效果
2.transition 过渡效果
3.animation 动画效果
https://www.cnblogs.com/wuyanliang/p/5862643.html
4.CSS 有哪些选择器
答：1.标签选择器 (p li div)
2.类选择器 (.first .top)
3.ID选择器 (#test #word)
4.相邻选择器（h1 + p）
5.后代选择器 (li a)
6.属性选择器 (a rel=["external"])
7.伪类选择器 (:hover)
8.通配符选择器 (*)
哪些属性可以继承?
color,font-size,font-family
5.display 有哪些值
答：* block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
* none 缺省值。象行内元素类型一样显示。
* inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
* inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
* list-item 象块类型元素一样显示，并添加样式列表标记。
* table 此元素会作为块级表格来显示。
* inherit 规定应该从父元素继承 display 属性的值。
6.display:none 和 visibity: hidden 有什么区别
都是隐藏元素，但是前者文档布局中不占用空间，后者仍占用空间
display：none隐藏产生reflow和repaint(回流与重绘)
前者有株连性，即父元素设置display: none后子元素不管怎样设置都不能显示，而后者的子元素通过设置visibility: visible后还是能显示出来的
7.position 有哪些值
答：absolute：
生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持）：
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative：
生成相对定位的元素，相对于其正常位置进行定位。
static：
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit：
规定从父元素继承 position 属性的值。
sticky
position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效)，当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
ticky属性有以下几个特点：
该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量。
8.box-sizing属性？
答：用来控制元素的盒子模型的解析模式，默认为content-box
box-sizing: context-box：W3C的标准盒子模型
box-sizing: border-box：IE传统盒子模型
9. CSS3新增伪类有那些?
1. p:first-of-type 选择属于其父元素的首个元素
2. p:last-of-type 选择属于其父元素的最后元素
3. p:only-of-type 选择属于其父元素唯一的元素
4. p:only-child 选择属于其父元素的唯一子元素
5. p:nth-child(2) 选择属于其父元素的第二个子元素
6. :enabled :disabled 表单控件的禁用状态。
7. :checked 单选框或复选框被选中。
10.如何让网站的图文不可复制？
<style>
div{
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
}
</style>
11.css实现单行文本溢出显示
<style>
div{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
12.如何让一个盒子垂直水平居中？
1、定位 盒子宽高已知，
position: absolute; left: 50%; top: 50%;
margin-left:-自身一半宽度; margin-top: -自身一半高度;
2、table-cell布局
父级 display: table-cell; vertical-align: middle;
子级 margin: 0 auto;
3、定位 + transform ; 适用于 子盒子 宽高不定时
position: relative / absolute;
/*top和left偏移各为50%*/
top: 50%;
left: 50%;
/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
transform: translate(-50%, -50%);
4、flex 布局
父级：
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
再加一种水平方向上居中 ：margin-left : 50% ; transform: translateX(-50%);
13.margin 外边距折叠什么？
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
14.opacity() 和 rgba()有什么区别？
rgba() ： 作用于颜色，如background-color、text-shadow、box-shadow等；
opacity() ：作用于元素
15.Less 和Sass 了解吗，什么是CSS预处理器？
- 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
- 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
16.浮动是如何产生的？清除浮动方法有哪些？
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
清除浮动的方法：
1、父级div定义height；
2、父级div 也一起浮动；
3、常规的使用一个class；
<style>
.clearfix::before, .clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
4、SASS编译的时候，浮动元素的父级div定义伪类:after
&::after,&::before{
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
清除浮动原理：
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:".",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:" "仍然会产生额外的空隙；
5）zoom：1 触发IE hasLayout。
通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。
17. 自定义字体如何使用？
<style>
@font-face{
font-family:BorderWeb;
src:url(BorderWeb.eot)
}
.border{
font-family:"BorderWeb"
}
</style>
18.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常见的空元素：
<br> <hr> <img> <input> <link> <meta>
鲜为人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
19.CSS3有哪些新特性？
新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
圆角 （border-radius:8px）
多列布局 （multi-column layout）
阴影和反射 （Shadow\Reflect）
文字特效 （text-shadow、）
文字渲染 （Text-decoration）
线性渐变 （gradient）
旋转 （transform）
缩放,定位,倾斜,动画,多背景
例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
20.介绍一下几种常用的单位 px em rem
1. px像素（Pixel）。相对长度单位。像素px是相对于显示屏幕分辨率而言的。一般是固定的无法调整。
2.em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（16px）。
3.rem是CSS3新增的一个相对单位（root em 根em），仍然是相对大小，但相对的只是HTML根元素
21.::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
（伪元素由双冒号和伪元素名称组成）
双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，
比如:first-line、:first-letter、:before、:after等，
而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
想让插入的内容出现在其它内容前，使用::before，否者，使用::after；
在代码顺序上，::after生成的内容也比::before生成的内容靠后。
如果按堆栈视角，::after生成的内容会在::before生成的内容之上
（四）页面常见布局方式
一：单列布局
<style>
.header,.main,.footer{width: 800px;height: 50px;line-height:50px;margin: 0 auto;background-color: #eee;text-align: center;}
.main{height: 300px;line-height: 300px;background-color: #0066ff}
</style>
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
二：两列布局
<style>
.header,.footer{width: 800px;height: 50px;line-height:50px;margin: 0 auto;background-color: #eee;text-align: center;}
.main{width: 800px;margin: 0 auto}
.main-left{width: 200px;height: 400px;background-color: #0066ff;float: left;}
.main-right{width: 600px;height: 400px;background-color: #ff6666;float: right;}
/*清除浮动 clearfix*/
.clearfix::before, .clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
三：三列布局
四：混合布局
五：定宽布局
六：圣杯布局
七：双飞翼布局
（四）JS概念题：
1.Array数组 有哪些方法？
<script>
push()
// 添加到数组的尾部 //['a','b','c'].push('d') 返回4
unshift()
// 添加到数组开头
pop()
// 删除数组的最后一个元素 // ['a','b','c'].pop() 返回"c"
shift()
// 删除第一个元素 // ['a','b','c'].shift() 返回"a"
join()
// 数组转换为字符串 // ['a','b','c'].join('-'); 返回"a-b-c"
reverse()
// 颠倒数组元素顺序 // ['a','b','c'].reverse(); 返回["c","b","a"]
sort()
//数组排序
// 降序 function(a,b){return b-a}
// 升序 function(a,b){return a-b}
concat()
// 连接两个或多个数组
slice()
// 数组截取
splice()
// 数组删除、插入、替换
indexof()
//从数组开头开始向后查找
lastIndexOf()
//从数组末尾向前查找
</script>
2.String对象 有哪些方法？
<script>
charAt(index)
// 返回指定字符串位置
indexOf(searchValue,[fromIndex])
// 返回searchValue在字符串首次出现的位置
lastIndexOf(searchValue,[fromIndex])
// 从后向前查找，返回searchValue在字符串首次出现的位置
slice(start,[end])
// 抽取从start(包括start) 开始到 end(不包括end) 结束的所有字符
substring(start,[stop])
// 抽取从start开始到stop-1处所有字符串
substr(start,[length])
// 抽取从start开始长度为length 的字符串
split()
// 把一个字符串分割为数组
toUpperCase() //字符串转成大写
toLowerCase() //字符串转成小写
replace() //字符串的替换，只替换第一个
</script>
3.Date对象 有哪些方法？
<script>
getDate() //返回一个月中某一天（1-31）
getDay() //返回一周中某一天（0-6）
getMont() // 返回月份(0-11)
getFullYear() //返回年份
getHours() //返回小时
getMintues() //返回分钟
getSeconds() //返回秒钟
</script>
4.Math对象 有哪些方法？
<script>
Math.abs() //返回数字绝对值
Math.ceil() //对数字向上取整
Math.floor() //对数字向下取整
Math.round() // 对数字四舍五入
Math.random() //返回0-1之间自然数
Math.min() // 求最小值
Math.max() //求最大值
// 生成n-m之间的一个随机整数的方法：
Math.floor(Math.random()*(m-n+1)+n)
</script>
5.JS基本数据类型有哪些？
1.Number
2.String
3.Boolean
4.Undefined
5.Null
6.Object
7.Symbol ECMAScript 2015 新增(创建后独一无二且不可变的数据类型 )
6.如何阻止事件冒泡
<script>
// JavaScript
document.getElementById('btn').addEventListener('click', function (event) {
event = event || window.event；
if (event.stopPropagation){
// W3C
event.stopPropagation();
} else{
// IE
event.cancelBubble = true;
}
}, false);
// jQuery
$('#btn').on('click', function (event) {
event.stopPropagation();
});
</script>
7.谈谈This对象的理解
this总是指向函数的直接调用者（而非间接调用者）
如果有new关键字，this指向new出来的那个对象
在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window
8.介绍一下原型链，
每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。
关系：instance.constructor.prototype = instance.__proto__
特点：
JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话，就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到Object 内建对象。
写一个原型链继承的例子：
<script>
function Func(){}
Func.prototype.name = "Sean";
Func.prototype.getInfo = function() {
return this.name;
}
var person = new Func();//现在可以参考var person = Object.create(oldObject);
console.log(person.getInfo());//它拥有了Func的属性和方法
//"Sean"
console.log(Func.prototype);
// Func { name="Sean", getInfo=function()}
</script>
9.介绍一下promise
10.什么是闭包（closure），为什么要用它？
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域
闭包的特性：
函数内再嵌套函数
内部函数可以引用外层的参数和变量
参数和变量不会被垃圾回收机制回收
11.new操作符具体干了什么呢?
创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型
属性和方法被加入到 this 引用的对象中
新创建的对象由 this 所引用，并且最后隐式的返回 this
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
12.Ajax 是什么? 如何创建一个Ajax？
ajax的全称：Asynchronous Javascript And XML
异步传输+js+xml
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验
* 创建XMLHttpRequest对象,也就是创建一个异步调用对象
* 建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
* 设置响应HTTP请求状态变化的函数
* 发送HTTP请求
* 获取异步调用返回的数据
* 用JavaScript和DOM实现局部刷新
同步和异步的区别?
* 同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作
* 异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容
13.事件的各个阶段
捕获阶段 ---> 2：目标阶段 ---> 3：冒泡阶段
document ---> target目标 ----> document
由此，addEventListener的第三个参数设置为true和false的区别已经非常清晰了：
* true表示该元素在事件的“捕获阶段”（由外往内传递时）响应事件；
* false表示该元素在事件的“冒泡阶段”（由内向外传递时）响应事件。
14.JS判断设备来源
<script>
function deviceType(){
var ua = navigator.userAgent;
var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
for(var i=0; i<len,len = agent.length; i++){
if(ua.indexOf(agent[i])>0){
break;
}
}
}
deviceType();
window.addEventListener('resize', function(){
deviceType();
})
// 微信的 有些不太一样
function isWeixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=='micromessenger'){
return true;
}else{
return false;
}
}
</script>
15.介绍JS有哪些内置对象？
* 数据封装类对象：Object、Array、Boolean、Number、String
* 其他对象：Function、Arguments、Math、Date、RegExp、Error
* ES6新增对象：Symbol、Map、Set、Promises、Proxy、Reflect
16.三种强制类型转换、两种隐式类型转换
17.如何判断一个对象是否为数组？
（1）Object.prototype.toString().call(obj) === ‘[Object Array]’;
（2）Array.isArray(obj);
18.Promise中的执行顺序（考察频率：高）
参考阮一峰老师书中的例子：
<script>
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
resolve();
});
promise.then(function() {
console.log('resolved.');
});
console.log('Hi!');
// Promise
// Hi!
// resolved
</script>
上面代码中，Promise 新建后立即执行，所以首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。
19.说几条写JavaScript的基本规范？
1.不要在同一行声明多个变量。
2.请使用 ===/!==来比较true/false或者数值
3.使用对象字面量替代new Array这种形式
4.不要使用全局函数。
5.Switch语句必须带有default分支
6.函数不应该有时候有返回值，有时候没有返回值。
7.For循环必须使用大括号
8.If语句必须使用大括号
9.for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染。
20.Javascript如何实现继承？
1、构造继承
2、原型继承
3、实例继承
4、拷贝继承
<script>
// 原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。
function Parent(){
this.name = 'wang';
}
function Child(){
this.age = 28;
}
Child.prototype = new Parent();//继承了Parent，通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被继承的属性
</script>
21.javascript创建对象的几种方式？
javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用。
1、对象字面量的方式
<script>
person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};
</script>
2、用function来模拟无参的构造函数
<script>
function Person(){}
var person=new Person();//定义一个function，如果使用new"实例化",该function可以看作是一个Class
person.name="Mark";
person.age="25";
person.work=function(){
alert(person.name+" hello...");
}
person.work();
</script>
3、用function来模拟参构造函数来实现（用this关键字定义构造的上下文属性）
<script>
function Pet(name,age,hobby){
this.name=name;//this作用域：当前对象
this.age=age;
this.hobby=hobby;
this.eat=function(){
alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");
}
}
var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象
maidou.eat();//调用eat方法
</script>
4、用工厂方式来创建（内置对象）
<script>
var wcDog =new Object();
wcDog.name="旺财";
wcDog.age=3;
wcDog.work=function(){
alert("我是"+wcDog.name+",汪汪汪......");
}
wcDog.work();
</script>
5、用原型方式来创建
<script>
function Dog(){
}
Dog.prototype.name="旺财";
Dog.prototype.eat=function(){
alert(this.name+"是个吃货");
}
var wangcai =new Dog();
wangcai.eat();
</script>
5、用混合方式来创建
<script>
function Car(name,price){
this.name=name;
this.price=price;
}
Car.prototype.sell=function(){
alert("我是"+this.name+"，我现在卖"+this.price+"万元");
}
var camry =new Car("凯美瑞",27);
camry.sell();
</script>
22.javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？
use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,
* 使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。
* 默认支持的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值;
* 全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用；
* 消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同;
* 提高编译器效率，增加运行速度；
* 为未来新版本的Javascript标准化做铺垫。
23.DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性
24 .call() 和 .apply() 的区别？
26.说一下对变量提升的理解
27.说明 this 几种不同使用场景
28.如何理解作用域
29.实际开发中闭包的应用
(五)JS编程题
1.字符串去重方法
<script>
function quchongstr(str){
var a = str.match(/\S+/g);
//等价于str.split(/\s+/g) // \s空白符，\S非空白符
a.sort();
for(var i=a.length-1;i>0;i--){
if(a[i]==a[i-1]){
a.splice(i,1);
}
}
return a.join(" ");
}
var str = quchongstr("a a b a b e");
console.log(str);
</script>
2.数组去重方法(手写，最好使用ES6)
<script>
// 方法一 ES6 set()
var a = [2,"12",2,12,1,2,1,6,12,13,6],
b= [...new Set(a)]; //ES6新增set 方法
console.log(b);
// 方法二 for循环遍历
function quchong(arr){
var len = arr.length;
arr.sort();
for(var i=len-1;i>0;i--){
if(arr[i]==arr[i-1]){
arr.splice(i,1);
}
}
return arr;
}
var a = ["a","a","b",'b','c','c','a','d'];
var b = quchong(a);
console.log(b);
</script>
3.最快捷求数组最大值最小值方法
<script>
var a=[1,2,3,5];
alert(Math.max.apply(null, a));//最大值
alert(Math.min.apply(null, a));//最小值
</script>
4.完成以下代码段，实现a数组对b数组的拷贝，方法越多越好
var a=[1,"yes","3"],
b;
<script type="text/javascript">
var a=[1,"yes","3"],
b;
//方法一： for遍历 push
var b = new Array();
for (var i = 0; i < a.length; i++) {
b.push(a[i]);
}
console.log(b);
// 方法二 空数组concat
b=[].concat(a);
console.log(b)
// 方法三：slice()
b=a.slice(0);
console.log(b)
</script>
5.输出今天日期：
<script type="text/javascript">
var calculateDate = function(){
var date = new Date();
var weeks = ["日","一","二","三","四","五","六"];
return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+
date.getDate()+"日 星期"+weeks[date.getDay()];
}
$(function(){
$("#dateSpan").html(calculateDate());
});
</script>
6.封装一个转驼峰形式的函数
border-left-color 转 borderLeftColor
<script>
function camelback(str){
var arr = str.split('-');
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1);
}
str = arr.join('');
return str;
}··
var camelFormat=camelback("border-left-color");
console.log(camelFormat);
</script>
7.随机输出0-100中的10个数字，放入一个数组，并排序
<script>
var iArray = [];
function getRandom(istart, iend){
var iChoice = -(istart - iend +1);
return Math.floor(Math.random() * iChoice + istart);
//Math.floor()是向下取整
}
for(var i=0; i<10; i++){
iArray.push(getRandom(10,100));//循环十次该方法然后push到空数组中
}
iArray.sort();//排序
console.log(iArray);
</script>
8.实现两个数组相加，并排序
9.添加千位分隔符
123456789 转为 123,456,789
<script>
function commafy(num) {
return num && num
.toString()
.replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
return $1 + ",";
});
}
console.log(commafy(1234567.90)); //1,234,567.90
</script>
10.快速的让一个数组乱序
<script>
var arr = [1,2,3,4,5,6,7,8,9];
arr.sort(function(){
return Math.random() > 0.5 ? -1:1;
})
console.log(arr);
</script>
11.求数组前10个元素之和
<script>
var arr = [1,2,3,4,5,6,7,8,9,10,11,12],
r = arr.slice(0,10).reduce(function(x,y){
return x+y;
});
console.log(r);
</script>
12.查找一个字符串中出现次数最多的字符，统计这个次数
<script>
// 字符串可以用单引号，也可以用双引号
var str = 'ajfewiqnnfsdajfdajfdkakfjkdsfjds';
var obj = {};
// 处理字符串字符，给对象做属性用
for(var i=0;i<str.length;i++){
// 中括号调用，数组是下标，对象是属性，obj.name 和 obj['name']
if(obj[str.charAt(i)]){
// 如果对象有这个属性了，就给这个属性值自增1
obj[str.charAt(i)]++;
}else{
// 如果对象没有这个属性，就给这个属性值设为1
obj[str.charAt(i)] = 1;
}
}
// 找出对象属性中最多次数
var times = 0;
var value = '';
// for in 是另一种for循环，可以用于遍历对象的属性和方法
for(var i in obj){
if(obj[i]>times){
times = obj[i];
value = i;
}
}
// 最多次数保存在times中了，字符保存在value中了
</script>
13.找出数组最大值可以有哪些方法？
<script>
var ary = [1,25,16,32,43,26,13,28,19];
// 1、 for循环遍历，比较low，就不写了
// 2、 数组排序
ary.sort()[ary.length-1];
// 3、数组排序+截取
ary.sort().splice(-1)[0];
// 4、借用Math最大值方法
Math.max.apply(null,ary);
</script>
14.创建10个a标签，点击时候弹出对应的序号
<script>
var i;
for(i=0; i<10; i++){
(function(i){
a =document.creatElement('a');
a.innnerHTML = i + '<br>'
a.addEventListenter('click',function(e){
e.preventDefault();
alert(i);
});
document.body.appedChild(a);
})(i);
}
</script>
15.生成1-10之间10个随机数，并且不重复
<script>
function getRandomArray(){
var array = [];
while (array.length < 10)
{
var random = Math.floor(Math.random() * 10) + 1;
if (array.indexOf(random) < 0)
{
array.push(random);
}
}
return array;
}
</script>
(五) React部分：
1.介绍一下 React
2. React生命周期有哪些？
渲染过程调用到的生命周期函数，主要几个要知道；
* constructor
* getInitialState
* getDefaultProps
* componentWillMount
* render
* componentDidMount
更新过程
* componentWillReceiveProps
* shouldComponentUpdate
* componentWillUpdate
* render
* componentDidUpdate
卸载过程
componentWillUnmount
3.React props属性和state属性有什么区别？
（六） Webpack部分：
1.Webpack 有哪些命令？
webpack
2.webpack 有哪些配置 ？
3.webpack.config.js 文件各代表什么？
4.配置淘宝源
npm install -g cnpm --registry=https://registry.npm.taobao.org
(七) git部分：
1.git 常用命令有哪些？
(一) 创建与合并分支
远程项目拉到本地：
git clone
从master分支创建dev分支并切换到dev分支：
git checkout master
git checkout -b dev
其中 git checkout -b dev 等价于：
(git branch dev
git checkout dev
)
查看本地当前分支
git branch
查看远程全部分支
git branch -a
修改代码，跟踪文件
git add a.html
提交代码
git commit -m "提交文件a.html"
分支合并，将dev分支合并到master
git checkout master
git merge dev
合并完成后，删除dev分支
git branch -d dev
（二）解决代码冲突
（三）Bug 分支
（四）版本回退
回退至上一个版本
git reset --hard HEAD
回退至指定版本
git reset --hard 版本号
查看以往版本号（本地commit）
git reflog
查看以往版本号及信息（所有commit）
git log
(五) 撤销修改
git state
2.如何解决代码冲突？
https://www.cnblogs.com/VVingerfly/p/6392770.html
（八）ES6部分：
1.let var const 有什么区别？
let 允许你声明一个作用域被限制在块级中的变量、语句或者表达式
let绑定不受变量提升的约束，这意味着let声明不会被提升到当前
该变量处于从块开始到初始化处理的“暂存死区”。
var 声明变量的作用域限制在其声明位置的上下文中，而非声明变量总是全局的
由于变量声明（以及其他声明）总是在任意代码执行之前处理的，所以在代码中的任意位置声明变量总是等效于在代码开头声明
const 声明创建一个值的只读引用 (即指针)
这里就要介绍下 JS 常用类型
String、Number、Boolean、Array、Object、Null、Undefined
其中基本类型 有 Undefined、Null、Boolean、Number、String，保存在栈中；
复合类型 有 Array、Object ，保存在堆中；
基本数据当值发生改变时，那么其对应的指针也将发生改变，故造成 const申明基本数据类型时，
再将其值改变时，将会造成报错， 例如 const a = 3 ; a = 5 时 将会报错；
但是如果是复合类型时，如果只改变复合类型的其中某个Value项时， 将还是正常使用；
2.什么是箭头函数
语法比函数表达式更短，并且不绑定自己的this，arguments，super或 new.target。这些函数表达式最适合用于非方法函数，并且它们不能用作构造函数。
（九）jQuery基础：
1.jQuery对象与DOM对象之间的转换
* 从 DOM 对象转到 jQuery 对象： $(obj)
* 从 jQuery 对象转到 DOM 对象： obj[0] 或 get() 方法
(十) npm 部分：
1.npm常用命令：
npm init 项目初始化，创建 package.json
npm init --yes
npm install 依赖包安装
npm install express #本地安装
npm install express -g #全局安装
npm update
npm uninstall
dependencies(生产环境依赖)
devDependencies（本地开发环境依赖，不会发布到生产环境）
npm ls -g: 列出所有全局安装npm 包
（）其他 ：
1.CommonJS AMD CMD ES6 模块化的方法
CommonJS
该规范的核心思想是允许模块通过 require 方法来同步加载所要依赖的其他模块，然后通过 exports 或 module.exports 来导出需要暴露的接口
require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;
优点：
服务器端模块便于重用
NPM 中已经有将近20万个可以使用模块包
简单并容易使用
缺点：
同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的
不能非阻塞的并行加载多个模块
实现：
服务器端的 Node.js
Browserify，浏览器端的 CommonJS 实现，可以使用 NPM 的模块，但是编译打包后的文件体积可能很大
HTML5 + CSS3 + ES6 + Jquery + React + Webpack + git + npm ....
2.简单自我介绍
3.电商网站怎样做优化，提高加载速度？
4.什么是同源策略，如何实现跨域？
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。若地址里面的协议、域名和端口号均相同则属于同源。
如何实现跨域？
jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端设置http header、后端在服务器上设置cors。
1.jsonp实现跨域
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
// 传参并指定回调执行函数为onBack
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
// 回调执行函数function onBack(res) {
alert(JSON.stringify(res));
}
</script>
2.跨域资源共享（CORS）
https://segmentfault.com/a/1190000011145364
5.什么CSS放前面，JS脚本放后面？
下载某一个js时其他任务是暂停的，需要等这个JS下载并执行完毕后再下载其他的。
6.http协议中 GET和POST有什么区别，分别适用什么场景？
7. http 状态码 200 302 304 403 404 500分别代表什么？
1 消息类
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
2 成功
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
3 重定向
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
4 错误，一般是指客户端错误
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
5 6 服务器错误
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
8.什么是XSS CSRF攻击，如何防范？
9.一个页面从输入URL到加载显示完成，这个过程发生了什么？
简洁版：
1.浏览器根据请求的URL交给DNS域名解析，找到真实的IP，向服务器发起请求；
2.服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、CSS、JavaScript等）；
3.浏览器对加载到的资源（HTML、CSS、JavaScript等）进行语法解析，构建相应的内部数据结构（DOM树、CSS树、render树等）；
4.载入解析到的资源文件、渲染页面、完成。
详细版：
1.首先浏览器开启一个线程来处理这个请求，对URL分析判断，如果是http协议就按照Web方式来处理；
2.其次浏览器会对URL进行解析，一般包括（协议头、主机域名或IP地址、端口号、请求路径、查询参数、hash等），然后开启网络线程发出一个完整到http请求；
3.当然一般我们输入的URL是服务器域名，这时就需要DNS通过域名查询得到对应的IP；
4.DNS首先会查看浏览器DNS缓存，没有就查询计算机本地DNS缓存，还没有就询问递归式DNS服务器（即网络提供商，一般这个服务器都会有自己的缓存，所以IP查询一般在这里完成），如果没有缓存，那就需要通过根域名和TLD域名服务器指到对应的权威DNS服务器找回记录，并缓存到递归式服务器，然后递归服务器在将记录返回给本地。
5.有了IP地址，此时网络层便会通过IP地址寻的对应服务器的物理地址
6.寻得服务器地址，客户端在网络传输层便可以和服务器通过三次握手建立tcp\ip连接
7.连接建立后网络数据链路层将数据包装成帧；
8.最后物理层利用物理介质进行传输；
9.到了服务器，就会通过相反的方式将数据一层一层的还原回去；
10.请求到了后台服务器，一般会有统一的验证，如安全验证、跨域验证等，验证未通过就直接返回相应的http报文
11.验证通过后，就会进入后台代码，此时程序收到请求，然后执行对应的操作（如查询数据库等）；
12.如果浏览器访问过，且缓存上有对应的资源，便会与服务器最后修改时间对比，一致便返回304，告诉浏览器可使用本地缓存；
13.前端浏览器接收到响应成功的报文后便开始下载网页
14.下载完的网页将被交给浏览器内核（渲染进程）进行处理：
1. 根据顶部定义的DTD类型进行对应的解析方式；
2. 渲染进程内部是多线程的，网页的解析将会被交给内部的GUI渲染线程处理；
3. 首先渲染线程中的HTML解释器，将HTML网页和资源从字节流解释转换成字符流；
4. 再通过词法分析器将字符流解释成词语；
5. 之后经过语法分析器根据词语构建成节点；最后通过这些节点组建一个DOM树；
6. 这个过程中，如果遇到的DOM节点是JavaScript代码，就会调用JavaScript引擎对JavaScript代码进行解释执行，此时由JavaScript引擎和GUI渲染线程的互斥，GUI渲染线程就会被挂起，渲染过程停止；如果JavaScript代码的运行中对DOM树进行了修改，那么DOM的构建需要从新开始；
7. 如果节点需要依赖其他资源，如（图片，CSS等），便会调用网络模块的资源加载器来加载它们，但它们是异步的，不会阻塞当前DOM树的构建；
8. 如果遇到的是JavaScript资源URL（没有标记异步），则需要停止当前DOM的构建，直到JavaScript的资源加载并被JavaScript引擎执行后才继续构建DOM；
9. 对于CSS，CSS解释器会将CSS文件解释成内部表示结构，生成CSS规则树；
10. 然后合并CSS规则树和DOM树，生成render渲染树；
11. 最后对render树进行布局和绘制，并将结果通过IO线程传递给Browser控制进程进行显示。
10.常用正则表达式
//验证邮箱
/^w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
//验证手机号
/^1[3|5|8|7]d{9}$/
//验证URL
/^http://.+./
//验证身份证号码
/(^d{15}$)|(^d{17}([0-9]|X|x)$)/
11.什么是渐进增强和优雅降级？
* 渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
* 优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
12.请解释什么是事件代理
* 事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能
13.常见浏览器内核有哪些？
* Blink内核：新版 Chrome、新版 Opera
* Webkit内核：Safari、原Chrome
* Gecko内核：FireFox、Netscape6及以上版本
* Trident内核（又称MSHTML内核）：IE、国产浏览器
* Presto内核：原Opera7及以上
14.请说说对MVC，MVP和MVVM的理解
* MVC即model\view\controller，是最常见的软件架构模式。view是指用户界面，controller则处理业务逻辑，而model则用来存储数据。view传送指令到controller，controller完成业务逻辑后要求model改变状态，model将新数据发送给view，使用户得到反馈。各部分的通信都是单向的。
* MVP将controller改为presenter，在这种模式中，各个部分之间的通信都是双向的。view与model不发送直接联系，都通过presenter传递。view非常薄，不部署任何业务逻辑，而presenter非常厚。
* MVVM将presenter改为viewModel，和MVP模式非常相似，唯一的区别在于它是双向绑定，view改变，自动反应在viewModel上，反之亦然。
15. 重绘和回流（考察频率：中）
* 重绘：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
* 回流：当Render Tree（DOM）中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
回流要比重绘消耗性能开支更大。
回流必将引起重绘，重绘不一定会引起回流
16.浏览器渲染页面过程：
* 根据 HTML 结构生成 DOM 树
* 根据 CSS 生成 CSSOM
* 将 DOM 和 CSSOM 整合形成 RenderTree
* 根据 RenderTree 开始渲染和展示
* 遇到script标签时，会执行并阻塞渲染
17.介绍一下你对浏览器内核的理解
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
* 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
* JS引擎则：解析和执行javascript来实现网页的动态效果。
* 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
18.你有用过哪些前端性能优化的方法？
（1） 减少http请求次数：CSS,Sprites,JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。
19.如何做SEO优化？
(1)网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。
1. 控制首页链接数量
2.扁平化的目录层次，尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页
3.导航优化
4. 网站的结构布局--不可忽略的细节
页面头部：logo及主导航，以及用户的信息。
页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。
页面底部：版权信息和友情链接。
特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。
5.控制页面的大小，减少http请求，提高网站的加载速度。
一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。
(2)网页代码优化
1.<title>标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的<title>标题中不要设置相同的内容。
2.<meta keywords>标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
3.<meta description>标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
4.<body>中的标签：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，<nav>标签是用来设置页面主导航的等。
5.<a>标签：页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
6.正文标题要用<h1>标签：“蜘蛛” 认为它最重要，若不喜欢<h1>的默认样式可以通过CSS设置。尽量做到正文标题用<h1>标签，副标题用<h2>标签, 而其它地方不应该随便乱用 h 标题标签。
8.表格应该使用<caption>表格标题标签
9.<img>应使用 "alt" 属性加以说明
10.<strong>、<em>标签 : 需要强调时使用。<strong>标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，<em>标签强调效果仅次于<strong>标签。
（二）HTML部分：
1.HTML5新标签有哪些？
答：
* 绘画 canvas
* 用于媒介回放的 video 和 audio 元素
* 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
* sessionStorage 的数据在浏览器关闭后自动删除
* 语意化更好的内容元素，比如 article、footer、header、nav、section
* 表单控件，calendar、date、time、email、url、search
* 新的技术webworker, websocket, Geolocation
2.常用meta标签有哪些？
<!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection"content="telephone=no, email=no" />
其他meta标签
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
3.viewport属性
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 设置viewport宽度，为一个正整数，或字符串‘device-width’
// device-width 设备宽度
// height 一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale 默认缩放比例（初始缩放比例），为一个数字，可以带小数
// minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable 是否允许手动缩放
4.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
* cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
* cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递
* sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
* cookie数据大小不能超过4k
* sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
有期时间：
* localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
* sessionStorage 数据在当前浏览器窗口关闭后自动删除
* cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
5.什么是语义化，为什么要语义化，谈谈你的理解
HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构
css命名的语义化是指：为html标签添加有意义的class
为什么需要语义化：
1.去掉样式后页面呈现清晰的结构
2.盲人使用读屏器更好地阅读
3.搜索引擎更好地理解页面，有利于收录
4.便团队项目的可持续运作及维护
简述一下你对HTML语义化的理解？
1.用正确的标签做正确的事情。
2.html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
3.即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
4.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
5.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
6.label 的作用是什么？怎么使用的？
label标签来定义表单控件的关系：
当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上
使用方法1：
<label for="mobile">Number:</label>
<input type="text" id="mobile"/>
使用方法2：
<label>Date:<input type="text"/></label>
（三）CSS部分：
1. 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
* 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
* 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
2.什么是 CSS3 Flex 弹性盒子模型布局，有哪些属性
答：
* 一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
* 较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
* 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
* 它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
* 常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。
* 在布局上有了比以前更加灵活的空间。
3.CSS3 有哪些新属性
答：1.transform 元素变形效果
2.transition 过渡效果
3.animation 动画效果
https://www.cnblogs.com/wuyanliang/p/5862643.html
4.CSS 有哪些选择器
答：1.标签选择器 (p li div)
2.类选择器 (.first .top)
3.ID选择器 (#test #word)
4.相邻选择器（h1 + p）
5.后代选择器 (li a)
6.属性选择器 (a rel=["external"])
7.伪类选择器 (:hover)
8.通配符选择器 (*)
哪些属性可以继承?
color,font-size,font-family
5.display 有哪些值
答：* block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
* none 缺省值。象行内元素类型一样显示。
* inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
* inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
* list-item 象块类型元素一样显示，并添加样式列表标记。
* table 此元素会作为块级表格来显示。
* inherit 规定应该从父元素继承 display 属性的值。
6.display:none 和 visibity: hidden 有什么区别
都是隐藏元素，但是前者文档布局中不占用空间，后者仍占用空间
display：none隐藏产生reflow和repaint(回流与重绘)
前者有株连性，即父元素设置display: none后子元素不管怎样设置都不能显示，而后者的子元素通过设置visibility: visible后还是能显示出来的
7.position 有哪些值
答：absolute：
生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持）：
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative：
生成相对定位的元素，相对于其正常位置进行定位。
static：
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit：
规定从父元素继承 position 属性的值。
sticky
position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效)，当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
ticky属性有以下几个特点：
该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量。
8.box-sizing属性？
答：用来控制元素的盒子模型的解析模式，默认为content-box
box-sizing: context-box：W3C的标准盒子模型
box-sizing: border-box：IE传统盒子模型
9. CSS3新增伪类有那些?
1. p:first-of-type 选择属于其父元素的首个元素
2. p:last-of-type 选择属于其父元素的最后元素
3. p:only-of-type 选择属于其父元素唯一的元素
4. p:only-child 选择属于其父元素的唯一子元素
5. p:nth-child(2) 选择属于其父元素的第二个子元素
6. :enabled :disabled 表单控件的禁用状态。
7. :checked 单选框或复选框被选中。
10.如何让网站的图文不可复制？
<style>
div{
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
}
</style>
11.css实现单行文本溢出显示
<style>
div{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
12.如何让一个盒子垂直水平居中？
1、定位 盒子宽高已知，
position: absolute; left: 50%; top: 50%;
margin-left:-自身一半宽度; margin-top: -自身一半高度;
2、table-cell布局
父级 display: table-cell; vertical-align: middle;
子级 margin: 0 auto;
3、定位 + transform ; 适用于 子盒子 宽高不定时
position: relative / absolute;
/*top和left偏移各为50%*/
top: 50%;
left: 50%;
/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
transform: translate(-50%, -50%);
4、flex 布局
父级：
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
再加一种水平方向上居中 ：margin-left : 50% ; transform: translateX(-50%);
13.margin 外边距折叠什么？
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
14.opacity() 和 rgba()有什么区别？
rgba() ： 作用于颜色，如background-color、text-shadow、box-shadow等；
opacity() ：作用于元素
15.Less 和Sass 了解吗，什么是CSS预处理器？
- 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
- 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
16.浮动是如何产生的？清除浮动方法有哪些？
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
清除浮动的方法：
1、父级div定义height；
2、父级div 也一起浮动；
3、常规的使用一个class；
<style>
.clearfix::before, .clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
4、SASS编译的时候，浮动元素的父级div定义伪类:after
&::after,&::before{
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
清除浮动原理：
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:".",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:" "仍然会产生额外的空隙；
5）zoom：1 触发IE hasLayout。
通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。
17. 自定义字体如何使用？
<style>
@font-face{
font-family:BorderWeb;
src:url(BorderWeb.eot)
}
.border{
font-family:"BorderWeb"
}
</style>
18.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常见的空元素：
<br> <hr> <img> <input> <link> <meta>
鲜为人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
19.CSS3有哪些新特性？
新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
圆角 （border-radius:8px）
多列布局 （multi-column layout）
阴影和反射 （Shadow\Reflect）
文字特效 （text-shadow、）
文字渲染 （Text-decoration）
线性渐变 （gradient）
旋转 （transform）
缩放,定位,倾斜,动画,多背景
例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
20.介绍一下几种常用的单位 px em rem
1. px像素（Pixel）。相对长度单位。像素px是相对于显示屏幕分辨率而言的。一般是固定的无法调整。
2.em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（16px）。
3.rem是CSS3新增的一个相对单位（root em 根em），仍然是相对大小，但相对的只是HTML根元素
21.::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
（伪元素由双冒号和伪元素名称组成）
双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，
比如:first-line、:first-letter、:before、:after等，
而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
想让插入的内容出现在其它内容前，使用::before，否者，使用::after；
在代码顺序上，::after生成的内容也比::before生成的内容靠后。
如果按堆栈视角，::after生成的内容会在::before生成的内容之上
（四）页面常见布局方式
一：单列布局
<style>
.header,.main,.footer{width: 800px;height: 50px;line-height:50px;margin: 0 auto;background-color: #eee;text-align: center;}
.main{height: 300px;line-height: 300px;background-color: #0066ff}
</style>
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
二：两列布局
<style>
.header,.footer{width: 800px;height: 50px;line-height:50px;margin: 0 auto;background-color: #eee;text-align: center;}
.main{width: 800px;margin: 0 auto}
.main-left{width: 200px;height: 400px;background-color: #0066ff;float: left;}
.main-right{width: 600px;height: 400px;background-color: #ff6666;float: right;}
/*清除浮动 clearfix*/
.clearfix::before, .clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
三：三列布局
四：混合布局
五：定宽布局
六：圣杯布局
七：双飞翼布局
（四）JS概念题：
1.Array数组 有哪些方法？
<script>
push()
// 添加到数组的尾部 //['a','b','c'].push('d') 返回4
unshift()
// 添加到数组开头
pop()
// 删除数组的最后一个元素 // ['a','b','c'].pop() 返回"c"
shift()
// 删除第一个元素 // ['a','b','c'].shift() 返回"a"
join()
// 数组转换为字符串 // ['a','b','c'].join('-'); 返回"a-b-c"
reverse()
// 颠倒数组元素顺序 // ['a','b','c'].reverse(); 返回["c","b","a"]
sort()
//数组排序
// 降序 function(a,b){return b-a}
// 升序 function(a,b){return a-b}
concat()
// 连接两个或多个数组
slice()
// 数组截取
splice()
// 数组删除、插入、替换
indexof()
//从数组开头开始向后查找
lastIndexOf()
//从数组末尾向前查找
</script>
2.String对象 有哪些方法？
<script>
charAt(index)
// 返回指定字符串位置
indexOf(searchValue,[fromIndex])
// 返回searchValue在字符串首次出现的位置
lastIndexOf(searchValue,[fromIndex])
// 从后向前查找，返回searchValue在字符串首次出现的位置
slice(start,[end])
// 抽取从start(包括start) 开始到 end(不包括end) 结束的所有字符
substring(start,[stop])
// 抽取从start开始到stop-1处所有字符串
substr(start,[length])
// 抽取从start开始长度为length 的字符串
split()
// 把一个字符串分割为数组
toUpperCase() //字符串转成大写
toLowerCase() //字符串转成小写
replace() //字符串的替换，只替换第一个
</script>
3.Date对象 有哪些方法？
<script>
getDate() //返回一个月中某一天（1-31）
getDay() //返回一周中某一天（0-6）
getMont() // 返回月份(0-11)
getFullYear() //返回年份
getHours() //返回小时
getMintues() //返回分钟
getSeconds() //返回秒钟
</script>
4.Math对象 有哪些方法？
<script>
Math.abs() //返回数字绝对值
Math.ceil() //对数字向上取整
Math.floor() //对数字向下取整
Math.round() // 对数字四舍五入
Math.random() //返回0-1之间自然数
Math.min() // 求最小值
Math.max() //求最大值
// 生成n-m之间的一个随机整数的方法：
Math.floor(Math.random()*(m-n+1)+n)
</script>
5.JS基本数据类型有哪些？
1.Number
2.String
3.Boolean
4.Undefined
5.Null
6.Object
7.Symbol ECMAScript 2015 新增(创建后独一无二且不可变的数据类型 )
6.如何阻止事件冒泡
<script>
// JavaScript
document.getElementById('btn').addEventListener('click', function (event) {
event = event || window.event；
if (event.stopPropagation){
// W3C
event.stopPropagation();
} else{
// IE
event.cancelBubble = true;
}
}, false);
// jQuery
$('#btn').on('click', function (event) {
event.stopPropagation();
});
</script>
7.谈谈This对象的理解
this总是指向函数的直接调用者（而非间接调用者）
如果有new关键字，this指向new出来的那个对象
在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window
8.介绍一下原型链，
每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。
关系：instance.constructor.prototype = instance.__proto__
特点：
JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话，就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到Object 内建对象。
写一个原型链继承的例子：
<script>
function Func(){}
Func.prototype.name = "Sean";
Func.prototype.getInfo = function() {
return this.name;
}
var person = new Func();//现在可以参考var person = Object.create(oldObject);
console.log(person.getInfo());//它拥有了Func的属性和方法
//"Sean"
console.log(Func.prototype);
// Func { name="Sean", getInfo=function()}
</script>
9.介绍一下promise
10.什么是闭包（closure），为什么要用它？
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域
闭包的特性：
函数内再嵌套函数
内部函数可以引用外层的参数和变量
参数和变量不会被垃圾回收机制回收
11.new操作符具体干了什么呢?
创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型
属性和方法被加入到 this 引用的对象中
新创建的对象由 this 所引用，并且最后隐式的返回 this
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
12.Ajax 是什么? 如何创建一个Ajax？
ajax的全称：Asynchronous Javascript And XML
异步传输+js+xml
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验
* 创建XMLHttpRequest对象,也就是创建一个异步调用对象
* 建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
* 设置响应HTTP请求状态变化的函数
* 发送HTTP请求
* 获取异步调用返回的数据
* 用JavaScript和DOM实现局部刷新
同步和异步的区别?
* 同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作
* 异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容
13.事件的各个阶段
捕获阶段 ---> 2：目标阶段 ---> 3：冒泡阶段
document ---> target目标 ----> document
由此，addEventListener的第三个参数设置为true和false的区别已经非常清晰了：
* true表示该元素在事件的“捕获阶段”（由外往内传递时）响应事件；
* false表示该元素在事件的“冒泡阶段”（由内向外传递时）响应事件。
14.JS判断设备来源
<script>
function deviceType(){
var ua = navigator.userAgent;
var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
for(var i=0; i<len,len = agent.length; i++){
if(ua.indexOf(agent[i])>0){
break;
}
}
}
deviceType();
window.addEventListener('resize', function(){
deviceType();
})
// 微信的 有些不太一样
function isWeixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=='micromessenger'){
return true;
}else{
return false;
}
}
</script>
15.介绍JS有哪些内置对象？
* 数据封装类对象：Object、Array、Boolean、Number、String
* 其他对象：Function、Arguments、Math、Date、RegExp、Error
* ES6新增对象：Symbol、Map、Set、Promises、Proxy、Reflect
16.三种强制类型转换、两种隐式类型转换
17.如何判断一个对象是否为数组？
（1）Object.prototype.toString().call(obj) === ‘[Object Array]’;
（2）Array.isArray(obj);
18.Promise中的执行顺序（考察频率：高）
参考阮一峰老师书中的例子：
<script>
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
resolve();
});
promise.then(function() {
console.log('resolved.');
});
console.log('Hi!');
// Promise
// Hi!
// resolved
</script>
上面代码中，Promise 新建后立即执行，所以首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。
19.说几条写JavaScript的基本规范？
1.不要在同一行声明多个变量。
2.请使用 ===/!==来比较true/false或者数值
3.使用对象字面量替代new Array这种形式
4.不要使用全局函数。
5.Switch语句必须带有default分支
6.函数不应该有时候有返回值，有时候没有返回值。
7.For循环必须使用大括号
8.If语句必须使用大括号
9.for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染。
20.Javascript如何实现继承？
1、构造继承
2、原型继承
3、实例继承
4、拷贝继承
<script>
// 原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。
function Parent(){
this.name = 'wang';
}
function Child(){
this.age = 28;
}
Child.prototype = new Parent();//继承了Parent，通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被继承的属性
</script>
21.javascript创建对象的几种方式？
javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用。
1、对象字面量的方式
<script>
person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};
</script>
2、用function来模拟无参的构造函数
<script>
function Person(){}
var person=new Person();//定义一个function，如果使用new"实例化",该function可以看作是一个Class
person.name="Mark";
person.age="25";
person.work=function(){
alert(person.name+" hello...");
}
person.work();
</script>
3、用function来模拟参构造函数来实现（用this关键字定义构造的上下文属性）
<script>
function Pet(name,age,hobby){
this.name=name;//this作用域：当前对象
this.age=age;
this.hobby=hobby;
this.eat=function(){
alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");
}
}
var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象
maidou.eat();//调用eat方法
</script>
4、用工厂方式来创建（内置对象）
<script>
var wcDog =new Object();
wcDog.name="旺财";
wcDog.age=3;
wcDog.work=function(){
alert("我是"+wcDog.name+",汪汪汪......");
}
wcDog.work();
</script>
5、用原型方式来创建
<script>
function Dog(){
}
Dog.prototype.name="旺财";
Dog.prototype.eat=function(){
alert(this.name+"是个吃货");
}
var wangcai =new Dog();
wangcai.eat();
</script>
5、用混合方式来创建
<script>
function Car(name,price){
this.name=name;
this.price=price;
}
Car.prototype.sell=function(){
alert("我是"+this.name+"，我现在卖"+this.price+"万元");
}
var camry =new Car("凯美瑞",27);
camry.sell();
</script>
22.javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？
use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,
* 使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。
* 默认支持的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值;
* 全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用；
* 消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同;
* 提高编译器效率，增加运行速度；
* 为未来新版本的Javascript标准化做铺垫。
23.DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性
24 .call() 和 .apply() 的区别？
26.说一下对变量提升的理解
27.说明 this 几种不同使用场景
28.如何理解作用域
29.实际开发中闭包的应用
(五)JS编程题
1.字符串去重方法
<script>
function quchongstr(str){
var a = str.match(/\S+/g);
//等价于str.split(/\s+/g) // \s空白符，\S非空白符
a.sort();
for(var i=a.length-1;i>0;i--){
if(a[i]==a[i-1]){
a.splice(i,1);
}
}
return a.join(" ");
}
var str = quchongstr("a a b a b e");
console.log(str);
</script>
2.数组去重方法(手写，最好使用ES6)
<script>
// 方法一 ES6 set()
var a = [2,"12",2,12,1,2,1,6,12,13,6],
b= [...new Set(a)]; //ES6新增set 方法
console.log(b);
// 方法二 for循环遍历
function quchong(arr){
var len = arr.length;
arr.sort();
for(var i=len-1;i>0;i--){
if(arr[i]==arr[i-1]){
arr.splice(i,1);
}
}
return arr;
}
var a = ["a","a","b",'b','c','c','a','d'];
var b = quchong(a);
console.log(b);
</script>
3.最快捷求数组最大值最小值方法
<script>
var a=[1,2,3,5];
alert(Math.max.apply(null, a));//最大值
alert(Math.min.apply(null, a));//最小值
</script>
4.完成以下代码段，实现a数组对b数组的拷贝，方法越多越好
var a=[1,"yes","3"],
b;
<script type="text/javascript">
var a=[1,"yes","3"],
b;
//方法一： for遍历 push
var b = new Array();
for (var i = 0; i < a.length; i++) {
b.push(a[i]);
}
console.log(b);
// 方法二 空数组concat
b=[].concat(a);
console.log(b)
// 方法三：slice()
b=a.slice(0);
console.log(b)
</script>
5.输出今天日期：
<script type="text/javascript">
var calculateDate = function(){
var date = new Date();
var weeks = ["日","一","二","三","四","五","六"];
return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+
date.getDate()+"日 星期"+weeks[date.getDay()];
}
$(function(){
$("#dateSpan").html(calculateDate());
});
</script>
6.封装一个转驼峰形式的函数
border-left-color 转 borderLeftColor
<script>
function camelback(str){
var arr = str.split('-');
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1);
}
str = arr.join('');
return str;
}··
var camelFormat=camelback("border-left-color");
console.log(camelFormat);
</script>
7.随机输出0-100中的10个数字，放入一个数组，并排序
<script>
var iArray = [];
function getRandom(istart, iend){
var iChoice = -(istart - iend +1);
return Math.floor(Math.random() * iChoice + istart);
//Math.floor()是向下取整
}
for(var i=0; i<10; i++){
iArray.push(getRandom(10,100));//循环十次该方法然后push到空数组中
}
iArray.sort();//排序
console.log(iArray);
</script>
8.实现两个数组相加，并排序
9.添加千位分隔符
123456789 转为 123,456,789
<script>
function commafy(num) {
return num && num
.toString()
.replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
return $1 + ",";
});
}
console.log(commafy(1234567.90)); //1,234,567.90
</script>
10.快速的让一个数组乱序
<script>
var arr = [1,2,3,4,5,6,7,8,9];
arr.sort(function(){
return Math.random() > 0.5 ? -1:1;
})
console.log(arr);
</script>
11.求数组前10个元素之和
<script>
var arr = [1,2,3,4,5,6,7,8,9,10,11,12],
r = arr.slice(0,10).reduce(function(x,y){
return x+y;
});
console.log(r);
</script>
12.查找一个字符串中出现次数最多的字符，统计这个次数
<script>
// 字符串可以用单引号，也可以用双引号
var str = 'ajfewiqnnfsdajfdajfdkakfjkdsfjds';
var obj = {};
// 处理字符串字符，给对象做属性用
for(var i=0;i<str.length;i++){
// 中括号调用，数组是下标，对象是属性，obj.name 和 obj['name']
if(obj[str.charAt(i)]){
// 如果对象有这个属性了，就给这个属性值自增1
obj[str.charAt(i)]++;
}else{
// 如果对象没有这个属性，就给这个属性值设为1
obj[str.charAt(i)] = 1;
}
}
// 找出对象属性中最多次数
var times = 0;
var value = '';
// for in 是另一种for循环，可以用于遍历对象的属性和方法
for(var i in obj){
if(obj[i]>times){
times = obj[i];
value = i;
}
}
// 最多次数保存在times中了，字符保存在value中了
</script>
13.找出数组最大值可以有哪些方法？
<script>
var ary = [1,25,16,32,43,26,13,28,19];
// 1、 for循环遍历，比较low，就不写了
// 2、 数组排序
ary.sort()[ary.length-1];
// 3、数组排序+截取
ary.sort().splice(-1)[0];
// 4、借用Math最大值方法
Math.max.apply(null,ary);
</script>
14.创建10个a标签，点击时候弹出对应的序号
<script>
var i;
for(i=0; i<10; i++){
(function(i){
a =document.creatElement('a');
a.innnerHTML = i + '<br>'
a.addEventListenter('click',function(e){
e.preventDefault();
alert(i);
});
document.body.appedChild(a);
})(i);
}
</script>
15.生成1-10之间10个随机数，并且不重复
<script>
function getRandomArray(){
var array = [];
while (array.length < 10)
{
var random = Math.floor(Math.random() * 10) + 1;
if (array.indexOf(random) < 0)
{
array.push(random);
}
}
return array;
}
</script>
(五) React部分：
1.介绍一下 React
2. React生命周期有哪些？
渲染过程调用到的生命周期函数，主要几个要知道；
* constructor
* getInitialState
* getDefaultProps
* componentWillMount
* render
* componentDidMount
更新过程
* componentWillReceiveProps
* shouldComponentUpdate
* componentWillUpdate
* render
* componentDidUpdate
卸载过程
componentWillUnmount
3.React props属性和state属性有什么区别？
（六） Webpack部分：
1.Webpack 有哪些命令？
webpack
2.webpack 有哪些配置 ？
3.webpack.config.js 文件各代表什么？
4.配置淘宝源
npm install -g cnpm --registry=https://registry.npm.taobao.org
(七) git部分：
1.git 常用命令有哪些？
(一) 创建与合并分支
远程项目拉到本地：
git clone
从master分支创建dev分支并切换到dev分支：
git checkout master
git checkout -b dev
其中 git checkout -b dev 等价于：
(git branch dev
git checkout dev
)
查看本地当前分支
git branch
查看远程全部分支
git branch -a
修改代码，跟踪文件
git add a.html
提交代码
git commit -m "提交文件a.html"
分支合并，将dev分支合并到master
git checkout master
git merge dev
合并完成后，删除dev分支
git branch -d dev
（二）解决代码冲突
（三）Bug 分支
（四）版本回退
回退至上一个版本
git reset --hard HEAD
回退至指定版本
git reset --hard 版本号
查看以往版本号（本地commit）
git reflog
查看以往版本号及信息（所有commit）
git log
(五) 撤销修改
git state
2.如何解决代码冲突？
https://www.cnblogs.com/VVingerfly/p/6392770.html
（八）ES6部分：
1.let var const 有什么区别？
let 允许你声明一个作用域被限制在块级中的变量、语句或者表达式
let绑定不受变量提升的约束，这意味着let声明不会被提升到当前
该变量处于从块开始到初始化处理的“暂存死区”。
var 声明变量的作用域限制在其声明位置的上下文中，而非声明变量总是全局的
由于变量声明（以及其他声明）总是在任意代码执行之前处理的，所以在代码中的任意位置声明变量总是等效于在代码开头声明
const 声明创建一个值的只读引用 (即指针)
这里就要介绍下 JS 常用类型
String、Number、Boolean、Array、Object、Null、Undefined
其中基本类型 有 Undefined、Null、Boolean、Number、String，保存在栈中；
复合类型 有 Array、Object ，保存在堆中；
基本数据当值发生改变时，那么其对应的指针也将发生改变，故造成 const申明基本数据类型时，
再将其值改变时，将会造成报错， 例如 const a = 3 ; a = 5 时 将会报错；
但是如果是复合类型时，如果只改变复合类型的其中某个Value项时， 将还是正常使用；
2.什么是箭头函数
语法比函数表达式更短，并且不绑定自己的this，arguments，super或 new.target。这些函数表达式最适合用于非方法函数，并且它们不能用作构造函数。
（九）jQuery基础：
1.jQuery对象与DOM对象之间的转换
* 从 DOM 对象转到 jQuery 对象： $(obj)
* 从 jQuery 对象转到 DOM 对象： obj[0] 或 get() 方法
(十) npm 部分：
1.npm常用命令：
npm init 项目初始化，创建 package.json
npm init --yes
npm install 依赖包安装
npm install express #本地安装
npm install express -g #全局安装
npm update
npm uninstall
dependencies(生产环境依赖)
devDependencies（本地开发环境依赖，不会发布到生产环境）
npm ls -g: 列出所有全局安装npm 包
（）其他 ：
1.CommonJS AMD CMD ES6 模块化的方法
CommonJS
该规范的核心思想是允许模块通过 require 方法来同步加载所要依赖的其他模块，然后通过 exports 或 module.exports 来导出需要暴露的接口
require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;
优点：
服务器端模块便于重用
NPM 中已经有将近20万个可以使用模块包
简单并容易使用
缺点：
同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的
不能非阻塞的并行加载多个模块
实现：
服务器端的 Node.js
Browserify，浏览器端的 CommonJS 实现，可以使用 NPM 的模块，但是编译打包后的文件体积可能很大
864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
