封装函数 f，使 f 的 this 指向指定的对象.

 function bindThis(f, oTarget) {
     return  f.bind(oTarget);
}

题目描述:获取 url 中的参数

1).参数名称，返回该参数的值 或者 空字符串
2).指定参数名称，返回全部的参数对象 或者 {}
3).果存在多个同名参数，则返回数组
示例1:
输入
http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe
输出
[1, 2, 3]

查找两个节点的最近的一个共同父节点，可以包括节点自身;
为 Array 对象添加一个去除重复项的方法;
请你描述一下 cookies，sessionStorage 和 localStorage 的区别?
iframe有那些缺点？
你有哪些性能优化的方法？
说说你对边距折叠的理解?
说说你对页面中使用定位(position)的理解？

使用css布局position非常重要，语法如下： position：static | relative | absolute | fixed | center | page | sticky 默认值：static，center、page、sticky是CSS3中新增加的值。 (1)、static 可以认为静态的，默认元素都是静态的定位，对象遵循常规流。此时4个定位偏移属性不会被应用，也就是使用left，right，bottom，top将不会生效。 (2)、relative 相对定位，对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。 (3)、absolute a、绝对定位，对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。 b、元素定位参考的是离自身最近的定位祖先元素，要满足两个条件，第一个是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果没有则选择body为对照对象。第二个条件是要求祖先元素必须定位，通俗说就是position的属性值为非static都行。 (4)、fixed 固定定位，与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。 (5)、center 与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3） (6)、page 与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3） (7)、sticky 对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果
``` 1).如何随机打乱一个js数组（使用原生代码） 2).现在有一个二维数组，数组长度和子数组长度均不可知，问：从每一个子数组里面取一个数成一个数组，要求组合不能重复，问一共有多少个组合，请设计一个函数把所有可能出现的组合以数组的形式输出。

 深拷贝的作用在于能够实现对于数组和对象的拷贝，不影响拷贝后数据对原数据造成的影响。

 自适应和响应式有什么区别和联系.

给定整数 n 和 m，写一个函数 dispatch ，把 1-n 尽量平均地分成m个组
如

var n = 2, m = 2; dispatch(n, m) 得到[[1], [2]]; dispatch(5, 2) // [ [ 1, 2, 3 ], [ 4, 5 ] ] dispatch(10, 6) //[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ], [ 9 ], [ 10 ] ]

14.

#0
#1
#2
#3
- #4
#99998
#99999
#100000

为 <ul> 添加一个类 bar 删除第 10 个 <li> 在第 500 个 <li> 后面增加一个 <li> , 其文字内容为点击任意 <li> 弹窗显示其为当前列表中的第几项。要求：使用原生JS

15.

当一个用户多次访问我们的网站的时候，我们如何知道多次的访问来源于同一个用户？如果我们的网站没有登录功能呢？考虑用户会清空缓存、清空 localStorage，采用何种方法能“尽量”精准的区分用户？

16.

控制台显示内容为? for (var i = 0; i < 5; i++) { console.log(i); } 控制台显示内容为? for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000 * i); } 控制台显示内容为? for (var i = 0; i < 5; i++) { (function(i) { setTimeout(function() { console.log(i); }, i * 1000); })(i); } 控制台显示内容为? for (var i = 0; i < 5; i++) { (function() { setTimeout(function() { console.log(i); }, i * 1000); })(i); } 控制台显示内容为? for (var i = 0; i < 5; i++) { setTimeout((function(i) { console.log(i); })(i), i * 1000); } 控制台显示内容为? setTimeout(function() { console.log(1) }, 0); new Promise(function executor(resolve) { console.log(2); for( var i=0 ; i<10000 ; i++ ) { i == 9999 && resolve(); } console.log(3); }).then(function() { console.log(4); }); console.log(5);

17.

从某数据库接口得到如下值：

{ rows: [ [“Lisa”, 16, “Female”, “2000-12-01”], [“Bob”, 22, “Male”, “1996-01-21”] ], metaData: [ {name: “name”, note: ‘’}, {name: “age”, note: ‘’}, {name: “gender”, note: ‘’}, {name: “birthday”, note: ‘’} ] } rows是数据，metaData是对数据的说明。现写一个函数，将上面的Object转化为期望的数组：

[ {name: “Lisa”, age: 16, gender: “Female”, birthday: “2000-12-01”}, {name: “Bob”, age: 22, gender: “Male”, birthday: “1996-01-21”}, ]

18.

a = [ {id: 10001, name: “Lisa”, age: 16}, {id: 10002, name: “Bob”, age: 22}, {id: 10003, name: “Alice”, age: 20}, ]; 数组

b = [ {id: 10001, gender: “Female”}, {id: 10002, name: “Bob King”, birthday: “1996-01-22”}, {id: 10005, name: “Tom”, birthday: “2000-01-01”}, ]; 写一个函数按id用b更新a,期望得到的结果为：

[ {id: 10001, name: “Lisa”, age: 16, gender: “Female”}, {id: 10002, name: “Bob King”, birthday: “1996-01-22”, age: 22}, {id: 10003, name: “Alice”, age: 20}, {id: 10005, name: “Tom”, birthday: “2000-01-01”}, ]

19.

Foo.getName();
getName(); Foo().getName(); getName();
new Foo.getName(); new Foo().getName();
new new Foo().getName();

请问上述代码在浏览器环境下，输出结果是多少？

20. 从 URL 输入到页面展现发生了什么?
21. 请你谈谈Cookie的弊端?
22. 说说Http状态码,请求头,请求体,以及各字段的含义.
>1** 信息，服务器收到请求，需要请求者继续执行操作(101，升级为websocket协议) 
2** 成功，操作被成功接收并处理(206,部分内容，分段传输) 
3** 重定向，需要进一步操作以完成请求(301,302重定向；304命中缓存) 
4** 客户端错误，请求包含语法错误或无法完成请求(401,要求身份验证；403，服务器理解客服端需求，但是禁止访问) 
5** 服务器错误，服务器在处理请求的过程中发生了错误

23. 如何实现函数节流和防抖

节流 function throttle(fn, delay) { delay = delay || 50 let statTime = 0 return function () { statTime === 0 && fn.apply(this, arguments) let currentTime = new Date() if (currentTime - statTime > delay) { fn.apply(this, arguments) statTime = currentTime } } }

let throttleFn = throttle(fn)

throttleFn()//只会执行一次 throttleFn() throttleFn() throttleFn() 防抖 function debounce(fn, delay) { delay = delay || 50 let timer = null return function () { let self = this clearTimeout(timer) timer = setTimeout(fn.bind(self, arguments), delay); } }

24.  原生Bind实现

Function.prototype._bind = function (context) { let self = this let args_1 = [].prototype.slice.call(arguments, 1) return function () { let args_2 = [].prototype.slice.call(arguments) let args = args_1.concat(args_2) return self.apply(context, args) } }

25. meta viewport原理;
>参考答案:
>简单来讲，就是移动端视口分为可见视口（也就是我们手机屏幕的大小），layout视口（也就是真实的页面的布局大小），理想视口（就是布局视口就等于可见视口）用户通过缩放等浏览可见视口与布局视口不等的页面来查看内容。



26. float 与display:inline-block的区别.
> 参考答案:
> 共性：都可以使元素处于同一行，并且使元素为块元素，可以自由设置宽高；
不同：
float:脱离文档流；呈环绕排列；上行有空白则后续元素会尽力去填补上；相同元素float:right时，在前面的元素先解析，所以显示上反而在后面的元素右边；
inline-block:在文档流中。行排列不会补位；
首选inline-block,不改变文档流，避免dom重绘；

27. 首屏/白屏时间如何计算;
28. 以下两个代码片段分别输出什么:

　　var name = “The Window”;

　　var object = { 　　　　name : “My Object”,

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

　　　　}

　　};

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

　　var name = “The Window”;

　　var object = { 　　　　name : “My Object”,

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

　　　　}

　　};

　　alert(object.getNameFunc()());

29. js 的事件模型
>参考方向:
>DOM0级模型/IE事件模型/DOM2模型  事件对象和事件代理

假设有一个 UL 的父节点，包含了很多个 Li 的子节点：

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

当我们的鼠标移到Li上的时候，需要获取此Li的相关信息并飘出悬浮窗以显示详细信息; 更简单的方法是使用事件代理机制，当事件被抛到更上层的父节点的时候，我们通过检查事件的目标对象（target）来判断并获取事件源Li。下面的代码可以完成我们想要的效果： document.getElementById(“parent-list”).addEventListener(“click”,function(e) { // 检查事件源e.targe是否为Li if(e.target && e.target.nodeName.toUpperCase == “LI”) { // 真正的处理过程在这里 console.log(“List item “,e.target.id.replace(“post-“),” was clicked!”); } }); ```

