前端面试2

1、数据双向绑定

http://jixianqianduan.com/frontend-javascript/2015/11/29/js-data-two-ways-binding.html

实现方式：
（1）发布-订阅模式（backbone.js)
http://www.html-js.com/article/Study-of-twoway-data-binding-JavaScript-talk-about-JavaScript-every-day

（2）脏值检查（angular 1.0）
最简单就是使用 setInterval() 定时轮询检测数据变动，Google 是在指定的事件发生时进行检测，如DOM事件，XHR响应事件，Timer事件

（3）数据劫持（+发布-订阅模式）（Vue.js）
Object.defineProperty() 对数据对象做get和set的监听

https://segmentfault.com/a/1190000006599500

2、https的过程？https将什么加密了？

http://blog.csdn.net/wangjun5159/article/details/51510594

  • 客户端发送请求到服务器
  • 服务器返回证书和公开密钥，公开密钥作为证书的一部分而存在
  • 客户端验证证书和公开密钥的有效性，如果有效，则生成共享密钥并使用公开密钥加密发送到服务器
  • 服务器使用私有密钥解密数据，并使用收到的共享密钥加密数据，发送到客户端
  • 客户端使用共享密钥解密数据
  • SSL加密建立

https 加密了共享密钥和数据

对性能的影响：

  • 加密解密消耗了计算机的CPU资源
  • 连接过程中客户端与服务器的通信次数比三次握手多，建立连接的时间花销较大

3、实现 remove 删除 object 的属性

// 如果键名不是字符串，则用一个变量保存键名
Object.prototype.remove = function (attr) {
    delete this[attr];
}

4、实现 map

Array.prototype.myMap = function (callback, context) {
    context = context || window;

    var newArray = [];
    
    if (typeof callback === 'function') {
        for (i = 0; i < this.length; i++) {
            var val = callback.call(context, this[i], i, this);
            newArray[i] = val;
        }
    }
    
    return newArray;
}

5、实现 compose

// 自左到右
var flow = function (...funcs) {
    var length = funcs.length;
    var index = length;
    
    while (index--) {
        if (typeopf funcs[index] !== 'function') {
            throw new TypeError('Expected a function');
        }
    }
    return function (...args) {
        var index = 0;
        var result = length ? funcs[index].apply(this, args) : args[0];
        
        while (++index < length) {
            result = func[index].call(this, result);
        }
        
        return result;
    }
}

// 自右到左
var flowRight = function (...funcs) {
    return flow(funcs.reverse());
}

6、浏览器缓存

http://web.jobbole.com/82997/

<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">

7、移动端点击事件的300ms延时

http://blog.csdn.net/qq_34986769/article/details/62046696

  • 禁用缩放
  • 更改视口宽度
  • 使用指针事件（IE10+）：touch-action(非标准css)
  • FastClick

点击穿透（使用touchstart代替click时会出现的情况）：

假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。

这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。

8、HTTP状态码

http://www.runoob.com/http/http-status-codes.html

  • 1** ：信息，服务器收到请求，需要请求者继续执行操作
  • 2** ：成功，操作被成功接收并处理
  • 3** ：重定向，需要进一步的操作以完成请求
  • 4** ：客户端错误，请求包含语法错误或无法完成请求
  • 5** ：服务器错误，服务器在处理请求的过程中发生了错误

200：请求成功

301：永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替

302：临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI

304：未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

307：临时重定向。与302类似。使用GET请求重定向

400：客户端请求的语法错误，服务器无法理解

401：请求要求用户的身份认证

403：服务器理解请求客户端的请求，但是拒绝执行此请求

404：服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

410：客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置

500：服务器内部错误，无法完成请求

501：服务器不支持请求的功能，无法完成请求

9、原型链

对象的原型指向原型对象，原型对象的原型又指向其父类的原型...

obj.__proto__ = Object.prototype

10、babel配置, webpack配置，gulp配置

http://www.ruanyifeng.com/blog/2016/01/babel.html

