【面试经历】问题总结

时间 2019-11-16

原文原文链接

4.es6的几个新特性前端

糖语法

首先，语法糖是一种语法，使得语言更容易理解和更具备可读性，它使语言相对咱们来讲变得更"甜"。这也意味着ES6的一些"新"的特色并非真的新，只是试图简化语法而已，让咱们编程更容易。这样就无需使用老式的取巧的方法编写你的代码，而是能够一种更简单的方式来编写代码，那就是使用糖语法。

javascript并不像其余面向对象语言同样支持类这个概念，相反js使用function和prototype模拟类的概念。

下面是建立类的新语法，若是你有来自Java或其余OO语言的背景你会很熟悉：

class Project {
  constructor(name) {
    this.name = name;
  }
 
  start() {
    return "Project " + this.name + " starting";
  }
}
 
var project = new Project("Journal");
project.start(); // "Project Journal starting"
你在这个类中定义的全部方法都被加入这个类的原型prototype中。

既然JS不支持类，那么它支持继承吗？

是的，JS中继承是经过prototype实现。下面是WebProject子类继承Project类的代码：

class WebProject extends Project {
  constructor(name, technologies) {
    super(name);
    this.technologies = technologies;
  }
 
  info() {
    return this.name + " uses " + arrayToString(this.technology);
  }
}
 
function arrayToString(param) {
  // ... some implementation
}
 
var webJournal = new WebProject("FrontEnd Journal", "javascript");
webJournal.start(); // "FrontEnd Journal starting"
webJournal.info(); // "FrontEnd Journal uses javascript"
注意到在WebProject 构造器中，调用了Project的构造器，这样可使用它的属性和方法。

 

模块Module

若是你想将全部js放在一个文件中，或者你要在应用的不一样地方使用相同的功能，你就要使用模块，记住魔术的关键词是export，在你的函数以前使用export。

假设Project 和 WebProject 都储存在application.js文件中，以下源码结构：

myproject (folder)
 |
 -- modules (folder)
 |   |
 |   -- helpers.js
 |
 -- application.js
若是咱们从application.js中分离arrayToString()，而后放入modules/helpers.js，这样咱们在其余地方能够重用它：

// modules/helper.js
export function arrayToString(param) {
  // some implementation
}
这样咱们只须要导入咱们的模块便可：

// application.js
import { arrayToString } from 'modules/helpers';
 
class WebProject extends Project {
  constructor(name, technologies) {
    super(name);
    this.technologies = technology;
  }
 
  info() {
    return this.name + " uses " + arrayToString(this.technology);
  }
}
 
// ...
let和const

ES6中有两个新特性：let和 const，为了理解let，咱们须要记住var是建立函数生存期内的变量：

function printName() {
  if(true) {
    var name = "Rafael";
  }
  console.log(name); // Rafael
}
不像Java或其余语言，任何变量在JS中是在一个函数内建立，它会升级到哦函数以外部，无论你在哪里定义变量，都和你在函数顶部定义同样，这个行为称为hoisting。

上面代码用下面方式容易理解些：

function printName() {
  var name; // variable declaration is hoisted to the top
  if(true) {
    name = "Rafael";
  }
  console.log(name); // Rafael
}
那么let是如何工做呢，和hoisting有什么关系，咱们导入let的代码以下：

function printName() {
  if(true) {
    let name = "Rafael";
  }
  console.log(name); // ReferenceError: name is not defined
}
let是在一个代码块内，变量名只能在代码块中可见。

function printName() {
  var name = "Hey";
  if(true) {
    let name = "Rafael";
    console.log(name); // Rafael
  }
  console.log(name); // Hey
}
总结：var是function-scoped，而let是 block-scoped.

const是建立常量使用，一旦建立就一直不会被概念，以下：

const SERVER_URL = "http://www.jdon.com"

ES6还有其余新功能：Map, WeakMap, generators 和Proxies

那么何时可使用ES6这些特性呢？可见下面这个网址：

http://kangax.github.com/es5-compat-table/es6/

Node.JS的ES6特性可见：ES6 for Node

1. Function参数默认值
曾几什么时候，你编写了不少次以下代码：


function beginTeleportation (who, options) {
  options = options || {}
}

如今检查函数参数是否存在再也没有必要了， Default function parameters 默认函数参数可以让定义函数的默认参数。