xss和crsf的原理以及怎么预防.
js手写一个排序算法动态排序的动画;(较难)
实现一个promise类;(较难,主要考察对promise的理解和实现思路)

计算机网络

状态码状态码

  1XX：信息状态码
  2XX：成功状态码
  3XX：重定向
  4XX：客户端错误
  5XX: 服务器错误

常见具体状态码

状态码	含义
100 Continue	客户端应当继续发送请求。
200 OK：	请求成功，请求所希望的响应头或数据体将随此响应返回
202 Accepted	客户端应当继续发送请求。
301 Moved Permanently	永久移除
304 Not Modified(还是要访问服务器)	客户端有缓冲的文档并发出了一个条件性的请求
400 Bad Request	服务器未能理解请求
401 Unauthorized	被请求的页面需要用户名和密码
403 Forbidden	对被请求页面的访问被禁止。
500 Internal Server Error	请求未完成。服务器遇到不可预知的情况。
502 Bad Gateway	请求未完成。服务器从上游服务器收到一个无效的
504 Gateway Timeout	网关超时。

浏览器访问页面发生了什么－详述 > 参考文献:从输入URL到页面加载的过程

DNS解析过程详解

  1、在浏览器中输入www.example.com域名，操作系统会先检查自己本地的hosts文件是否有这个网址映射关系，如果有，就先调用这个IP地址映射，完成域名解析。 
    
  2、如果hosts里没有这个域名的映射，则查找本地DNS解析器缓存，是否有这个网址映射关系，如果有，直接返回，完成域名解析。 
    
  3、如果hosts与本地DNS解析器缓存都没有相应的网址映射关系，首先会找TCP/ip参数中设置的首选DNS服务器，在此我们叫它本地DNS服务器，此服务器收到查询时，如果要查询的域名，包含在本地配置区域资源中，则返回解析结果给客户机，完成域名解析，此解析具有权威性。 
    
  4、如果要查询的域名，不由本地DNS服务器区域解析，但该服务器已缓存了此网址映射关系，则调用这个IP地址映射，完成域名解析，此解析不具有权威性。
    
  5、如果本地DNS服务器本地区域文件与缓存解析都失效，则根据本地DNS服务器的设置（是否设置转发器）进行查询，如果未用转发模式，本地DNS就把请求发至13组根DNS，根DNS服务器收到请求后会判断这个域名(.com)是谁来授权管理，并会返回一个负责该顶级域名服务器的一个IP。本地DNS服务器收到IP信息后，将会联系负责.com域的这台服务器。这台负责.com域的服务器收到请求后，如果自己无法解析，它就会找一个管理.com域的下一级DNS服务器地址(example.com)给本地DNS服务器。当本地DNS服务器收到这个地址后，就会找example.com域服务器，重复上面的动作，进行查询，直至找到www.example.com主机。 
    
  6、如果用的是转发模式，此DNS服务器就会把请求转发至上一级DNS服务器，由上一级服务器进行解析，上一级服务器如果不能解析，或找根DNS或把转请求转至上上级，以此循环。不管是本地DNS服务器用是是转发，还是根提示，最后都是把结果返回给本地DNS服务器，由此DNS服务器再返回给客户机。

