js前端面试题总结及答案

雨点打透心脏的1/2处 2022-05-16 01:20 278阅读 0赞

## CSS ##

### 列举不同的清除浮动的技巧 ###

### 一像素边框 ###

使用`sass`语法。

### 形成**BFC**(Block Formatting Context)的几种方式 ###

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。

### 布局 ###

*  [**圣杯布局**和**双飞翼布局**][Link 1]
 *  左定宽右自适应宽度，并且等高布局(最小高度200px)

## JS ##

### `async`与`defer`区别 ###

异步(async) 脚本将在其加载完成后立即执行，而 延迟(defer) 脚本将等待 HTML 解析完成后，并按加载顺序执行。

### `location.replace()`与`location.asign()`区别 ###

`location.replace()`的url不会出现在history中

### `new`操作符 ###

*  创建一个空对象，并且`this`变量引用该对象，同时还继承了 该函数的原型
 *  属性和方法被加入到`this`引用的对象中
 *  新创建的对象由`this`所引用，并且最后隐式的返回`this`

### AMD CMD CommonJS ###

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </td> 
 <td> <pre>
&nbsp;</pre> /* AMD是RequireJS对模块化的定义 * CMD是seaJS对模块化的定义 * CommonJS是Node对模块化的规范 **/ /* AMD 依赖关系前置 */ define(['./a', './b'], function (a, b) { a.something(); b.something(); }) /* CMD 按需加载，依赖就近 */ define(function (require, exports, module) { var a = require('./a'); a.something(); var b = require('./b'); b.something(); }) </td> 
 </tr> 
 </tbody> 
</table>

DOM 操作

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </td> 
 <td> <pre>
&nbsp;</pre> // 创建节点 createDocumentFragment() createElement() createTextNode() // 添加 移除 替换 插入 appendChild() removeChild() replaceChild() insertBefore() // 查找 getElementsByTagName() getElementsByName() getElementsByClassName() getElementById() querySelector() querySelectorAll() </td> 
 </tr> 
 </tbody> 
</table>

### JS设置css样式的几种方式 ###

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <pre>
&nbsp;</pre> /* 1.直接设置style属性 */ element.style.height = '100px'; /* 2.直接设置属性 */ element.setAttribute('height', '100px'); /* 3.使用setAttribute设置style属性 */ element.setAttribute('style', 'height: 100px !important'); /* 4.使用setProperty设置属性，通过第三个参数设置important */ element.style.setProperty('height', '300px', 'important'); /* 5.设置cssText */ element.style.cssText += 'height: 100px !important'; </td> 
 </tr> 
 </tbody> 
</table>

