[腾讯]前端面试题整理

prototype 与 proto的关系是什么:

__proto__是什么?咱们在这里简单地说下。每一个对象都会在其内部初始化一个属性,就是__proto__,当咱们访问一个对象的属性 时,若是这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有本身的__proto__,因而就这样 一直找下去,也就是咱们平时所说的原型链的概念。
<script type="text/javascript"> var Person = function () { }; var p = new Person(); </script>

很简单的一段代码,咱们来看看这个new究竟作了什么?咱们能够把new的过程拆分红如下三步:

<1> var p={}; 也就是说,初始化一个对象p。

<2> p.__proto__=Person.prototype;

<3> Person.call(p);也就是说构造p,也能够称之为初始化p。

<script type="text/javascript"> var Person = function () { }; Person.prototype.Say = function () { alert("Person say"); } var p = new Person(); p.Say(); </script>

这段代码很简单,相信每一个人都这样写过,那就让咱们看下为何p能够访问Person的Say。

首先var p=new Person();能够得出p.__proto__=Person.prototype。那么当咱们调用p.Say()时,首先p中没有Say这个属性, 因而,他就须要到他的__proto__中去找,也就是Person.prototype,而咱们在上面定义了 Person.prototype.Say=function(){}; 因而,就找到了这个方法。

好,接下来,让咱们看个更复杂的。
<script type="text/javascript"> var Person = function () { }; Person.prototype.Say = function () { alert("Person say"); } Person.prototype.Salary = 50000; var Programmer = function () { }; Programmer.prototype = new Person(); Programmer.prototype.WriteCode = function () { alert("programmer writes code"); }; Programmer.prototype.Salary = 500; var p = new Programmer(); p.Say(); p.WriteCode(); alert(p.Salary); </script>

咱们来作这样的推导:

var p=new Programmer()能够得出p.__proto__=Programmer.prototype;

而在上面咱们指定了Programmer.prototype=new Person();咱们来这样拆分,var p1=new Person();Programmer.prototype=p1;那么:

p1.__proto__=Person.prototype;

Programmer.prototype.__proto__=Person.prototype;

由根据上面获得p.__proto__=Programmer.prototype。能够获得p.__proto__.__proto__=Person.prototype。

好,算清楚了以后咱们来看上面的结果,p.Say()。**因为p没有Say这个属性,因而去p.__proto__,也就是 Programmer.prototype,也就是p1中去找,因为p1中也没有Say,那就去p.__proto__.__proto__,也就是 Person.prototype中去找,因而就找到了alert(“Person say”)的方法。**

其他的也都是一样的道理。

这也就是原型链的实现原理。

最后,其实prototype只是一个假象,他在实现原型链中只是起到了一个辅助做用,换句话说,他只是在new的时候有着必定的价值,而原型链的本质,其实在于__proto__!

meta viewport原理

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
简单来说,就是移动端视口分为可见视口(也就是咱们手机屏幕的大小),layout视口(也就是真实的页面的布局大小),理想视口(就是布局视口就等于可见视口)用户经过缩放等浏览可见视口与布局视口不等的页面来查看内容。
具体文章参照:

移动前端开发之viewport的深刻理解javascript

域名收敛是什么

PC 时代为了突破浏览器的域名并发限制。有了域名发散。
    浏览器有并发限制,是为了防止DDOS攻击。
    域名收敛:就是将静态资源放在一个域名下。减小DNS解析的开销。
    域名发散:是将静态资源放在多个子域名下,就能够多线程下载,提升并行度,使客户端加载静态资源更加迅速。
    域名发散是pc端为了利用浏览器的多线程并行下载能力。而域名收敛多用与移动端,提升性能,由于dns解析是是从后向前迭代解析,若是域名过多性能会降低,增长DNS的解析开销。

参考文章:
域名收敛css

float 与display:inline-block的区别:

共性:均可以使元素处于同一行,而且使元素为块元素,能够自由设置宽高;
不一样:
float:脱离文档流;呈环绕排列;上行有空白则后续元素会尽力去填补上;相同元素float:right时,在前面的元素先解析,因此显示上反而在后面的元素右边;
inline-block:在文档流中。行排列不会补位;
首选inline-block,不改变文档流,避免dom重绘;

参考文章:
inline-block和float的共性和区别html

前端优化策略列举:

github:前端优化策略前端

首屏/白屏时间如何计算