function sayCosmicGreeting (greeting = 'Greetings', name = 'Earthling') {
  console.log(`${greeting}, ${name}`)
}

sayCosmicGreeting() // Greetings, Earthling
sayCosmicGreeting('Salutations', 'Martian') // Salutations, Martian

这里函数参数greeting和name都有本身默认值，因此，若是你没有赋值空参数调用，就会输出默认值Greetings和 Earthling。


2.Rest参数
传递许多参数到函数中须要使用arguments 关键词：


function sayCosmicGreetingTo (greeting) {
  const beings = arguments.slice(1)
  beings.forEach(being => {
    console.log(`${greeting}, ${being}`)
  })
}

sayCosmicGreetingTo('Hello', 'Earthling', 'Martian', 'Neptunian')

上述代码问题会报错：TypeError: arguments.slice is not a function，由于arguments 不是实际数组，只是相似，为了能正常工做，你须要使用数组原型的call函数：
Array.prototype.slice.call(arguments, 1)

可是这些处理手法对于初学者很费解，而Rest parameters解决这个问题，给你一个真正实际的Array数组实例：



function sayCosmicGreetingTo (greeting, ...beings) {
  beings.forEach(being => {
    console.log(`${greeting}, ${being}`)
  })
}

sayCosmicGreetingTo('Hello', 'Earthling', 'Martian', 'Neptunian')

注意到函数参数beings以前有“...”前缀，这个前缀表示这是一个数组，从0到数组最大长度之间的元素值是由实际传入参数决定的。
3.解构
在Javascript中广泛模式是将一个对象做为配置可选项，之前，这些选项得手工从对象中分解出来而后分配给相应变量。


function beginDepartureSequence (options) {
  const captain = options.captain
  const ship = options.ship
  const destination = options.destination
  console.log(`Blast off sequence initiated for Captain ${captain} on ship ${ship} flying to ${destination}`)
}

beginDepartureSequence({
  captain: 'Rey',
  ship: 'Millennium Falcon',
  destination: 'Jakku'
})

如今使用 destructure 能够直接将对象解构到变量，不管顺序：


function beginDepartureSequence (options) {
  const { destination, captain, ship } = options
  console.log(`Blast off sequence initiated for Captain ${captain} on ship ${ship} flying to ${destination}`)
}

beginDepartureSequence({
  captain: 'Rey',
  ship: 'Millennium Falcon',
  destination: 'Jakku'
})

上面options对象被直接解构分配给了变量destination, captain, ship三个，咱们能够作得更好，能够直接在函数参数中声明这些变量名：


function beginDepartureSequence ({ destination, ship, captain }) {
  console.log(`Blast off sequence initiated for Captain ${captain} on ship ${ship} flying to ${destination}`)
}

beginDepartureSequence({
  captain: 'Rey',
  ship: 'Millennium Falcon',
  destination: 'Jakku'
})

以上只是简单几个新特色，更多支持Javascript6 或Javascript7的特性能够参考：http://node.green/

View Code

　　5.mvc思想java

模型(model)(数据层)－视图(view)（界面显示）－控制器(controller)（逻辑层）node

mvc模式的核心思想是分离责任，使得数据、视图和逻辑部分分开，模型层关心的只是应用的状态以及业务逻辑而不用考虑数据如何展示给用户；视图层关心的是的只是如何根据模型的变化为用户提供用户界面；控制层则负责接收用户的输入而后将其交给对应的模型，它并不关心用户如何输入以及这些输入数据是如何做用于模型的。jquery

6.前端cookie与session的区别webpack

7.解释一下前端数据与表现分离git

什么是表现与数据分离
我一来就看了一篇文章，点进去一看结果说的是表现与结构分离，其大意是：

表现应该由CSS来控制，结构应该由html来控制，好比咱们伟大的禅意花园。

因而我以为，我简历是否是应该改为，表现与结构分离呢。。。。

可是我感受表现与数据分离仍是有点道理呢，因此咱们仍是回到咱们的表现与数据分离吧。

----------华丽的分割线----------

半个小时过去了，我去查询了资料也去请教了前辈，最后得出了两个东西：

MVC

MVVM

很显然，他们说的这个也许是我找寻的答案，可是我内心面视乎并不买帐，因而我找寻了之后截了一个图：



这是一个搞后端的大哥写的博客，咱们看到采用MVC开发的主要目的就是表现与数据分离。

看来真的就是MVC啦。。。

好了，这个地方暂时打住，咱们来看看当时的原话