### 阻止默认行为 ###

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <pre>
&nbsp;</pre> function stopDefault( e ) { // 阻止默认浏览器动作(W3C) if ( e &amp;&amp; e.preventDefault ) { e.preventDefault(); } else { // IE中阻止函数器默认动作的方式 window.event.returnValue = false; } return false; } </td> 
 </tr> 
 </tbody> 
</table>

### 阻止冒泡 ###

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <pre>
&nbsp;</pre> function stopBubble(e) { // 如果提供了事件对象，则这是一个非IE浏览器 if ( e &amp;&amp; e.stopPropagation ) { // 因此它支持W3C的stopPropagation()方法 e.stopPropagation(); } else { // 否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } } </td> 
 </tr> 
 </tbody> 
</table>

### Ajax交互过程 ###

*  创建XMLHttpRequest对象,也就是创建一个异步调用对象.
 *  创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
 *  设置响应HTTP请求状态变化的函数.
 *  发送HTTP请求.
 *  获取异步调用返回的数据.
 *  使用JavaScript和DOM实现局部刷新.

### 考察知识点最广的JS面试题 ###

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 </td> 
 <td> <pre>
&nbsp;</pre> function Foo() { getName = function () { alert(1); } return this; } Foo.getName = function () { alert(2); } Foo.prototype.getName = function () { alert(3); } var getName = function () { alert(4); } function getName () { alert(5); } /* 写出输出 */ Foo.getName(); getName(); Foo().getName(); getName(); new Foo.getName(); new Foo().getName(); new new Foo().getName(); </td> 
 </tr> 
 </tbody> 
</table>

具体讲解参见[一道常被人轻视的前端JS面试题][JS]

### JS数组深浅拷贝 ###

*  `slice`实现

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 </td> 
 <td> <pre>
&nbsp;</pre> var arr = ['old', 1, true, null, undefined]; var new_arr = arr.slice(); new_arr[0] = 'new'; console.log(arr) // ["old", 1, true, null, undefined] console.log(new_arr) // ["new", 1, true, null, undefined] </td> 
 </tr> 
 </tbody> 
</table>

*  `concat`实现

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 </td> 
 <td> <pre>
&nbsp;</pre> var arr = ['old', 1, true, null, undefined]; var new_arr = arr.concat(); new_arr[0] = 'new'; console.log(arr) // ["old", 1, true, null, undefined] console.log(new_arr) // ["new", 1, true, null, undefined] </td> 
 </tr> 
 </tbody> 
</table>

以上两种方法只是浅拷贝，如果数组元素是基本类型，就会拷贝一份新的；但是如果数组元素是对象或者数组，就只会拷贝引用（类似指针），修改其中一个就会影响另外一个。

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <pre>
&nbsp;</pre> var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}]; var new_arr = arr.concat(); new_arr[0] = 'new'; new_arr[3][0] = 'new1'; console.log(arr) // ["old", 1, true, ['new1', 'old2'], {old: 1}] console.log(new_arr) // ["new", 1, true, ['new1', 'old2'], {old: 1}] </td> 
 </tr> 
 </tbody> 
</table>

*  `JSON.stringify`实现数组深拷贝

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <pre>
&nbsp;</pre> var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}]; var new_arr = JSON.parse(JSON.stringify(arr)); new_arr[0] = 'new'; new_arr[3][0] = 'new1'; console.log(arr) // ["old", 1, true, ['old1', 'old2'], {old: 1}] console.log(new_arr) // ["new", 1, true, ['new1', 'old2'], {old: 1}] </td> 
 </tr> 
 </tbody> 
</table>

简单粗暴，但是问题是不能拷贝函数，不推荐。

然后我们来手动实现深浅拷贝。

*  浅拷贝

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <pre>
&nbsp;</pre> var shallowCopy = function (obj) { // 判断是否是数组或者对象 if (typeof obj !== 'object') { return } var newObj = obj instanceof Array ? [] : {}; for (var key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = obj[key]; } } return newObj; } </td> 
 </tr> 
 </tbody> 
</table>

*  深拷贝

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <pre>
&nbsp;</pre> var deepCopy = function (obj) { if (typeof obj !== 'object') { return } var newObj = obj instanceof Array ? [] : {}; for (var key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key]; } } return newObj } </td> 
 </tr> 
 </tbody> 
</table>

### 数组去重 ###

*  `filter` + `indexOf`

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 </td> 
 <td> <pre>
&nbsp;</pre> function unique (arr) { var res = arr.filter(function (item, index, array) { return array.indexOf(item) === index; }) return res; } </td> 
 </tr> 
 </tbody> 
</table>

*  `filter` + `sort`

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 </td> 
 <td> <pre>
&nbsp;</pre> function unique (arr) { return arr.concat().sort().filter(function (item, index, array) { return !index || item !== array[index - 1]; }) } </td> 
 </tr> 
 </tbody> 
</table>

*  `ES6`

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 </td> 
 <td> <pre>
&nbsp;</pre> function uniqu3 (arr) { return [... new Set(arr)]; } </td> 
 </tr> 
 </tbody> 
</table>

### 找出数组中的最大值 ###

*  `reduce`

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 </td> 
 <td> <pre>
&nbsp;</pre> var arr = [6, 4, 1, 8, 2, 11, 3]; function max (prev, next) { return Math.max(prev, next) } console.log(arr.reduce(max)); </td> 
 </tr> 
 </tbody> 
