Categories

Friends

COLORFUL

经典前端面试题

HTTP状态码

HTTP状态码速记

HTTP请求头

HTTP请求头详解

从输入url到页面加载都发生了什么事

  • 解析域名（host，缓存，DNS域名解析服务器）
  • 浏览器传输层建立TCP连接
  • 浏览器向服务器发送请求命令
  • 三次握手操作
  • 服务器构建并响应（返回响应头及内容）
  • 服务器断开连接
  • 浏览器构建DOM树
  • 浏览器构建Render树
  • 浏览器加载图片，媒体等静态资源
  • 浏览器渲染Render树

cookie，localstorage，sessionstorage的区别

  • localstorage,sessionstorage的每个域名每个端口的缓存限制是5M；cookie每个domain只能有20条cookie，每条cookie的限制是4k，IE下是2k
  • localstorage是永久存储，永不失效除非手动删除，属于持久保存；cookie是跟着页面走的; sessionstorage关掉页面就消失，属于非持久保存
  • cookie会在客户端和浏览器端进行传递，localstorage和sessionstorage只存在本地
  • sessionstorage在同域同窗口中共享，localstorage和cookie是在同源窗口中共享，不同窗口也可以共享
  • localstorage和sessionstorage自己拥有setItem,getItem等API;而cookie需要自己封装响应的API
  • localstorage和sessionstorage不支持IE7及以下浏览器不支持，cookie低版本浏览器也可以支持

doctype的几种模式

strict（严谨模式），transitional（过渡模式），frameset（框架模式）使用的是html 4.0.1的规范
怪异模式是使用浏览器自己的方式解析，因此不同的浏览器不一样，所以称为诡异模式，如果doctype没有设置，会采用怪异模式渲染

jsonp实现原理

var callbackName = 'iAmTheCallback';
window[callbackName] = function (uuu, vvv, www) {
// 对返回的数据做后续处理
}
var script = document.createElement('script');
script.src = 'http://melon.github.io/xxx/yyy?callback='+callbackName;
document.body.appendChild(script);

grunt与gulp的区别

  • gulp使用node stream，使用.pipe()方法使数据从上游流下
  • gulp相比grunt设计的更好，需要很少的配置，而且很快，api简单，易学，核心设计基于unix流的概念，各个功能通过六进行整合并完成复杂的任务
  • gulp使用代码优于配置的策略，维护gulp就像写代码，遵循commonjs规范，因此跟写node没有什么区别
  • grunt在I/O过程中会产生一些中间态的临时文件，一些任务生成临时文件，其他任务可能会基于临时文件再做处理并生成最终文件
  • gulp利用流的方式进行文件处理，通过管道将多个任务链接起来，只有一次I/O操作

为什么使用流：
如果不使用流，读取文件的时候会缓存在内存中,使用fs.createReadStream替代fs.readFile, steam可以让node读取文件一定量的时候就开始向客户端发送响应的内容，无需服务器缓存
资料参考

捕获与冒泡及IE兼容性区别

DOM的事件模型（DOM事件流）：捕获型事件和冒泡型事件z
事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
IE只支持事件冒泡
支持W3C标准的浏览器通过addEventListener(event,fn,useCapture)方法的第三个参数来区分是事件冒泡还是事件捕获，不支持W3C标准的浏览器通过attachEvent()方法，默认是事件冒泡时执行，所以要兼容，只能使用addEventListener，并设置useCapture为false

解决跨域访问的几种方法

jsonp、 document.domain+iframe、window.name、window.postMessage、服务器上设置代理页面
其中html5中提供的postMessage不能兼容IE，postMessage传递的参数有data,source,origin（协议+主机+端口号） 同源的话是通过contentWindow获取子窗口元素，通过window.parent获取父窗口

对象的几种创建方法

js实现深度克隆

Object.prototype.deepClone = function(obj){
  var newObj = {};
  if(typeof(obj) !== "object" || obj === null){
    return obj;
  }
  if(obj instanceof(Array)){

  }else{

  }
}

js实现数组消重

Array.prototype.unique = function (){
  var arrayList = {},
      newArray = [];

  for (var i = 0; i < this.length; i++) {
    if(!arrayList[this[i]]){
      arrayList[this[i]] = true;
      newArray.push(this[i]);
    }
  }

  return newArray;
}

DOM操作-怎样添加、移除、移动、复制、创建和查找节点

  • 添加节点 createElement,createDocumentFragment,createTextNode
  • 插入节点 appendChild，insertBefore
  • 删除节点 removeChild
  • 替换节点 replaceChild
  • 获取父节点 parentNode

快速排序算法

JQuery源码相关

typeof与instanceof的区别

typeof是检查数据类型，返回字符串，instanceof是测试一个对象是否是原型链构造函数的属性，更形象的说话是判断proto是否是指向同一个对象的prototype，返回boolen

浏览器兼容性举例

  • 通过*{margin:0;padding:0}重置不同浏览器下margin，padding不一致的问题
  • float元素同时设置margin在ie6下margin加倍，通过设置display：inline将其转化为行内元素结束
  • min-height兼容性问题，通过ie下设置height方式解决
  解决方法：
  (1)：.abc{border:1px blue solid;width:200px;height:200px;}
          html>body .abc{width:auto;height:auto;min-width:200px;min-height:200px;}
  (2)：.abc{width:200px;height:200px;_width:200px;_height:200px;}