模拟面试
面试官问我，说简历上写的对表现与数据分离有必定理解，能够描述一下么

我很淡定的说了句让我思考下，而后开始搜索着个人大脑硬盘，好像压根就没有这个词呢，因而胡乱蒙了个是否是html与css应该分离？

答案固然是否认的，而后面试哥把他在项目中遇到的一个问题抛了出来：

他有一个国家列表，如今要将国家列表放到A中，而后B能够由A选择，也能够有总列表选择
可是B中添加后，如果A中没有要动态为A增长这项。
为了方便各位理解，我上个图



不知道各位听到这个题做何感觉，我当时其实就有一种方式能够实现（最简单，最土的），压根就没有想到这个题会和“表现与数据分离”有关系。

可是既然问到了，应该仍是有联系吧，不知道各位怎么看待呢？

因而咱们回到问题自己吧

再论行为与数据分离
咱们工做中可能会碰到这种状况，美工每次拿过来的东西感受都有点不同，你不能说出有好大的不同，反正就是有地方不同。

而后一拿来后整个家伙所有完蛋，js报错啦，为何报错大家懂的，这里我来现身说法，整一个真实的例子吧

当年我年少轻狂还在索贝时，咱们有设计，可是设计同事的CSS不好，给咱们的html+css常常有未闭合的标签，常常会出现莫名其妙的双引号。

可是当时我CSS也很差，其它同事彻底就是搞后端的，因此在这个状况下咱们艰难的作出了咱们的初版产品，与设计图一致（仍是在设计的代码上修改的）。

完了领导看了提出了一点修改意见，因而设计同事又改了下图，相信我他只是简单的改了一点东西，而后造成了html交给了咱们。。。。

此次拿来后我看到了此次的html结构和上次彻底是两码事，而咱们的产品又是单页应用，不少地方彻底是JavaScript生成的，或者html标签与data造成了模板，如今要改。。。改毛线啊。。。

为了具体描述咱们所遇到的困境我这里详细描述下：

① 咱们根据设计初版图作好了页面

② 页面上有不少应用，是采用相似于js模板化的东西（小的封装的，很戳）

③ 页面根据数据库设计，前端使用js控制页面加载，最后渲染出咱们的页面

好了整个代码还有点小复杂，完了如今设计哥来了一个彻底不一样的结构了，当时内部没有CSS高手，甚至说没有CSS熟手。

我负责改这个工做，我依稀记得我改出了翔。。。。最后终于改完了！

而后根据领导指示，设计同事给出了咱们第三套HTML代码，这个和原来的差距相对大一点，可是主要模块还在，因而我看空中处处都是翔了。。。。

我不知道我前面的描述各位遇到过没有，可是当时我没能很好的解决这个问题，就只能缝缝补补的改着，每次出新东西后又是一场悲剧。

回到现实

其实我遇到的这个问题我感受能够很好的说明表现数据分离的重要性了，可是什么是表现数据分离，咱们仍是须要将它说清楚啦。

PS：其实我遇到的问题比较复杂吧，我感受都不彻底是表现与数据分离了......

我说不清楚什么是表现与数据分离，那咱们举点反例吧：

① 服务器端（PHP/.net/Java），将html标签与数据一块儿打印出来

Response.Write("<div>......</div>");
这段代码各位必定见过，能够想象，一个系统一年后要改版，这个地方的代码修改可能有点痛苦吧（特别是原来的开发人员不在了）

这个是服务器端的，那么咱们的客户端呢（咳咳，让我想一想啦，想不到啦。。。）

② 我想到一个例子，不知道合适不，拿出来讲说吧

前段时间，咱们前端有个地区控件的东西，他大概是这个样子的：

var area = '<table>......</table>';
他在字符串中将全部的地区所有写了出来（包括地区编号（隐藏）），这样作会有问题的：

假设我哪天想改变一下结构适应新的布局（响应式布局神马的随便啦），那么咱们会发现无从下手

③ 仍是回到我遇到那个问题（重点来了哦）

我遇到那个问题其实主要是我在js中使用的id，或者class或者标签子选择器都不在了，新的代码上来后确定出错啦。