</table>

*  `apply`

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 </td> 
 <td> <pre>
&nbsp;</pre> var arr = [6, 4, 1, 8, 2, 11, 3]; console.log(Math.max.apply(null, arr)); </td> 
 </tr> 
 </tbody> 
</table>

*  `ES6`

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 </td> 
 <td> <pre>
&nbsp;</pre> var arr = [6, 4, 1, 8, 2, 11, 3]; function max (arr) { return Math.max(...arr); } console.log(max(arr)); </td> 
 </tr> 
 </tbody> 
</table>

### 打乱数组的方法 ###

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 </td> 
 <td> <pre>
&nbsp;</pre> var arr = []; for (var i = 0; i &lt; 100; i++) { arr[i] = i; } arr.sort(function () { return 0.5 - Math.random(); }); </td> 
 </tr> 
 </tbody> 
</table>

### 数组扁平化 ###

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <pre>
&nbsp;</pre> var arr = [1, [2, [3, 4]]]; function flatten(arr) { while (arr.some(item =&gt; Array.isArray(item))) { arr = [].concat(...arr); } return arr; } console.log(flatten(arr)) </td> 
 </tr> 
 </tbody> 
</table>

### 排序 ###

### 数字格式化 `1234567890 -> 1,234,567,890` ###

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 </td> 
 <td> <pre>
&nbsp;</pre> function formatNum (num) { return num.replace(/\B(?=(\d{3})+(?!\d))/g, ','); } var num = '1234567890'; var res = formatNum(num); console.log(res); </td> 
 </tr> 
 </tbody> 
</table>

### 打乱数组的方法 ###

### 尾调用优化 ###

即只保存内层函数的调用帧(只有开启严格模式，才会生效),只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则无法进行“尾调用优化。

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <pre>
&nbsp;</pre> function factorial(n) { if (n === 1) return 1; return n * factorial(n-1); } factorial(5) /* 优化尾递归 */ function factorial(n, total) { if (n === 1) return total; return factorial(n - 1, n * total); } factorial(5, 1) </td> 
 </tr> 
 </tbody> 
</table>

### 柯里化 ###

实现`add(1,2)`和`add(1)(2)`均输出`3`

### ES8 新特性 ###

*  字符串填充

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 </td> 
 <td> <pre>
&nbsp;</pre> str.padStart(targetLength [, padString]) str.padEnd(targetLength [, padString]) </td> 
 </tr> 
 </tbody> 
</table>

*  `values`和`entries`函数

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 </td> 
 <td> <pre>
&nbsp;</pre> Object.values(obj) Object.entries(obj) </td> 
 </tr> 
 </tbody> 
</table>

*  `getOwnPropertyDescriptors`函数

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 </td> 
 <td> <pre>
&nbsp;</pre> Object.getOwnPropertyDescriptors(obj) </td> 
 </tr> 
 </tbody> 
</table>

*  函数参数逗号结尾

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 </td> 
 <td> <pre>
&nbsp;</pre> function es8(var1, var2, var3,) {} </td> 
 </tr> 
 </tbody> 
</table>

*  异步函数  
    由`async`关键词定义的函数声明了一个可以异步执行的函数，返回一个`AsyncFunction`类型的对象。

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <pre>
&nbsp;</pre> fucntion fetchTextByPromise () { return new Promise(resolve =&gt; { setTimeout(() =&gt; { resolve('es8'); }, 2000); }); } async function sayHello () { const externalFetchedText = await fetchTextByPromise(); console.log(`Hello, ${externalFetchedText}`); } sayHello(); </td> 
 </tr> 
 </tbody> 
</table>

### 数据类型判断 ###

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <pre>
&nbsp;</pre> var class2type = {}; 'Boolean Number String Function Array Date RegExp Object Error Null Undefined'.split(' ').map((item, index) =&gt; { class2type['[object ' + item + ']'] = item.toLowerCase(); }) function type (obj) { return typeof obj === 'object' || typeof obj === 'function' ? class2type[{}.toString.call(obj)] || 'object' : typeof obj; } </td> 
 </tr> 
 </tbody> 