白屏时间指的是浏览器开始显示内容的时间。所以咱们只须要知道是浏览器开始显示内容的时间点,即页面白屏结束时间点便可获取到页面的白屏时间。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>白屏</title>
  <script type="text/javascript"> // 不兼容performance.timing 的浏览器,如IE8 window.pageStartTime = Date.now(); </script>
  <!-- 页面 CSS 资源 -->
  <link rel="stylesheet" href="common.css">
  <link rel="stylesheet" href="page.css">
  <script type="text/javascript"> // 白屏时间结束点 window.firstPaint = Date.now(); </script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

白屏时间 = firstPaint - performance.timing.navigationStart;

首屏时间:这个比较复杂,具体看文章:
首屏时间计算vue

闭包

阮一峰:闭包java

做用域链

做用域链jquery

ajax如何实现,readyState五种状态的含义:

w3c上面讲解得不要太清晰:
AJAX的实现原理以及封装
ajax简单封装linux

jsonp如何实现

ajax简单封装
该封装不依赖jquery,添加了jsonp功能;android

怎么处理跨域

跨域的八种方法webpack

restful中的method解释

http请求头,请求体,cookie在哪一个里面?url在哪里面?
http

对闭包的理解,实现一个暴露内部变量,并且外部能够访问修改的函数

var obj = {
  a:1,
  setA:function(a){
    var that = this;
    return function(a){
      return that.a =a;
    }
  },
  getA:function(){
    return this.a;
  }

}
console.log(obj.setA()(4))//4
console.log(obj.getA())//4

深刻理解this与闭包:
闭包与return
this
闭包
重点理解这:

 var name = "The Window";

      var object = {
        name : "My Object",

        getNameFunc : function(){
          return function(){
            return this.name;
          };

        }

      };

      alert(object.getNameFunc()());//window


代码片断二。

      var name = "The Window";

      var object = {
        name : "My Object",

        getNameFunc : function(){
          var that = this;
          return function(){
            return that.name;
          };

        }

      };

      alert(object.getNameFunc()());//my object

get与post的区别

事件模型解释

事件模型

编写一个元素拖拽的插件

一步一步实现js拖拽插件

编写一个contextmenu的插件

编写web端cookie的设置和获取方法;

兼容IE6的水平垂直居中

兼容ie的事件封装

h5与原生的android的优缺点

编写h5须要注意什么

xss和crsf的原理以及怎么预防

xss:用户过度信任网站,听任来自浏览器地址栏表明的那个网站代码在本身本地任意执行。若是没有浏览器的安全机制限制,xss代码能够在用户浏览器随心所欲;
csrf:网站过度信任用户,听任来自所谓经过访问控制机制的表明合法用户的请求执行网站的某个特定功能。

xss和crsf的原理

css优先级

css优先级

如何实现点击radio的文字描述实现控制radio的状态(经过lable实现)

lable for属性的用法:
点击文字label同时选中checkbox radio

delegate如何实现

jquery的delegate实现原理
addEventListener,jq.on以及事件委托

cache-control

cache-control

http-only

http-only

url输入到服务器中间发生了什么?

从输入URL到页面加载发生了什么

vue跟angular像不像?

vue与angular的区别
angular和vue的对比

父子通讯?

移动端适配问题?

rem原理?

session与cookie的区别

什么是bfc

jquery

https

实现一个站点从http到https的迁移

localstorage跟cookie的区别

http状态码,200,500,301,302,304
三次握手

框架原理:

1.angularjs的directive怎么写

2.angularjs的脏检查(双向绑定)是如何实现的?

3.依赖注入如何实现?

4.scope如何实现?

5.$parse模块如何实现?

关于html,css,js三者的加载顺序问题
关于html,css,js三者的加载顺序问题
css,js位置放置

http协议:

1.accept是什么,怎么用?

2.http状态码,

前端面试常见题目:
2016十家公司前端面试小记
js手写一个排序算法动态排序的动画:

css篇:

垂直居中:
待总结
自适应布局

linux:

unix中经常使用的命令行

OSI模型,HTTP,TCP,UDP分别在哪些层
tcp udp http 多了解下各层协议及其做用
八大排序算法

Jquery:

手写一个jQuery插件
jquery编写插件的方法
区别和详解:jQuery extend()和jQuery.fn.extend()
jquery对象的实现(return new jQuery.fn.init)
arguments.callee
递归调用匿名函数:

function creat(){
  return function(n){
    if(n<1){ return 1 }
    return n*arguments.callee(n-1)
  }
}

对比有名字的函数递归:
function factorial (n) {
    return !(n > 1) ? 1 : factorial(n - 1) * n;
}

[1,2,3,4,5].map(factorial);

对前端路由的理解?先后端路由的区别?
前端路由与后端路由
gulp/grunt/webpack对比
待对比

es6
这里写连接内容