- HTML5 和 CSS3 有哪些
https://www.cnblogs.com/star91/p/5659134.html
- BFC
- CSS 清浮动处理
- 移动端 1px
首先要了解虚拟像素（css 像素）、物理像素（设备像素）、逻辑像素 和设备像素比(dpr)的概念，然后要了解我们设计师的设计稿一般都是 750*1334，这个设计稿上的 1px 是 css 像素, 而设计师要的效果是 1px 的物理像素，所以需要除于设备像素比(dpr)，比如 iPhone6 的 dpr 是 2，就 1/2
dpr 的意思可以这样理解，1css 像素要用 dpr 个物理像素来表示
- 圣杯布局和双飞翼布局
- CSS 画扇形
表达式是由运算符构成，并运算产生结果的语法结构。每个表达式都会产生一个值，它可以放在任何需要一个值的地方
语句则是由“；（分号）”分隔的句子或命令。如果在表达式后面加上一个“；”分隔符，这就被称为“表达式语句”。
- getcomputedstyle 和 style 的区别
1.只读与可写
getComputedStyle方法是只读的，只能获取样式，不能设置；而element.style能读能写，能屈能伸。
2.获取的对象范围
getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；
而element.style只能获取元素style属性中的CSS样式。
因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值（如果有）就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异),
而element.style就是0。
3.作用
getComputedStyle方法有一个很重要的，类似css()方法没有的功能——获取伪类元素样式
4.兼容性
getComputedStyle方法IE6~8是不支持的
- 判断数据类型的方法
- typeof
console.log(typeof 2); // number
console.log(typeof true); // boolean
console.log(typeof 'str'); // string
console.log(typeof undefined); // undefined
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof function(){}); // function
console.log(typeof null); // object
- instanceof
console.log(2 instanceof Number); // false
console.log(true instanceof Boolean); // false
console.log('str' instanceof String); // false
console.log([] instanceof Array); // true
console.log(function(){} instanceof Function); // true
console.log({} instanceof Object); // true
- Object.prototype.toString.call()
var toString = Object.prototype.toString;
console.log(toString.call(2)); //[object Number]
console.log(toString.call(true)); //[object Boolean]
console.log(toString.call('str')); //[object String]
console.log(toString.call([])); //[object Array]
console.log(toString.call(function(){})); //[object Function]
console.log(toString.call({})); //[object Object]
console.log(toString.call(undefined)); //[object Undefined]
console.log(toString.call(null)); //[object Null]
- 变量提升&作用域
- 闭包
- this
1. 普通函数的调用：this指向window(浏览器环境)。
2. 对象方法的调用：this指向调用对象。（隐式绑定）
3. 构造函数：this指向构造函数实例。
4. apply、call、bind：this指向绑定值。（显示绑定）
5. 箭头函数this：this指向外层第一个普通函数调用的this。（默认绑定）(对于箭头函数，只要看它在哪里创建)
优先级
1. 函数是否存在new绑定调用：如果是的话this绑定到新创建的对象上。
2. 函数是否通过apply、call、bind显示绑定：如果是，this绑定到指定对象上。
3. 函数是否在对象方法隐式调用：如果是的话，this绑定到调用对象。
4. 如果上面三条都不满足的话：在严格模型下，this绑定到undefined，在非严格模式下，this绑定到全局对象上。
5.0 new 执行的操作
1. 创建一个全新的对象。
2. 这个新对象会被执行 [[Prototype]] 连接。
3. 这个新对象会绑定到函数调用的 this。
4. 如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象。
手动实现 new
function New(Constructor, ...args){
let obj = {}; // 创建一个新对象
Object.setPrototypeOf(obj, Constructor.prototype); // 连接新对象与函数的原型
return Constructor.apply(obj, args) || obj; // 执行函数，改变 this 指向新的对象
}
function Foo(a){
this.a = a;
}
New(Foo, 1); // Foo { a: 1 }
function _new() {
let target = {}; //创建的新对象
//第一个参数是构造函数
let [constructor, ...args] = [...arguments];
//执行[[原型]]连接;target 是 constructor 的实例
target.__proto__ = constructor.prototype;
//执行构造函数，将属性或方法添加到创建的空对象上
let result = constructor.apply(target, args);
if (result && (typeof (result) == "object" || typeof (result) == "function")) {
//如果构造函数执行的结构返回的是一个对象，那么返回这个对象
return result;
}
//如果构造函数返回的不是一个对象，返回创建的新对象
return target;
}
- 理解 constructor、prototype、proto和原型链
任何一个对象都有constructor
对象和函数的constructor都是Function
- let const var
- setTimeout 和 setInterval 和 requestAnimationFrame
- 关于 setInterval 与 setTimeout 作用域问题
- 注意点——setTimeout、setInterval 使用
- 你真的了解 setTimeout 和 setInterval 吗？
- 关于 setTimeout
- 深度解密 setTimeout 和 setInterval——为 setInterval 正名！
- 从 setTimeout/setInterval 看 JS 线程
- 你知道的 requestAnimationFrame【从 0 到 0.1】
- Event Loop
- 这一次，彻底弄懂 JavaScript 执行机制
- JavaScript 运行机制详解：再谈 Event Loop
- JavaScript 的 Event Loop 详解
- Visualizing the javascript runtime at runtime
在 JSON.stringify()阶段
1.如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式，而不是对象的形式
2.如果obj里有RegExp(正则表达式的缩写)、Error对象，则序列化的结果将只得到空对象
3、如果obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失
4、如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null
5、JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor
6、如果对象中存在循环引用的情况也无法正确实现深拷贝
- javaScript 遍历对象、数组总结 对象的属性分为三种： 是否是自身属性 是否可以枚举 是否是 Symbol 属性 注意：对象没有 for...of...
举个栗子
var a = { a: 1 };
var b = { b: 2 };
b.__proto__ = a;
Object.defineProperty(b, "c", {
value: 3
});
b[Symbol()] = 4;
Object.keys(b); // ["b"] 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).
for (var i in b) {
console.log(i, ":", b[i]);
} // b : 2 a : 1 循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)
Object.getOwnPropertyNames(obj); // ["b", "c"] 返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).
Reflect.ownKeys(b); // ["b", "c", Symbol()] 返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.严格模式主要有以下限制。
变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用with语句
不能对只读属性赋值，否则报错
不能使用前缀 0 表示八进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量delete prop，会报错，只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字（比如protected、static和interface）
- Context
- render prop
- 组合组件，提升组件层次，把组件作为 prop
- redux
在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。
-
跨站攻击
1. XSS（cross-site-scripting, 跨站脚本）攻击
解决方法： 字符串转义
2. 跨站请求伪造（CSRF）
解决方法： 1.明文传递cookie
2. 请求一个随机字符串（只能用一次）
- ajax 跨域，这应该是最全的解决方案了
- 浏览器同源政策及其规避方法
- 跨域资源共享 CORS 详解
- 可以通过 Symbol 进行 iframe 的跨域 http://es6.ruanyifeng.com/#docs/symbol
iframe = document.createElement('iframe');
iframe.src = String(window.location);
document.body.appendChild(iframe);
iframe.contentWindow.Symbol.for('foo') === Symbol.for('foo')
// true
- 限制网站被 iframe 包裹
添加这个 http 头可以限制别人把你的网站套成它的 iframe
X-Frame-Options: SAMEORIGIN
- 前端该如何准备数据结构和算法？
- js 实现排序算法（冒泡、选择、插入、二分插入、快速、希尔）
- 前端面试中的常见的算法问题
- 图形算法（邻接矩阵）
- 5 分钟带你领略:某跳动公司面试出镜率最高的算法之一——虚拟十叉树建模问题
- 【从蛋壳到满天飞】JS 数据结构解析和算法实现-集合和映射
- 聊聊面试必考-递归思想与实战