这个问题很尖锐的，原来我使用了一套html+css页面，咱们根据这个写了一大套javascript的东西，耗时3个月。
而后咱们换了一套页面，可是其中功能仍是咱们那套js
而后咱们再换了一套页面，其中的js仍是咱们那套js
最后最变态的要求出来了（由于产品会给不一样的电视台使用），咱们的产品在不一样的人看起来页面是不同的，可是其中的功能是同样的！！！
屌丝们，接招吧，各位哥哥，大家会怎么解决这个问题呢？

正是由于有上面那种莫名其妙的需求，因此才会出现咱们前端MVC这种莫名其妙的东西。。。

由于按道理来讲前端是不该该出现MVC的，咱们的html就是model，咱们的css就是view，咱们的js就是controller。

结果如今单是javascript就搞出来了一套MVC，这不坑爹么？

至此，不知道各位对表现与数据分离有新的了解没有？？？

MVC——表现与数据分离
话很少说，先上一段代码（原来的代码，抄过来的）：

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(document).ready(function () {
 7             var end = $('#end');
 8             $('#pili').change(function () {
 9                 var name = '';
10                 var p = $(this).val();
11                 if (p == '叶小钗') {
12                     name = '刀狂剑痴';
13                 }
14                 if (p == '一页书') {
15                     name == '百世经纶';
16                 }
17                 if (p == '素还真') {
18                     name = '清香白莲';
19                 }
20 
21                 end.html(name + p);
22             });
23         });
24     </script>
25 </head>
26 <body>
27     <select id="pili">
28         <option value="叶小钗">叶小钗</option>
29         <option value="一页书">一页书</option>
30         <option value="素还真">素还真</option>
31     </select>
32     <div id="end"></div>
33 </body>
34 </html>
咱们从新看看上面的代码，很简单的逻辑，select改变后变化end的值，好了如今需求发生改变：

① select变成使用input模拟select

② 在手机上仍是使用select算了

③ 总会有莫名其妙的需求，这个就是

好吧，如今的代码你该怎么写呢？是否是会写几个代码，或者你压根不知道怎么写呢？？？因而看看咱们的MVC的实现吧

PS：代码是我可耻的抄的。。。。但我但是自豪的一个字一个字的敲的哦，窃知识不算偷......

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(document).ready(function () {
 7             //定义一个controller
 8             var piliController = {
 9                 //选择视图
10                 start: function () {
11                     this.view.start();
12                 },
13                 //将用户操做映射到模型更新上
14                 set: function (name) {
15                     this.model.setPerson(name);
16                 }
17             };
18             piliController.model = {
19                 piliKV: {
20                     '叶小钗': '刀狂剑痴',
21                     '一页书': '百世经纶',
22                     '素还真': '清香白莲'
23                 },
24                 curPerson: null,
25                 //数据模型负责业务逻辑和数据存储
26                 setPerson: function (name) {
27                     this.curPerson = this.piliKV[name] ? name : null;
28                     this.onchange();
29                 },
30                 //通知数据同步更新
31                 onchange: function () {
32                     piliController.view.update();
33                 },
34                 //相应视图对当前状态的查询
35                 getPiliAction: function () {
36                     return this.curPerson ? this.piliKV[this.curPerson] + this.curPerson : '???';
37                 }
38             };
39             piliController.view = {
40                 //用户触发change事件
41                 start: function () {
42                     $('#pili').change(this.onchange);
43                 },
44                 onchange: function () {
45                     piliController.set($('#pili').val());
46                 },
47                 update: function () {
48                     $('#end').html(piliController.model.getPiliAction());
49                 }
50             };
51             piliController.start();
52         });
53     </script>
54 </head>
55 <body>
56     <select id="pili">
57      <option value="叶小钗">叶小钗</option>
58         <option value="一页书">一页书</option>
59         <option value="素还真">素还真</option>
60     </select>
61     <div id="end"></div>
62 </body>
63 </html>
咱们来看看这个神同样的代码。。。。咱们一开始会认为他有这些问题：

① 代码维护困难，至少我认为很困难

② 徒增复杂性，性能会有问题

③ 我并不能说服本身说本身懂了。。。。

因而咱们就放弃了MVC啦，可是咱们回过头来好好审视下他，咱们会发现不同的东西：

① 咱们好像就在view中使用了选择器获取dom，其它地方压根不认识dom这个丫的。

② 咱们的数据彷佛在model中，咱们能够随意改变，可是并不会影响到咱们dom

③ view和model是彻底独立的，咱们的controller刚好把他们串联起来了

看着这神奇的魔法，我似懂非懂的点了点头，你妹的MVC还真他妈够劲！！！