webpack配置：

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  devtool: '#eval-source-map'   // 包含dataURL
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'   // 只在末尾加上sourcemap文件的地址，需要请求
  module.exports.plugins = [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    })
  ]
}

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}

// 导入模块
var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var rename = require('gulp-rename');    // 改名

// 配置任务
gulp.task('uglify:css', function() {
    gulp.src('css/*.css')
        .pipe(cssmin())        // 压缩
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('build/css'))    // 输出
});
gulp.task('uglify:js', function() {
    gulp.src('js/*.js')
        .pipe(uglify())                    // 压缩
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('build/js'))    // 输出
});
gulp.task('uglify:html', function() {
  gulp.src('*.html')
      .pipe(htmlmin({                    // 压缩
          collapseWhitespace: true,
          removeComments: true
      }))
      .pipe(gulp.dest('build'))        // 输出
});

gulp.watch('*.*', ['uglify:css', 'uglify:js', 'uglify:html']);

gulp.task('default', ['uglify:css', 'uglify:js', 'uglify:html']);

11、同源策略，跨域方式，手动实现jsonp

同源策略：
对于绝对的URIs，源就是{协议，主机，端口}定义的。只有这些值完全一样才认为两个资源是同源的。

同源策略可以保护用户信息，防止用户在A网站的信息被B网站获取到

cookie只有同源的网站可以访问到，可设置document.domain设置同源获取cookie，localstorage和IndexDB不可以通过这种方式获取
cookie 可设置所属域名为一级域名，其二级域名，三级域名等就可以直接获取

iframe和window.open可以通过片段识别符（即url的#后面的内容）修改和获取

window.postMessage可以跨文档通信

http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

跨域方法：

手动实现jsonp：

function addScriptTag (src) {
    var scriptTag = document.createElement('script');
    scriptTag.setAttribute('type', 'text/javascript');
    scriptTag.src = src;
    document.body.appendChild(scriptTag);
}

window.onload = function () {
    addScriptTag('http://example.com/ip?callback=foo');
}

function foo(data) {
    console.log('Your public Ip address is: ' + data.ip);
}

服务器返回的信息

foo({
    'ip': '8.8.8.8'
});

12、手动实现ajax

http://www.jb51.net/article/104873.htm

function ajax ({url, type = 'GET', data = {}, success, error}) {
    type = type.toUpperCase();
    data = formatData(data);
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            var status = xhr.status;
            if (status >= 200 && status < 300) {
                var response = '';
                var type = xhr.getResponseHeader('Content-type');
                if (type.indexOf('xml') !== -1 && xhr.responseXML) {
                    response = xhr.responseXML;
                } else if (type == 'application/json') {
                    response = JSON.parse(xhr.responseText);
                } else {
                    response = xhr.responseText;
                }
                success && success(response);
            } else {
                error && error(response);
            }
        }
    }
    
    if (type === 'GET') {
        xhr.open(type, url + '?' + data, true);
        xhr.send();
    } else {
        xhr.open(type, url, true);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhr.send(data);
    }
    
    function formatData (data) {
        var arr = [];
        for (var name in data) {
            arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
        }
        // 加上一个随机数，防止缓存
        arr.push('v=' + random());
        
        return arr.join('&');
    }
    
    function random () {
        return Math.floor(Math.random() * 10000 + 500);
    }
}

13、渐进增强和优雅降级

渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验

优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用css3的特性构建了一个应用，然后逐步针对各大浏览器进行hack使其能在低版本浏览器上正常浏览。

http://www.jianshu.com/p/d313f1108862

14、HTTP长连接，keep-alive

Connection: keep-alive
keep-alive: 20ms

保持TCP的长连接不断开，20ms 后断开连接，TCP的keep-alive是检查当前TCP连接是否还活着，两者概念不一样，使用Content-Length（静态）或Transfer-Encoding（动态，chunk模式）判断消息内容的大小

http://www.cnblogs.com/skynet/archive/2010/12/11/1903347.html

15、从输入url到看到页面发生了什么

