什么是盒子模型？
由元素内容，border，margin，padding四部分组成盒子模型。
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
src和href的区别？
src是引入外部资源，比如，js,css。
href是建立和当前元素和跳转页面之间的链接，用于超链接。
怎样添加、移除、移动、复制、创建和查找节点？
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
数组去重
[...new Set([1,2,3,1,'a',1,'a'])]
统计字符串/数组 中字母个数或统计最多字母数
//字符串
var strs = "asdasdadd";
function getmaxstr(str){
if(str.length == 1){return str;}
var newarr = [];
for(var i = 0 ; i<str.length; i++ ){
if(!newarr[str.charAt(i)]){
newarr[str.charAt(i)] = 1;
}else{
newarr[str.charAt(i)] +=1;
}
}
console.log(newarr);
var maxkey='';
var maxvalue=1;//设定一个值
for(var k in newarr){
if(newarr[k]> maxvalue){//根据这个值做判读 将数组中的每个元素 与这个值做比较！
maxvalue = newarr[k];//出现的次数
maxkey = k;//次数最多的 字母
}
}
console.log(maxkey);
return maxvalue;
}
getmaxstr(strs);
//计算数组中每个元素出现的次数
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce(function (allNames, name) {
console.log(allNames, name)
if (name in allNames) {
allNames[name]++;
}
else {
allNames[name] = 1;
}
return allNames;
}, {});
console.log(countedNames)
写一个function，清除字符串前后的空格。（兼容所有浏览器）？
function strTrim(str){
if(!String.prototype.trim){
return str.replace(/^\s+/,'').replace(/\s+$/,'');
}else{
return str.trim();
}
}
使用正则表达式验证邮箱格式？
^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$
你是如何推动你们的框架的，你是如何给框架升级的？
首先在架构项目前思考：
① 如何将一个复杂的页面拆分为一个个独立的页面组件模块
② 如何将分拆后的业务组件模块重新合为一个完整的页面
③ 从重构角度看组件化开发带来的好处
④ 从前端优化的角度看待组件化开发
title与h1的区别，b与strong的区别，i与em的区别？
首先要明白的是什么是物理元素，什么是逻辑元素？title,b,i是物理行为，比如b告诉浏览器我加粗了，而h1，strong，em是逻辑行为，通过语义化方式告诉浏览器我是重要的。
给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，先执行冒泡还是捕获？
捕获先于冒泡。顶部捕获=>底部冒泡=>第二层捕获=>第二层冒泡。
viewport与rem布局
viewport 是用户网页的可视区域。
viewport的大小决定了，css中的设置多少像素能刚好占满屏幕。例如，viewport=320,那么设置div的宽度为320px,则div刚好能占满屏幕
viewport的大小由width于scale共同决定，只设置width如果大于屏幕会出现滚动条，rem布局图片，宽高，布局等等，font-size用媒体查询解决。
dpr=物理像素/css像素（window.devicePixelRatio）
浏览器缓存
分为强缓存和协商缓存
协商缓存：Etag/If-None-Match
- Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定，具体下文中介绍）。
- If-None-Match：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match （Etag的值）。
web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定返回200或304。
为什么有了Last-Modified还要Etag
你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新，为什么还需要Etag（实体标识）呢？HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题：
- Last-Modified标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的修改时间
- 如果某些文件会被定期生成，当有时内容并没有任何变化，但Last-Modified却改变了，导致文件没法使用缓存
- 有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形
Etag 的实现
在node 的后端框架express 中引用的是npm包etag,etag 支持根据传入的参数支持两种etag的方式：
一种是文件状态（大小，修改时间），另一种是文件内容的哈希值。
比较常用的文件hash算法有MD5和SHA-1。
我用的是MD5算法，java中，计算MD5可以用MessageDigest这个类。
函数节流和函数防抖
函数节流是指一定时间内js方法只跑一次。
函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。
XSS与CSRF攻击
XSS：跨站脚本（Cross-site scripting），通过客户端脚本语言（如JavaScript）在一个论坛发帖中发布一段恶意的JavaScript代码就是脚本注入，如果这个代码内容有请求外部服务器，那么就叫做XSS。
XSS类型:
反射型：经过后端，不经过数据库
存储型：经过后端，经过数据库
DOM：不经过后端
XSS防御:
1.白名单重新整理，用户输入的html，遍历树节点拿到数据，重新构造dom
树，树中标签，属性从白名单中获取，不能识别的则丢弃。
2.过滤器对请求中的特殊字符进行编码转化，如< 转码为 <。.
3.对表单内容做长度校验，长度短，无法输入攻击代码。
CSRF：跨站请求伪造（Cross-site request forgery），冒充用户发起请求,完成一些违背用户意愿的请求（如恶意发帖，删帖，改密码，发邮件等）。
CSRF防御：
那就使用token吧，服务端生成随机码给前端。
事件中target、this、currentTarget的区别。
target是触发事件对象，冒泡的时候指向子。
currentTarget 恒等于 this ,是绑定事件的对象，冒泡的时候指向父。
输入url整个过程。
- 网络传输：输入网址 =>dns解析ip=>TCP三次握手=>发送http请求=>服务器重定向=>处理请求，返回http响应=>得到数据。
- dom渲染：构建dom树（构建dom节点）=>构建渲染树（解析样式信息）=>布局渲染树（布局dom节点）=>绘制渲染树（绘制dom节点）。
WebSocket
前端：
var ws = new WebSocket("wss://echo.websocket.org");
ws.onopen = function(evt) {
console.log("Connection open ...");
ws.send("Hello WebSockets!");
};
ws.onmessage = function(evt) {
console.log( "Received Message: " + evt.data);
ws.close();
};
ws.onclose = function(evt) {
console.log("Connection closed.");
};
服务端：
var ws = require("nodejs-websocket");
console.log("开始建立连接...")
var game1 = null,game2 = null , game1Ready = false , game2Ready = false;
var server = ws.createServer(function(conn){
conn.on("text", function (str) {
console.log("收到的信息为:"+str)
if(str==="game1"){
game1 = conn;
game1Ready = true;
conn.sendText("success");
}
if(str==="game2"){
game2 = conn;
game2Ready = true;
}
if(game1Ready&&game2Ready){
game2.sendText(str);
}
conn.sendText(str)
})
conn.on("close", function (code, reason) {
console.log("关闭连接")
});
conn.on("error", function (code, reason) {
console.log("异常关闭")
});
}).listen(8001)
console.log("WebSocket建立完毕")
顺序存储结构和链式存储结构的优缺点比较
① 顺序存储时，相邻数据元素的存放地址也相邻（逻辑与物理统一）；要求内存中可用存储单元的地址必须是连续的。
优点：存储密度大（＝1），存储空间利用率高。缺点：插入或删除元素时不方便。
②链式存储时，相邻数据元素可随意存放，但所占存储空间分两部分，一部分存放结点值，另一部分存放表示结点间关系的指针。
优点：插入或删除元素时很方便，使用灵活。缺点：存储密度小（<1），存储空间利用率低。
CROS跨域资源共享
- 简单请求：get, post
服务端设置：Access-Control-Allow-Origin： "*"
前端不需要。 - 非简单请求：put,delete
服务端设置：Access-Control-Allow-Origin： "*"; 还需要设置method和header
前端需要设置header。
桌面应用做过吗？
神奇的Electron。
React的setState到底做了什么？
如下代码：
class App extends React.Component {
constructor() {
super();
this.state = {
num: 0
}
}
componentDidMount() {
for ( let i = 0; i < 10; i++ ) {
this.setState( {num: this.state.num + 1} );
console.log(this.state.num) // 10次0
}
}
render() {
return ( <div className='App'>
<h1>{this.state.num}</h1>
</div> );
}
}
原因在于，当你传一个普通的对象 this.setState( {num: this.state.num + 1} ) 时，他会进入队列，队列里就做一件事 Object.assign( this.state, stateChange ) ，this.state永远都是之前的0。
100次以后就通过 flush 方法清空队列，包裹flush的是 **Promise.resolve().then(flush) **，使用微异步跳出队列，渲染页面。
- 我们换下代码
componentDidMount() {
for ( let i = 0; i < 10; i++ ) {
this.setState( prevState => {
console.log( prevState.num ); // 打印1-9
return {
num: prevState.num + 1
}
} );
}
}
原来setState支持传函数，这样它内部通过递归方式获取前一个值，就可以做到累加，并且还只会渲染一次页面，多神奇。
