前端面试问题CSS篇：https://my.oschina.net/u/3674939/blog/1637877
前端面试问题HTML篇：https://my.oschina.net/u/3674939/blog/1637883
前端面试问题其它篇（安全、性能、加載等）：https://my.oschina.net/u/3674939/blog/1643029
JS三座大山
JS中使用typeof能得到哪些类型
undefind、string、number、boolean、function、object
特别说明的是对象、数组、null都是object（函数虽是引用类型，但能识别），因为typeof没法区分引用类型
何时使用'==='何时使用'=='
-
双等会自动强制转换，有风险。
-
jQuery源码中推荐使用三等，我个人也是这么写的。双等可用于判断布尔值
JS变量按照存储方式区分为那些类型，并描述其特点
-
值类型
-
引用类型
如何判断一个变量是数组类型
可以用instanceof关键字
举个栗子：
var arr = []
consoe.log(arr instanceof Array) //true
写一个继承的例子
//构造函数方式
function Animal { this.name = 'pig' }
function Animal2 { Animal.call(this); this.age = 18 }
console.log(new Animal2())
//缺点：无法继承Animal的原型对象
//原型链方式
function Animal { this.name = 'pig' }
function Animal2 { this.age = 18 }
Animal2.prototype = new Animal();
console.log(new Animal2())
//缺点：实际上是共享，修改原型对象里的内容，其它继承的类也会同步修改
//组合方式
function Animal { this.name = 'pig' }
function Animal2 { Animal.call(this); this.age = 18 }
Animal2.prototype = Animal.prototype;
console.log(new Animal2())
//缺点：由于引用同一个原型对象，无法区分对象是由谁实例化的
//最终方式
function Animal { this.name = 'pig' }
function Animal2 { Animal.call(this); this.age = 18 }
Animal2.prototype = Obiect.create(Animal.prototype);
Animal2.prototype.constructor = Animal2;
console.log(new Animal2())
//解释：通过创建新的对象，不再是同一个，再指定构造函数属性为自己
创建对象的几种方式
字面量；object对象；构造函数；object create
描述new一个对象的过程
-
创建空对象，并继承原型对象
-
执行构造函数，this指向这个空对象
-
如果返回值是object则返回新对象，否则返回object
你对变量提升的理解
在执行代码时，变量和函数的声明会被提升到作用域的顶部（此时变量的值为undefined）
如果是全局，会被提升到脚本的最前面
如果是函数内，会被提升到函数内最前面，this也是
函数表达式（匿名函数）的情况
说明this几种不同的使用场景
-
作为构造函数执行
-
作为对象属性执行
-
作为普通函数执行
-
callapplybind
创建10个a标签，点击弹出对应序号
for(var i=0;i<10;i++){
(function(i){
var a = document.createElement('a');
a.innerHtml=i+'<br>';
a.onclick=function(e){
e.preventDefault();
alert(i)
}
document.body.appendChild(a)
})(i)
}
如何理解作用域
只有函数作用域和全局作用域，ES6中新增块级作用域那是后话
函数外声明的变量为全局作用域，函数内可以使用
函数内声明的变量为函数作用域，函数外不可以使用
作用域链：一个自由变量一直往上寻找（定义时的）父级作用域内的变量的过程。
自由变量：当前作用域没有定义的变量
补充：花括号内声明的变量为块级作用域，只能内部使用，减少全局污染
实际开发中闭包的应用
闭包：用一个函数去访问另一个函数内的内部变量的方式
使用场景：函数作为返回值。函数作为参数传递
同步和异步的区别？
同步会阻塞代码执行，异步不会
前端使用异步的场景？
-
定时任务：
setTimeoutsetInverval -
网络请求：ajax请求，动态<img>加载
-
事件绑定
JS运行机制
- 单线程；
- 任务队列；
- event loop事件循环；
进程和线程
- 进程：正在运行的应用程序，是应用程序的一个运行环境
- 线程：用于执行代码
获取随机数，要求是长度一致的字符串格式
var random = Math.random();
var random = random+'00000000';
var random = random.slice(0,10);
写一个能遍历对象和数组的通用forEach函数
function foreach(obj,fn){
var key;
if(obj instanceof Array){
obj.forEach(function(item,index){
fn(index,item)
})
}else{
for(key in obj){
fn(key,obj[key])
}
}
}
JS WEB API
DOM是哪种基本数据结构
树
DOM操作的常用API有哪些
获取DOM节点、获取父节点子节点、添加删除节点
DOM节点的attribute和property有何区别
-
property：是一个对象的属性的修改
-
attribute：是对html标签属性的修改
如何检测浏览器的类型
navigator.userAgent
拆解url各部分
location
事件
事件级别：DOM0:element.onclick=()=>{} DOM2:element.addEventListener('click',()=>{},false) DOM3:增加支持更多事件类型
事件模型：
- 捕获：从顶层一直往下至目标元素
- 冒泡：从目标元素一直往上至顶层
描述事件流机制
即事件发生顺序
捕获阶段=>目标阶段=>冒泡阶段
自定义事件
new Event()
手写ajax
var xhr=new XMLHttpRequest()
xhr.open('GET','/api',false);
xhr.onreadtstatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
conse.log(xhr.responseText)
}
}
xhr.send(null);
跨域
原因：同源策略，cookie、localstorage、indexdb无法读取、dom无法操作、ajax无法发送
前后端通信方式：ajax、websocket、CORS
解决：
- JSONP：网页动态插入<script>元素由它向跨源网址发出请求，服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。只能发get请求
- window.postMessage：window对象新增了一个方法，允许跨窗口通信
- CORS：跨源资源共享。服务器配置
- websocket：是HTML5提供的一种在单个 TCP 连接上进行全双工通讯的协议。
- Nginx反向代理
詳細原理參考阮一峰老師的博客
描述cookie，sessionStorage和localStorage的区别
都是本地存储
cookie本身用于客户端和服务器的通信。
存储量少，约4k。
每次请求都会携带，会影响获取资源的效率。
sessionStorage localStorage H5的本地存储技术，
存储容量大
AMD,CMD,CommonJS的区别
-
AMD：require.js，异步的，依赖前置
-
CMD：swa.js，同步的，就近依赖
-
CommonJS：服务端模块化规范，
module.exports={key:value}匿名输出（暴露），exports.key=value对象输出
-
ES6模块化：export/import
詳細原理參考：很全很全的JavaScript的模块讲解