Css水平居中

  基础布局对以后的开发很有作用。

  1. 自动空白边居中
      缺点：IE5/6不支持，需要hack，并需要对两个元素添加样式
        
      <body> <div id="wrapper"> </div></body>
        
      body{
          text-align: center; /*text-align:center让IE中的元素居中*/
          min-width: 760px; 
      }
      .wrapper{
          margin: 0 auto;
          width: 720px;
          text-align: left;       /* 防止继承父类 */
      }

  2. 使用定位和负值空白边
        
      .wrapper{
          position: relative;
          width: 720px;
          left: 50%;
          margin-left: -360px;
          //对应的垂直居中也好处理了
          top: 50%;
      }
        
  3. 神奇的弹性盒子 flex
    
      IE10+，Android2.1+ ,IOS safire3.2(添加-webkit-)兼容，所以目前移动端可以大量使用。
    
      body{
          display: flex;
          justify-content: center;  //水平居中
          //垂直居中
          align-items: center;   //当然需要设置容器的高度值
      }

BFC BFC(box , formatting context)，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。

  BFC布局规则

  1.内部的Box会在垂直方向，一个接一个地放置。
  2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  4.BFC的区域不会与float box重叠。(所以有左边宽度自适应)
  5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  6.计算BFC的高度时，浮动元素也参与计算

      <b>哪些元素会触发BFC</b>
      根元素
      float属性不为none
      position为absolute或fixed
      display为    inline-block, table-cell, table-caption, flex, inline-flex
      overflow不为visible

      <b>IE如何解决？Layout </b> 
          position:absolute;
          float: left|right;
          display: inline-block;
          width: value;
          height: value;
          zoom:value(非normal);  //通常zoom:1;


  具有以上优点，BFC实际中的作用
        
      自适应布局、清除浮动、防止margin重叠。