http://www.cnblogs.com/xianyulaodi/p/6547807.html

  • 输入地址
  • 浏览器查找域名的IP地址
  • 浏览器向web服务器发送一个HTTP请求
  • 服务器的永久重定向响应
  • 浏览器跟踪重定向地址
  • 服务器处理请求
  • 服务器返回一个HTTP响应
  • 浏览器显示HTML
  • 浏览器发送请求获取嵌在HTML中的资源（如图片，音频，视频，JS，CSS等）

16、前端性能优化

https://www.cnblogs.com/liulilin/p/7245125.html

17、深拷贝

http://blog.csdn.net/sysuzhyupeng/article/details/70340598

18、前端安全

http://blog.csdn.net/fengyinchao/article/details/52303118

http://www.cnblogs.com/vajoy/p/4176908.html

19、类数组

具有length属性，其他属性为非负整数，不具备数组所具有的方法

类数组：arguments，以及DOM操作返回的结果

20、for...in..

  • 循环计数器是字符串，不是数字
  • 会遍历原型上的方法和属性，不适合遍历数组

21、forEach

forEach 无法使用return终止

22、HTML5 新特性

http://blog.csdn.net/gane_cheng/article/details/52819118

23、IE盒子和W3C盒子

IE5.5以下：width = content + padding + border

W3C: width = content

避免IE盒子的方法：头部加上 <!DOCTYPE html>

24、实现斐波那契序列

// 递归，时间复杂度O(2^n)，空间复杂度O(n)
function fib (n) {
    if (n == 1 || n == 2) {
        return 1;
    }
    
    return fib(n - 1) + fib(n - 2);
}

// 非递归，时间复杂度O(n)，空间复杂度O(n)
function fib (n) {
    var ret = [1, 1];
    if (n == 1 || n == 2) {
        return 1;
    }
    for (var i = 2; i < n; i++) {
        ret[i] = ret[i - 1] + ret[i - 2];
    }
    
    return ret[n - 1];
}

// 非递归，时间复杂度O(n)，空间复杂度O(1)
function fib (n) {
    var res, a, b;
    a = b = 1;
    if (n == 1 || n == 2) {
        return 1;
    }
    for (var i = 3; i <= n; i++) {
        res = a + b;
        a = b;
        b = res;
    }
    
    return res;
}

25、盒子模型的折叠问题

http://blog.csdn.net/zerlinda_c/article/details/50054639

margin塌陷：http://www.cnblogs.com/hugejinfan/p/5901320.html

水平方向不会坍塌

26、块级元素和行级元素

http://www.cnblogs.com/asqq/archive/2012/10/04/3194956.html

27、Less特性

http://blog.csdn.net/u014695532/article/details/50957356

28、git 命令

http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html

30、面经回答

http://blog.csdn.net/bossmango/article/details/77369805

https://segmentfault.com/a/1190000008644536

31、行内元素设置行高

display或者float

32、requireJS 解决循环依赖

http://www.cnblogs.com/terrylin/p/3347073.html

33、实现垂直居中

http://blog.csdn.net/wolinxuebin/article/details/7615098

  • 行内文字：line-height
  • display：table-cell；vertical-align：middle；
  • position和margin（负数）
  • position和stretch
  • 设置相同padding-top和padding-bottom
  • display：flex；aling-items：center；

34、伪类和伪元素

http://www.cnblogs.com/ihardcoder/p/5294927.html

35、AMD 和 CMD的区别

http://blog.csdn.net/jackwen110200/article/details/52105493

36、event loop

http://www.ruanyifeng.com/blog/2014/10/event-loop.html

37、DOCTYPE

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令

38、强缓存和协商缓存

http://caibaojian.com/browser-cache.html

39、https与http

https比http长3倍的时间

优化：

  • CDN加速，拉进节点
  • 服务器硬件加速，释放CPU
  • 远程解密，使用CPU负载较低的服务器

http://blog.csdn.net/hherima/article/details/52469787

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,013评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,205评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,370评论 0赞 342
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,168评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,153评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,954评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,271评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,916评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,382评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,877评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,989评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,624评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,209评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,199评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,418评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,401评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,700评论 2赞 345

推荐阅读更多精彩内容