</table>

### 防抖 ###

### 简单的字符串模板 ###

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td> <pre>
&nbsp;</pre> var TemplateEngine = function(tpl, data) { var re = /&lt;%([^%&gt;]+)?%&gt;/g, match; while(match = re.exec(tpl)) { tpl = tpl.replace(match[0], data[match[1]]) } return tpl; } var template = '&lt;p&gt;Hello, my name is &lt;%name%&gt;. I\'m &lt;%age%&gt; years old.&lt;/p&gt;'; console.log(TemplateEngine(template, { name: "Yeaseon", age: 24 })); // '&lt;p&gt;Hello, my name is Yeaseon. I\'m 24 years old.&lt;/p&gt;'; </td> 
 </tr> 
 </tbody> 
</table>

### `apply`、`call`和`bind` ###

*  `apply`和`call`

在严格模式下，未指定环境对象而调用函数，则this 值不会转型为window。除非明确把函数添加到某个对象或者调用apply()或call()，否则this 值将是undefined。

在非严格模式下，call、apply的第一个参数传递为null或undefined时，函数体内的this会指向默认的宿主对象，在浏览器中则是window。

*  `apply`、`call`和`bind`比较

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <pre>
&nbsp;</pre> var obj = { x: 81 }; var foo = { getX: function () { return this.x; } } console.log(foo.getX.bind(obj)()); console.log(foo.getX.apply(obj)); console.log(foo.getX.call(obj)); </td> 
 </tr> 
 </tbody> 
</table>

很明显，`bind`方法后面多了一对括号。也就是说，当你希望改变上下文环境之后并且立即执行，而是回调执行的时候（多用于事件监听器函数），使用`bind()`方法，而`apply/call`则会立即执行函数。

*  定义一个 log 方法，让它可以代理 console.log 方法。

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 </td> 
 <td> <pre>
&nbsp;</pre> function log(){ console.log.apply(console, arguments); }; log(1); //1 log(1,2); //1 2 </td> 
 </tr> 
 </tbody> 
</table>

*  给每一个 log 消息添加一个”(app)”的前辍，比如：

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 </td> 
 <td> <pre>
&nbsp;</pre> log("hello world"); //(app)hello world </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 </td> 
 <td> <pre>
&nbsp;</pre> function log(){ var args = Array.prototype.slice.call(arguments); args.unshift('(app)'); console.log.apply(console, args); }; </td> 
 </tr> 
 </tbody> 
</table>

*  `apply`实现`bind`

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 </td> 
 <td> <pre>
&nbsp;</pre> function bind (fn, context) { return function () { return fn.apply(context, argument); } } </td> 
 </tr> 
 </tbody> 
</table>

### 创建对象 ###

*  工厂模式

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <pre>
&nbsp;</pre> function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; return o; } var person1 = createPerson("Nicholas", 29, "Software Engineer"); var person2 = createPerson("Greg", 27, "Doctor"); </td> 
 </tr> 
 </tbody> 
</table>

*  构造函数模式

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <pre>
&nbsp;</pre> function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.sayName = function(){ alert(this.name); }; } var person1 = new Person("Nicholas", 29, "Software Engineer"); var person2 = new Person("Greg", 27, "Doctor"); </td> 
 </tr> 
 </tbody> 
</table>

*  原型模式

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <pre>
&nbsp;</pre> function Person(){ } Person.prototype.name = "Nicholas"; Person.prototype.age = 29; Person.prototype.job = "Software Engineer"; Person.prototype.sayName = function(){ alert(this.name); }; var person1 = new Person(); person1.sayName(); //"Nicholas" </td> 
 </tr> 
 </tbody> 
</table>

*  构造函数 + 原型模式

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </td> 
 <td> <pre>