View Code

8.js事件的三个阶段：es6

js事件的三个阶段分别为：捕获、目标、冒泡

1.捕获：事件由页面元素接收，逐级向下，到具体的元素

2.目标：具体的元素自己

3.冒泡：跟捕获相反，具体元素自己，逐级向上，到页面元素

事件捕获：当使用事件捕获时，父级元素先触发，子元素后触发

事件冒泡：当使用事件冒泡时，子级元素先触发，父元素后触发

W3C ：任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达事件源，再从事件源向上进行事件捕获

*IE和W3C不一样绑定事件解绑事件的方法有什么区别，参数分别是什么，以及事件对象e有什么区别

标准浏览器：addEventListener("click","doSomething","true")方法,若第三参数为true则采用事件捕获，若为false，则采用事件冒泡

IE浏览器只支持事件冒泡，不支持事件捕获，因此它不支持addEventListener("click","doSomething","true")方法,因此ie浏览器使用ele.attachEvent("onclick",doSomething)

事件对象e的区别：

在触发DOM上的某个事件时，会产生一个事件对象event

在ie中事件对象定义为window.event

事件传播的阻止方法：

再W3C中，使用stopPropagation()方法

在IE下使用cancelBubble = true方法

阻止默认行为：

再W3c中，使用preventDefault（）方法

再IE下return false

9.【事件的代理/委托】的原理以及优缺点。

原理：

事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来作，这个事件原本是加在某些元素上的，然而你却加到别人身上来作，完成这个事件。

也就是：利用冒泡的原理，把事件加到父级上，触发执行效果

优势是

一、能够大量节省内存占用，减小事件注册，好比在table上代理全部td的click事件就很是棒

二、能够实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤其合适

缺点：事件代理的应用经常使用应该仅限于上述需求下，若是把全部事件都用代理就可能会出现事件误判，即本不该用触发事件的被绑上了事件

10.前端性能优化。

网络性能优化，加快访问速度，浏览器并行加载数量，怎样实现原生JS异步载入，CDN加速的原理，如何将不一样静态资源发布到多个域名服务器上，发布后这些静态字段的url路径改怎么批量改写，用什么工具进行项目打包，css打包后的相对路径怎么转换为绝对路径，用什么工具进行项目模块依赖管理，怎么进行cookie优化等等

11.闭包原理及其应用

什么状况下会发生闭包，为何须要闭包，什么场景下须要，闭包闭了谁，怎么释放被闭包的变量内存，闭包的优势是什么，缺点是什么。参考网址1 参考网址2

12.跨域

JavaScript跨域总结与解决办法（http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html）

跨域-知识（http://www.cnblogs.com/scottckt/archive/2011/11/12/2246531.html）

跨域资源共享的10种方式（http://www.cnblogs.com/cat3/archive/2011/06/15/2081559.html）

13.jsonp原理

能够把须要跨域的请求改为用script脚本加载便可，服务器返回执行字符串，可是这个字符串是在window全局做用域下执行的，你须要把他返回到你的代码的做用域内，这里就须要临时建立一个全局的回调函数，并把到传到后台，最后再整合实际要请求的数组，返回给前端，让浏览器直接调用，用回调的形式回到你的原代码流程中。

参考网址1

将url的查询参数解析成字典对象

这个题目不约而同的出如今了多家公司的面试题中，固然也是由于太过于典型，解决方案无非就是拆字符或者用正则匹配来解决，我我的强烈建议用正则匹配，由于url容许用户随意输入，若是用拆字符的方式，有任何一处没有考虑到容错，就会致使整个js都报错。而正则就没有这个问题，他只匹配出正确的配对，非法的所有过滤掉，简单，方便。

实现代码：

function getQueryObject(url) {

url = url == null ? window.location.href : url;

var search = url.substring(url.lastIndexOf("?") + 1);

var obj = {};

var reg = /([^?&=]+)=([^?&=]*)/g;

search.replace(reg, function (rs, $1, $2) {

var name = decodeURIComponent($1);

var val = decodeURIComponent($2);

val = String(val);

obj[name] = val;

return rs;

});

return obj;

}

函数节流

对于常见的场景，如网页滚动时，常常会有滚动到哪时作什么样的动画效果，遂要注册onscroll事件，如何减小触发次数，到达优化性能，同时又知足效果要求不卡顿，一个是优化事件内代码，减小代码量，二就是作函数节流。