因为ie6有一个特征，当定义一个高度时，如果内容超过高度，元素会自动调整高度。

  • ie6下默认有行高 解决方法：overflow：hidden；或font-size:0;
  • opacity不透明兼容性问题 解决方法：filter: alpha(opacity = 80)
  • 火狐不识别background-position-x,background-position-y
  • 两个块元素，竖向的margin不会增加，会叠加，间距为最大的margin

AMD，CMD，CommonJs规范之间的区别

AMD是依赖提前加载 CMD是依赖就近加载 commonJs是同步加载，适合用于服务器端使用，然而现在webpack也使用该规范在客户端

reflow & repaint

display:none 会产生reflow，而visibility:hidden 只会发生repaint, repaint是dom节点的外观改变，reflow是布局发生改变
如下情况会发生reflow：

  • 改变窗口的大小
  • 改变文字大小
  • 增加/删除样式表
  • 内容的改变
  • 激活伪类
  • 操作class属性
  • 脚本操作dom
  • 设置style属性
  • 计算offsetwidth和offsetheight

js有哪些常见的兼容性

  • 阻止冒泡 W3C: e.stopPropagation() IE: return false
  • 阻止默认事件 W3C: e.preventDefault() IE: e.returnValue = false
  • 事件绑定：W3C: addEventListener() IE: attachEvent()
  • 事件解绑：W3C: removeEventListener() IE: detachEvent()
  • event对象： W3C: event IE: window.event
  • 获取target: W3C: e.target IE: e.srcElement
  • 获取keycode: W3C: keycode IE: which

generator与promise

利用localStorage怎么优化触屏端性能

application cache（离线缓存策略），建立manifest文件，通过存储文件的ETag和文件路径，判断文件是否需要更新

HTTP请求响应头中关于缓存的对应关系

服务器端ETag和Last-Modified都是同样的效果，为了在服务器端验证文件是否修改

  • If-None-Match/ETag
  • If-Modified-Since/Last-Modified
  • Cache-Control/Expries Expries是绝对时间，Cache-Control是相对时间

webpack的优势是什么

webpack是德国开发者开发的模块加载器，所有的资源如js，css，images都当做模块，来使用和引用

  • 模块化开发思想，并使用commonJs和AMD规范
  • 丰富的loader插件，支持扩展强大的功能
  • 快速编译，使用异步IO及多级缓存，提高编译效率
  • 可以跟React配合使用，支持热插拔

React的优势是什么

  • 虚拟DOM，当需要更新DOM节点，通过DOM diff算法替换，以最小粒度更新
  • 单向数据绑定
  • JSX，书写上可以把html内嵌到js文件中，更好的进行了封装
  • React与Angular最大的区别是单向数据绑定跟双向数据绑定的区别
  • Angular是MV*框架，是一个完整的框架，而React是实现可重复使用的view

XSS与CSRF

XSS：就是脚本注入问题，获取到用户的相关信息，然后通过自己架设一个网站，让用户提交，随后以数据库的方式记录在攻击者自己的服务器上 解决方法：将用户输入的内容进行过滤

CSRF：伪造请求，冒充用户在站内的操作 （XSS只是CSRF其中一种） 解决方法：通过token令牌，保存在session里，访问接口的时候隐性传到服务器上进行比较

js算出字符串的字节数

var str='我我我';
var bytesCount;
for (var i = 0; i < str.length; i++)
{
  var c = str.charAt(i);
  if (/^[\u0000-\u00ff]$/.test(c)){
    bytesCount += 1;
  } else {
    bytesCount += 2;
  }
}
alert(bytesCount);
//结果是6
//原理也很简单，用正则判断是不是中文，如果是的话，字节数就加1。

ajax原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。 通过XMLHttpRequest向服务器端发送请求，通过onreadystatechange去监听服务器返回的数据，当readyState为400，state为200的时候，通过responseText获取返回数据

常用的两种继承方式是什么

类继承和原型链继承

js动态创建一个table（主要考察基本DOM操作）

var table = document.createElement("table");

table.setAttribute("id","table");
var tr1 = table.insertRow();
var td1 = tr1.insertCell();
td1.width = "200px";
td1.height = "200px";
td1.innerHTML = "内容";
document.body.appendChild(table);

js原生获取屏幕宽度，滚动高度，元素位置

nodeJs篇

用nodeJS实现启一个服务

var http = require("http");

http.createServer(function(request, response){
    response.writeHead(200,{"Content-Type","text/html"});
    response.end("hello world");
}).listen(3000);
var http = http.createListen();

用nodeJS实现文件copy

React篇

react生命周期

  • 第一次渲染
    • getDefaultProps
    • getInitialState
    • componentWillMount
    • render
    • componentDidMount
  • 重新渲染
    • componentWillReceiveProps
    • shouldComponentUpdate
    • componentWillUpdate
    • componentDidUpdate
  • 摧毁
    • componentWillUnmount
Written on November 11, 2014