布局问题

> 1）**响应式布局原理**
     检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度。
     因为大屏幕的移动设备越来越普及。而自适应布局已经无法胜任各种浏览需求。响应式设计的目的是尽可能以最好的布局显示您的数据，以实现用户友好的 Web 页面。
     现在CSS3有了个更为实用的 media query。而移动终端的浏览器（都是基于webkit内核的浏览器）基本已经完全支持了css3.他可以为你获取各种终端的数据。
     栅栏系统（响应式）
     响应式图片
     浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片，如屏幕分辨率320*480，那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高，也就是高清屏，那么我们就得输出2倍分辨率的图形(宽:640px)；以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过 http://screensiz.es/phone查询。
      解决方案：响应式图形的草案：新定义标签<picture>。
         静态、自适应、流式、响应式四种网页布局有什么区别              
        **自适应布局（Adaptive）**的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。
        你可以把自适应布局看作是静态布局的一个系列。
     **流式布局（Liquid Layout）**
        流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
     **响应式布局（Responsive Layout）**
        分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
        把响应式布局看作是流式布局和自适应布局设计理念的融合

CSS3新特性

选择器，文本、多列布局、渐变效果、css盒子、边框、背景、动画、转换

其他

项目目录结构为何是现在这个样子，每个部分的含义是什么样的？
业务代码是如何组织的？当业务复杂的时候，这样组织还可以么？
工程化是如何做的？
构建流程是怎么样的？对于构建工具了解么？
上线流程是怎么样的？
本地开发和部署有什么区别？
git 使用规范是怎么样的？怎么做好分支管理？
怎么做好团队协作？
前后端如何分工的？如何联调的？跨域如何做？
产品功能是如何产生的？你在其中的角色是怎么样的？
你们的研发流程是怎么样的？
如果增加一个搜索框，如何解决快速输入导致频繁发起 ajax 请求的问题？
这个项目有哪些技术上的难点？
动画的实现方案有哪些？有哪些动画优化的方案？
性能优化有哪些？
用户键入不安全的内容怎么办？常见的安全问题有哪些？
经典面试题『某上海客户说，他的 h5 页面打不开，你如何解决这个问题？』

面试题目

计算机网络

其他

CATALOG

FEATURED TAGS

FRIENDS