1、meta标签
提供给页面的一些元信息（名称/值对）， 比如针对搜索引擎和更新频度的描述和关键词。
-
name：名称/值对中的名称。常用的有author、description、keywords、generator、revised、others。 把 content 属性关联到一个名称。 -
http-equiv：没有name时，会采用这个属性的值。常用的有content-type、expires、refresh、set-cookie。把content属性关联到http头部。 -
content： 名称/值对中的值， 可以是任何有效的字符串。 始终要和 name 属性或 http-equiv 属性一起使用。 -
scheme： 用于指定要用来翻译属性值的方案。
2. css哪些属性可以继承
-
字体相关：line-height, font-family, font-size, font-style, font-variant, font-weight, font
-
文本相关： letter-spacing, text-align, text-indent, text-transform, word-spacing
-
列表相关：list-style-image, list-style-position, list-style-type, list-style
-
颜色：color
3. css3有哪些新属性
（1）边框：
-
border-radius：圆角边框，border-radius:25px; -
box-shadow：边框阴影，box-shadow: 10px 10px 5px #888888; -
border-image：边框图片，border-image:url(border.png) 30 30 round;
（2）背景：
-
background-size：规定背景图片的尺寸，background-size:63px 100px; -
background-origin：规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区域。background-origin:content-box; -
CSS3 允许您为元素使用多个背景图像。background-image:url(bg_flower.gif),url(bg_flower_2.gif);
（3）文本效果：
-
text-shadow：向文本应用阴影，可以规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。text-shadow: 5px 5px 5px #FF0000; -
word-wrap：允许文本进行换行。word-wrap:break-word;
（4）字体：CSS3 @font-face 规则可以自定义字体。
（5）2D 转换（ transform）
-
translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。 transform: translate(50px,100px); -
rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform: rotate(30deg); -
scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。transform: scale(2,4); -
skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg,20deg); -
matrix()： 把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);
（6）3D 转换
-
rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg); -
rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);
（7）transition：过渡效果，使页面变化更平滑
-
transition-property：执行动画对应的属性，例如 color，background 等，可以使用 all 来指定所有的属性。 -
transition-duration：过渡动画的一个持续时间。 -
transition-timing-function：在延续时间段，动画变化的速率，常见的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier 。 -
transition-delay：延迟多久后开始动画。
简写为： transition: [<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>];
（8）animation：动画
使用CSS3 @keyframes 规则。
-
animation-name: 定义动画名称 -
animation-duration: 指定元素播放动画所持续的时间长 -
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)： 指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。 -
animation-delay: 指定元素动画开始时间 -
animation-iteration-count:infinite | <number>：指定元素播放动画的循环次 -
animation-direction: normal | alternate： 指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。 -
animation-play-state:running | paused：控制元素动画的播放状态。
简写为： animation:[<animation-name> || <animation-duration>|| <animation-timing-function> || <animation-delay> ||<animation-iteration-count> || <animation-direction>]
4. 闭包是什么，什么时候闭包会消除?
因为作用域链，外部不能访问内部的变量和方法，这时我们就需要通过闭包，返回内部的方法和变量给外部，从而就形成了一个闭包。
JavaScript是一门具有自动垃圾回收机制的编程语言，主要有两种方式：
垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记（可以使用任何标记方式）。然后，它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后，垃圾收集器完成内存清除工作，销毁那些带标记的值并回收它们所占用的内存空间。
引用计数（reference counting）的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0 时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾收集器下次再运行时，它就会释放那些引用次数为零的值所占用的内存。
导致问题：会导致循环引用的变量和函数无法回收。
解决：将用完的函数或者变量置为null。
5. 怎么理解js是单线程的
主要说一下异步以及事件循环机制，还有事件队列中的宏任务、微任务。
-
macrotask：主代码块，setTimeout，setInterval、setImmediate等。 -
microtask：process.nextTick（相当于node.js版的setTimeout），Promise 。process.nextTick的优先级高于Promise。
6. 有哪些排序算法，时间复杂度是多少？什么时候快排的效率最低？
| 排序算法 | 最坏事件复杂度 | 平均时间复杂度 | 稳定度 | 空间复杂度 |
|---|---|---|---|---|
| 冒泡排序 | O(n^2) | O(n^2) | 稳定 | O(1) |
| 插入排序 | O(n^2) | O(n^2) | 稳定 | O(1) |
| 选择排序 | O(n^2) | O(n^2) | 稳定 | O(1) |
| 快速排序 | O(n^2) | O(n*log2n) | 不稳定 | O(log2n)~O(n) |
| 二叉树排序 | O(n^2) | O(n*log2n) | 不一定 | O(n) |
| 堆排序 | O(n*log2n) | O(n*log2n) | 不稳定 | O(1) |
7. 原生ajax的请求过程
创建全平台兼容的XMLHttpRequest对象：
-
function getXHR(){ -
var xhr = null; -
if(window.XMLHttpRequest) {// 兼容 IE7+, Firefox, Chrome, Opera, Safari -
xhr = new XMLHttpRequest(); -
} else if (window.ActiveXObject) { -
try { -
xhr = new ActiveXObject("Msxml2.XMLHTTP");// 即MSXML3 -
} catch (e) { -
try { -
xhr = new ActiveXObject("Microsoft.XMLHTTP");// // 兼容 IE6, IE5，很老的api,虽然浏览器支持,功能可能不完善,故不建议使用 -
} catch (e) { -
alert("您的浏览器暂不支持Ajax!"); -
} -
} -
} -
return xhr; -
}
Ajax请求数据的过程：
-
var xhr = getXHR(); -
xhr.open('GET', url/file,true); //设置请求方式，url，以及是否异步 -
xhr.onreadystatechange = function() { //设置回调监听函数 -
if(xhr.readyState==4){ -
if(xhr.status==200){ -
var data=xhr.responseText; -
console.log(data); -
} -
}; -
xhr.onerror = function() { -
console.log("Oh, error"); -
}; -
xhr.send(); //发送请求
8. http状态码，cookie字段，cookie一般存的是什么，session怎么存在的？
cookie和session都是为了弥补http协议的无状态特性，对server端来说无法知道两次http请求是否来自同一个用户，利用cookie和session就可以让用户只登录一次，server就知道某个请求是否需用重新登录。
1. cookie：客户端第一次正常访问服务器，服务器在response headers中返回与用户信息相关的cookie，客户端收到后把cookie保存在本地，下次再发请求时会在request headers中带上这个cookie，服务器收到这个cookie就知道用户状态了。cookie可以设置过期时间，默认值是-1，表示关闭浏览器时cookie就会失效，值为0时表示立马失效，相当于删除cookie（cookie没有删除的方法），服务器和客户端都可以设置cookie，但不可以操作另一个域名下的cookie。
2. session: 客户端第一次正常访问服务器，服务器生成一个sessionid来标识用户并保存用户信息（服务器有一个专门的地方来保存所有用户的sessionId），在response headers中作为cookie的一个值返回，客户端收到后把cookie保存在本地，下次再发请求时会在request headers中带上这个sessionId，服务器通过查找这个sessionId就知道用户状态了，并更新sessionId的最后访问时间。sessionId也会可以设置失效时间，比如如果60分钟内某个session都没有被更新，服务器就会删除这个它。
总言之cookie是保存在客户端，session是存在服务器，session依赖于cookie。
9. http请求方式有哪些？
-
HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。
-
HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。
1. css选择器，怎么选择相同的类
id、class、标签、伪类、通配符等。可以用getElementsByClassName（）选择相同的类。
2. css3有哪些伪类，伪类选择器有哪些
这里要区分一下伪类和伪元素的概念。根本区别在于它们是否创造了新的元素(抽象)。
-
伪类：用于向某些选择器添加特殊的效果。例如，a标签的
:link,:visited,:hover,:active; 以及:first-child,:last-child。 -
伪元素：是html中不存在的元素，用于将特殊的效果添加到某些选择器。例如
:before,:after,:first-letter,:first-line。css3只新增了一个伪元素::selection（改变用户所选取部分的样式）。
参考： CSS3 选择器——伪类选择器
3. OSI七层网络模型
| OSI七层模型 | 作用 | 对应协议 | 对应设备 |
|---|---|---|---|
| 应用层 | 它是计算机用户，以及各种应用程序和网络之间的接口 | HTTP, FTP, SMTP, POP3 | 计算机设备 |
| 表示层 | 信息的语法语义以及它们的关系，如加密解密、转换翻译、压缩解压缩 | IPX, LPP, XDP | |
| 会话层 | 建立、维护、管理应用程序之间的会话 | SSL, TLS, DAP, LDAP | |
| 传输层 | 服务点编址，分段与重组、连接控制、流量控制、差错控制 | TCP, UDP | 防火墙 |
| 网络层 | 为网络设备提供逻辑地址，进行路由选择、分组转发 | IP ARP RARP ICMP IGMP | 路由器 |
| 数据链路层 | 物理寻址，同时将原始比特流转变为逻辑传输路线 | PPTP, ARP, RARP | 交换机 |
| 物理层 | 机械、电子、定时接口通道信道上的原始比特流传输 | IEEE 802.2, Ethernet v.2, Internetwork | 网卡 |
参考： 一张非常强大的OSI七层模型图解
4. MVC和MVVM的区别
-
Model用于封装和应用程序的业务逻辑相关的数据以及对数据的处理方法；
-
View作为视图层，主要负责数据的展示；
-
Controller定义用户界面对用户输入的响应方式，它连接模型和视图，用于控制应用程序的流程，处理用户的行为和数据上的改变。
MVC将响应机制封装在controller对象中，当用户和你的应用产生交互时，控制器中的事件触发器就开始工作了。
MVVM把View和Model的同步逻辑自动化了。以前Controller负责的View和Model同步不再手动地进行操作，而是交给框架所提供的数据绑定功能进行负责，只需要告诉它View显示的数据对应的是Model哪一部分即可。也就是双向数据绑定，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。
参考： 浅析前端开发中的 MVC/MVP/MVVM 模式
5. 用过哪些设计模式
（1）单例模式
定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。
实现方法：先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。
适用场景：一个单一对象。比如：弹窗，无论点击多少次，弹窗只应该被创建一次。
（2）发布/订阅模式
定义：又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。
场景：订阅感兴趣的专栏和公众号。
（3）策略模式
定义：将一个个算法（解决方案）封装在一个个策略类中。
优点：
-
策略模式可以避免代码中的多重判断条件。
-
策略模式很好的体现了开放-封闭原则，将一个个算法（解决方案）封装在一个个策略类中。便于切换，理解，扩展。
-
策略中的各种算法可以重复利用在系统的各个地方，避免复制粘贴。
-
策略模式在程序中或多或少的增加了策略类。但比堆砌在业务逻辑中要清晰明了。
-
违反最少知识原则，必须要了解各种策略类，才能更好的在业务中应用。
应用场景：根据不同的员工绩效计算不同的奖金；表单验证中的多种校验规则。
（4）代理模式
定义：为一个对象提供一个代用品或占位符，以便控制对它的访问。
应用场景：图片懒加载（先通过一张loading图占位，然后通过异步的方式加载图片，等图片加载好了再把完成的图片加载到img标签里面。）
（5）中介者模式
定义：通过一个中介者对象，其他所有相关对象都通过该中介者对象来通信，而不是互相引用，当其中的一个对象发生改变时，只要通知中介者对象就可以。可以解除对象与对象之间的紧耦合关系。
应用场景： 例如购物车需求，存在商品选择表单、颜色选择表单、购买数量表单等等，都会触发change事件，那么可以通过中介者来转发处理这些事件，实现各个事件间的解耦，仅仅维护中介者对象即可。
（6）装饰者模式
定义：在不改变对象自身的基础上，在程序运行期间给对象动态的添加方法。
应用场景： 有方法维持不变，在原有方法上再挂载其他方法来满足现有需求；函数的解耦，将函数拆分成多个可复用的函数，再将拆分出来的函数挂载到某个函数上，实现相同的效果但增强了复用性。
参考： JavaScript设计模式
8. es6相比es5有哪些优点
大概说一下：let、const，模板字符串，箭头函数，做异步处理的promise、generator、async await，es6模块等。
参考： 阮一峰 —— ECMAScript 6 入门
11. 懒加载怎么实现
场景：一个页面中很多图片，但是首屏只出现几张，这时如果一次性把图片都加载出来会影响性能。这时可以使用懒加载，页面滚动到可视区在加载。优化首屏加载。
实现：img标签src属性为空，给一个data-xx属性，里面存放图片真实地址，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src。
优点：页面加载速度快，减轻服务器压力、节约流量，用户体验好。
1. 为什么要用flex布局，align-items和justify-content的区别
传统布局基于盒模型，非常依赖 display属性 、position属性 、float属性。而flex布局更灵活，可以简便、完整、响应式地实现各种页面布局，比如水平垂直居中。
align-items：定义在垂直方向上的对齐方式；
justify-content：定义在水平方向上的对齐方式。
2. webpack是怎么打包的，babel又是什么？
把项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
babel将es6、es7、es8等语法转换成浏览器可识别的es5或es3语法。
3. saas和less不同于普通css的地方
-
定义变量，可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值；
-
嵌套写法，父子关系一目了然；
-
使用运算符，可以进行样式的计算；
-
内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等；
-
继承：为多个元素定义相同样式的时候，我们可以考虑使用继承的做法；
-
Mixins （混入）：有点像是函数或者是宏，当某段 CSS经常需要在多个元素中使用时，可以为这些共用的 CSS 定义一个Mixin，然后只需要在需要引用这些 CSS 地方调用该 Mixin 即可。
4. es 6模块和其他模块不同的地方
对比了一下es6模块和CommonJS模块：
| 区别 | CommonJS | es6 |
|---|---|---|
| 加载原理 | 第一次加载模块就会执行整个模块，再次用到时，不会执行该模块，而是到缓存中取值。 | 不会缓存运行结果，动态的去被加载的模块中取值，并且变量总是绑定其所在模块。 |
| 输出 | 值的拷贝（模块中值的改变不会影响已经加载的值） | 值的引用（静态分析，动态引用，原来模块值改变会改变加载的值） |
| 加载方式 | 运行时加载（加载整个模块，即模块中的所有接口） | 编译时加载（只加载需要的接口） |
| this指向 | 指向当前模块 | 指向undefined |
| 循环加载 | 只输出已经执行的部分，还未执行的部分不会输出 | 遇到模块加载命令import时不会去执行模块，而是生成一个动态的只读引用，等到真正用到时再去模块中取值。只要引用存在，代码就能执行。 |
5. 有没有用过es6的一些异步处理函数
Promise，generator，async await
6. redux怎么处理异步操作
可以引入Redux-thunk或者redux-promise这种中间件，可以延迟事件的派发。
其中的原理：是因为他们用了applymiddleware()包装了store的dispatch方法，拥有可以处理异步的能力。
7. 为什么reducer要是个纯函数，纯函数是什么？
纯函数：对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用，也不依赖外部环境的状态。
原因：Redux只通过比较新旧两个对象的存储位置来比较新旧两个对象是否相同（浅比较）。如果你在reducer内部直接修改旧的state对象的属性值，那么新的state和旧的state将都指向同一个对象。因此Redux认为没有任何改变，返回的state将为旧的state。两个state相同的话，页面就不会重新渲染了。
因为比较两个Javascript对象所有的属性是否相同的的唯一方法是对它们进行深比较。但是深比较在真实的应用当中代价昂贵，因为通常js的对象都很大，同时需要比较的次数很多。因此一个有效的解决方法是作出一个规定：无论何时发生变化时，开发者都要创建一个新的对象，然后将新对象传递出去。同时，当没有任何变化发生时，开发者发送回旧的对象。也就是说，新的对象代表新的state。
8. 高阶函数是什么，怎么去写一个高阶函数
高阶函数：参数值为函数或者返回值为函数。例如map，reduce，filter，sort方法就是高阶函数。
编写高阶函数，就是让函数的参数能够接收别的函数。
9. vue跟react的区别是什么
没有用过vue，所以就只说了vue具有双向绑定，react是单向数据流。
参考： Vue.js与React的全面对比
10. nodejs处理了什么问题
可以处理高并发的I/O，也能与websocket配合，开发长连接的实时交互应用程序。
11. 响应式布局，怎么做移动端适配
使用媒体查询可以实现响应式布局。
移动端适配方案：
（1）meta viewport：让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。
-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
width=device-width: 让当前viewport宽度等于设备的宽度user-scalable=no: 禁止用户缩放initial-scale=1.0: 设置页面的初始缩放值为不缩放maximum-scale=1.0: 允许用户的最大缩放值为1.0minimum-scale=1.0: 允许用户的最小缩放值为1.0
（2）媒体查询（响应式)
（3）动态 rem 方案
5. 如何实现水平垂直居中，relative、absolute、fixed
（1）使用表格
-
.container{ -
width: 600px; -
height: 600px; -
background: #eee; -
display: table-cell; -
text-align: center; -
vertical-align: middle; -
} -
.center{ -
background: blue; -
}
（2）css3的transform属性
-
.container{ -
width: 100%; -
height: 400px; -
background: #eee; -
position: relative; -
} -
.center{ -
background: blue; -
position:absolute; -
top: 50%; -
left: 50%; -
transform: translate(-50%, -50%); -
}
（3）flex布局
-
.container{ -
width: 100%; -
height: 400px; -
background: #eee; -
display: flex; -
justify-content: center; -
align-items: center; -
} -
.center{ -
width: 100px; -
height: 100px; -
background: blue; -
text-align: center; -
}
-
relative：相对于自己的定位；
-
absolute：相对于最近一级定位元素的定位；
-
fixed：相对于窗口的定位。
实现call方法
-
Function.prototype.call2 = function (context) { -
var context = Object(context) || window -
context.fn = this -
var args = [] -
for (var i = 1; i < arguments.length; i++) { -
args.push('arguments[' + i +']') -
} -
-
var res = eval('context.fn(' + args + ')') -
-
delete context.fn -
return res -
}
数组有哪些方法，哪些会改变原数组
改变原数组的方法：pop、push、reverse、shift、sort、splice、unshift，以及两个ES6新增的方法copyWithin 和 fill；
不改变原数组（复制）：concat、join、slice、toString、toLocaleString、indexOf、lastIndexOf、未标准的toSource以及ES7新增的方法includes；
循环遍历：forEach、every、some、filter、map、reduce、reduceRight 以及ES6新增的方法entries、find、findIndex、keys、values。
Map有哪些方法
Map的方法：set, get, has, delete, clear
遍历方法：
keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历 Map 的所有成员。
742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