大部分节流都采用时间作节流，即时间间隔小于多少的再也不调用，但同时保证一个最小调用间隔。（不然拖拽类的节流都将无效果），也能够用调用次数作节流，但要考虑最后一次调用须要要执行。

能够参考：浅谈javascript的函数节流(http://www.alloyteam.com/2012/11/javascript-throttle/)

设计模式

这方面被问到的比较多的有观察者模式，职责链模式，工厂模式

主要是应用于js开发组件中会常常涉及，纯粹的页面业务逻辑可能涉及很少。

好比如何去设计一个前端UI组件，应该公开出哪些方法，应该提供哪些接口，应该提供哪些事件。哪部分逻辑流程应该开放出去让用户自行编写，如何实现组件与组件之间的通讯，如何实现高内聚低耦合，如何实现组件的高复用等等

css垂直居中方法

能够看到我提到上面大多数都是关于JS的面试题，主要是由于css并非个人强项，但有几个出现频率很高，就是经典的垂直居中问题。

这个问题又能够细分为，被垂直居中的元素是否认高，是文字仍是块，文字是单行仍是多行文字等等

这个能够百度下，有N多种解决方案，主要仍是看应用场景的限制。

自适应布局

这个问题能够划分为，左固定右自适应宽度，上固定下固定中间自适应高度等等布局要求。

关于左右自适应的，不低于10种解决方案，还要看dom结构要求是并列仍是嵌套，是否容许有父级元素，是否容许使用CSS3，是否有背景色，是否要两列等高，等等

而关于自适应高度的解决方案就略少一些，大体也是靠，CSS3的calc属性，内padding，绝对定位后拉伸，动态js计算等等解决方案，一样也是要看应用场景能用哪一个

移动端自适应

也被问到了不少移动端开发中的各类坑，好比2倍屏，3倍屏的自适应等

js中this的理解

this的指向在函数定义的时候是肯定不了的，只有函数执行的时候才能肯定this到底指向谁，实际上this的最终指向的是那个调用它的对象

AMD与CommonJS的区别与共同点

共同点：二者都是为了实现模块化编程而出现的，对于大型项目，参与人数多，代码逻辑复杂，是最适合使用模块化的思想来完成整个项目的。同时采用这种思想也很便于对整个项目进行管控。

区别：CommonJS是适用于服务器端的，著名的Node执行环境就是采用的CommonJS模式。它是同步加载不一样模块文件。之因此采用同步，是由于模块文件都存放在服务器的各个硬盘上，实际的加载时间就是硬盘的文件读取时间。

AMD，Asynchronous Module Definition，即异步模块定义。它是适用于浏览器端的一种模块加载方式。从名字可知，AMD采用的是异步加载方式（js中最典型的异步例子就是ajax）。浏览器须要使用的js文件（第一次加载，忽略缓存）都存放在服务器端，从服务器端加载文件到浏览器是受网速等各类环境因素的影响的，若是采用同步加载方式，一旦js文件加载受阻，后续在排队等待执行的js语句将执行出错，会致使页面的‘假死’，用户没法使用一些交互。因此在浏览器端是没法使用CommonJS的模式的。目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js

CMD （通用模块定义） seajs 懒执行，就近依赖

javascript null，undefined，undeclared的区别

1.undefined表示"缺乏值"，就是此处应该有一个值，可是尚未定义，转为数值时为NaN。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

2.null表示"没有对象"，即该处不该该有值，转为数值时为0。典型用法是：

（1）做为函数的参数，表示该函数的参数不是对象。

（2）做为对象原型链的终点。

3.undeclared：js语法错误，没有申明直接使用，js没法找到对应的上下文。

我:
http://www.jackpu.com/2016ge-da-hu-lian-wang-gong-si-qian-duan-mian-shi-ti-hui-zong/
我:
https://www.zhihu.com/question/41466747?sort=created
我:
做者：汪汪
连接：https://www.zhihu.com/question/41466747/answer/132562725
来源：知乎
著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。

（10）浏览器的垃圾回收机制

垃圾收集器必须跟踪哪一个变量有用哪一个变量没用，对于再也不有用的变量打上标记，以备未来收回其占用的内存，内存泄露和浏览器实现的垃圾回收机制息息相关，而浏览器实现标识无用变量的策略主要有下两个方法：
第一，引用计数法
跟踪记录每一个值被引用的次数。当声明一个变量并将引用类型的值赋给该变量时，则这个值的引用次数就是1。若是同一个值又被赋给另外一个变量，则该值的引用次数加1.相反，若是包含对这个值引用的变量又取得另一个值，则这个值的引用次数减1.当这个值的引用次数变成0时，则说明没有办法访问这个值了，所以就能够将其占用的内存空间回收回来。

如： var a = {}; //对象{}的引用计数为1
b = a; //对象{}的引用计数为 1+1
a = null; //对象{}的引用计数为2-1
因此这时对象{}不会被回收;
IE 6, 7 对DOM对象进行引用计数回收，这样简单的垃圾回收机制，很是容易出现循环引用问题致使内存不能被回收，进行致使内存泄露等问题，通常不用引用计数法。
第二，标记清除法
到2008年为止，IE,Firefox,Opera,Chrome和Safari的javascript实现使用的都是标记清除式的垃圾收集策略（或相似的策略），只不过垃圾收集的时间间隔互有不一样。
标记清除的算法分为两个阶段，标记(mark)和清除(sweep). 第一阶段从引用根节点开始标记全部被引用的对象，第二阶段遍历整个堆，把未标记的对象清除。
我:
https://www.zhihu.com/question/41466747?sort=created
我:
http://www.cnblogs.com/bigboyLin/p/5272902.html
我:
浏览器兼容问题？如何区分 HTML 和
HTML5？

HTML5 如今已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增长。
绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，好比 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websockt, Geolocation
移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
IE8/IE7/IE6支持经过document.createElement方法产生的标签，
能够利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还须要添加标签默认的样式：
我:
内联元素居中方案

水平居中设置：
1.行内元素

设置 text-align:center；
2.Flex布局

设置display:flex;justify-content:center;(灵活运用,支持Chroime，Firefox，IE9+)
垂直居中设置：
1.父元素高度肯定的单行文本（内联元素）

设置 height = line-height；
2.父元素高度肯定的多行文本（内联元素）

a:插入 table （插入方法和水平居中同样），而后设置 vertical-align:middle；
b:先设置 display:table-cell 再设置 vertical-align:middle；
块级元素居中方案

水平居中设置：
1.定宽块状元素
设置左右 margin 值为 auto；
2.不定宽块状元素

a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，而后设置 margin 的值为 auto；
b:给该元素设置 displa:inine 方法；
c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%；
我:
（1）减小http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
（2）前端模板 JS+数据，减小因为HTML标签致使的带宽浪费，前端用变量保存AJAX请求结果，每次操做本地变量，不用请求，减小请求次数
（3）用innerHTML代替DOM操做，减小DOM操做次数，优化javascript性能。
（4）当须要设置的样式不少时设置className而不是直接操做style。
（5）少用全局变量、缓存DOM节点查找的结果。减小IO读取操做。
（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。
（8）避免在页面的主体布局中使用table，table要等其中的内容彻底下载以后才会显示出来，显示div+css布局慢。对普通的网站有一个统一的思路，就是尽可能向前端优化、减小数据库操做、减小磁盘IO。向前端优化指的是，在不影响功能和体验的状况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减小数据库操做指减小更新次数、缓存结果减小查询次数、将数据库执行的操做尽量的让你的程序完成（例如join查询），减小磁盘IO指尽可能不使用文件系统做为缓存、减小读写文件次数等。程序优化永远要优化慢的部分，换语言是没法“优化”的。
我:

3.http状态码有那些？分别表明是什么意思？
100-199 用于指定客户端应相应的某些动做。
200-299 用于表示请求成功。
300-399 用于已经移动的文件而且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。400 一、语义有误，当前请求没法被服务器理解。401 当前请求须要用户验证 403 服务器已经理解请求，可是拒绝执行它。
500-599 用于支持服务器错误。 503 – 服务不可用
4.一个页面从输入 URL 到页面加载显示完成，这个过程当中都发生了什么？（流程说的越详细越好）

查找浏览器缓存
DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
进行HTTP协议会话
客户端发送报头(请求报头)
文档开始下载
文档树创建，根据标记请求所需指定MIME类型的文件
文件显示
浏览器这边作的工做大体分为如下几步：
加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（好比HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）
我:
做者：汪汪
连接：https://www.zhihu.com/question/41466747/answer/132562725
来源：知乎
著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。

（10）浏览器的垃圾回收机制

原型链图解