&nbsp;</pre> function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.friends = ["Shelby", "Court"]; } Person.prototype = { constructor : Person, sayName : function(){ alert(this.name); } } var person1 = new Person("Nicholas", 29, "Software Engineer"); var person2 = new Person("Greg", 27, "Doctor"); person1.friends.push("Van"); alert(person1.friends); //"Shelby,Count,Van" alert(person2.friends); //"Shelby,Count" alert(person1.friends === person2.friends); //false alert(person1.sayName === person2.sayName); //true </td> 
 </tr> 
 </tbody> 
</table>

### JS实现Jquery的`extend()`方法 ###

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 </td> 
 <td> <pre>
&nbsp;</pre> function extend() { // 默认不进行深拷贝 var deep = false; var name, options, src, copy, clone, copyIsArray; var length = arguments.length; // 记录要复制的对象的下标 var i = 1; // 第一个参数不传布尔值的情况下，target 默认是第一个参数 var target = arguments[0] || {}; // 如果第一个参数是布尔值，第二个参数是 target if (typeof target == 'boolean') { deep = target; target = arguments[i] || {}; i++; } // 如果target不是对象，我们是无法进行复制的，所以设为 {} if (typeof target !== "object" &amp;&amp; !isFunction(target)) { target = {}; } // 循环遍历要复制的对象们 for (; i &lt; length; i++) { // 获取当前对象 options = arguments[i]; // 要求不能为空 避免 extend(a,,b) 这种情况 if (options != null) { for (name in options) { // 目标属性值 src = target[name]; // 要复制的对象的属性值 copy = options[name]; // 解决循环引用 if (target === copy) { continue; } // 要递归的对象必须是 plainObject 或者数组 if (deep &amp;&amp; copy &amp;&amp; (isPlainObject(copy) || (copyIsArray = Array.isArray(copy)))) { // 要复制的对象属性值类型需要与目标属性值相同 if (copyIsArray) { copyIsArray = false; clone = src &amp;&amp; Array.isArray(src) ? src : []; } else { clone = src &amp;&amp; isPlainObject(src) ? src : {}; } target[name] = extend(deep, clone, copy); } else if (copy !== undefined) { target[name] = copy; } } } } return target; }; </td> 
 </tr> 
 </tbody> 
</table>

### 自定义事件（通过观察者模式） ###

## 安全 ##

### 跨域的几种方法 ###

1.  主域相同的跨域

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 </td> 
 <td> <pre>
&nbsp;</pre> document.domain </td> 
 </tr> 
 </tbody> 
</table>

1.  `window.postMessage`
2.  `JSONP`跨域(只支持`GET`)

<table> 
 <tbody> 
 <tr> 
 <td> <pre>
&nbsp;</pre> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <pre>
&nbsp;</pre> function todo(data){ console.log('The author is: '+ data.name); } var script = document.createElement('script'); /* 向服务器<a rel="nofollow">www.yeaseonzhang.com发出请求。注意，该请求的查询字符串有一个callback参数，用来指定回调函数的名字。</a> */ script.src = '<a href="http://www.yeaseonzhang.com/author?callback=todo" rel="nofollow">http://www.yeaseonzhang.com/author?callback=todo</a>'; document.body.appendChild(script); /* 服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。 */ todo({"name": "fewjq"}); /* 由于&lt;script&gt;元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了todo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象。*/ </td> 
 </tr> 
 </tbody> 
</table>

1.  `websocket`跨域

### XSS 和 CSRF ###

*  [XSS][]
 *  [CSRF][]

## 性能 ##

### CSS 优化 ###

* 正确的时机调用CSS
 * 使用媒体查询标记`<link>`，选择性加载
 * 减少css文件数量
 * 压缩css代码

### 渲染 ###

*  [浏览器渲染原理][Link 2]

[Link 1]: https://yeaseonzhang.github.io/2017/07/05/CSS%E5%B8%83%E5%B1%80/
[JS]: http://www.cnblogs.com/xxcanghai/p/5189353.html
[XSS]: http://blog.csdn.net/ghsau/article/details/17027893
[CSRF]: http://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html
[Link 2]: http://coolshell.cn/articles/9666.html