面试

1、恰当的放置css(#)

• 将css文件引用放在head标签内而不是放在文档后面，这样不会让访问者长时间看着空白屏幕或者无格式的文本（FOUT）等待。如果网页大部分可见元素已经加载出来了，访问者才更有可能等待加载整个页面，从而带来对前端的优化效果。这就是知觉性能。不会让访问者长时间看着空白屏幕或者无格式的文本（FOUT）等待。如果网页大部分可见元素已经加载出来了，访问者才更有可能等待加载整个页面，从而带来对前端的优化效果。这就是知觉性能。

2、恰当的放置javascript(#)

• 如果将 JavaScript 放置在 head 标签内或 HTML 文档的上部，这会阻塞 HTML 和 CSS 元素的加载过程。这个错误会导致页面加载时间增长，增加用户等待时间，容易让人感到不耐烦而放弃对网站的访问。不过，您可以通过将 JavaScript 属性置于 HTML 底部来避免此问题。如果将 JavaScript 放置在 head 标签内或 HTML 文档的上部，这会阻塞 HTML 和 CSS 元素的加载过程。这个错误会导致页面加载时间增长，增加用户等待时间，容易让人感到不耐烦而放弃对网站的访问。不过，您可以通过将 JavaScript 属性置于 HTML 底部来避免此问题。

3、减少外部HTTP请求(#)

• 在很多情况下，网站的大部分加载时间来自于外部的 Http 请求。外部资源的加载速度随着主机提供商的服务器架构、地点等不同而不同。如，压缩工具、CDN 服务和预获取（prefetching）等，这些都是管理 HTTP 请求的最佳选择。除此之外，减少DNS路由查找教程会教你如何一步一步的减少外部 HTTP 请求。如，压缩工具、CDN 服务和预获取（prefetching）等，这些都是管理 HTTP 请求的最佳选择。除此之外，减少DNS路由查找教程会教你如何一步一步的减少外部 HTTP 请求。

5、压缩 CSS, JS 和 HTML(#)

• 使用压缩工具可以非常简单地把无用的字节从你的 CSS、JS 和 HTML 文件修剪掉。关于压缩的相关信息，可以参阅如何压缩 CSS、JS 和 HTML。使用压缩工具可以非常简单地把无用的字节从你的 CSS、JS 和 HTML 文件修剪掉。关于压缩的相关信息，可以参阅如何压缩 CSS、JS 和 HTML。

6、 使用预先获取(#)

预先获取可以在真正需要之前通过取得必需的资源和相关数据来改善访问用户的浏览体验，主要有3类预先获取:

• 链接预先获取
• DNS 预先获取
• 预先渲染

7、使用 CDN 和缓存提高速度(#)

• 内容分发网络能显著提高网站的速度和性能。使用 CDN 时，您可以将网站的静态内容链接到全球各地的服务器扩展网络。如果您的网站观众遍布全球，这项功能十分有用。 CDN 允许您的网站访问者从最近的服务器加载数据。如果您使用 CDN，您网站内的文件将自动压缩，以便在全球范围内快速分发。内容分发网络能显著提高网站的速度和性能。使用 CDN 时，您可以将网站的静态内容链接到全球各地的服务器扩展网络。如果您的网站观众遍布全球，这项功能十分有用。 CDN 允许您的网站访问者从最近的服务器加载数据。如果您使用 CDN，您网站内的文件将自动压缩，以便在全球范围内快速分发。

8、内存泄漏[原文地址]

概念

• 在javascript中创建变量、 对象、 字符串等等的时候都会为其分配内存，当不在使用的时候回自动的释放掉这些内存。这个过程被称为垃圾回收
• 内存泄漏(memory Leak)是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃。

特性

• 内存泄漏具有隐蔽性、积累性的特性。由于内存泄漏的积累性，内存泄漏通常不会直接产生可观察的错误症状，而是逐渐积累，降低系统整体性能

生命周期

• 分配内存 -> 使用内存 -> 释放内存

引用计数回收机制[原文地址]

• 当一个数据类型至少被引用一次，就不会被释放掉

var obj1 = {
    value: 1
}
var obj2 = obj
obj2 = 1 // 对象obj1没被引用 会当做垃圾释放掉清理内存

• 引用计数机制有一个缺陷-循环引用

function f() {
    var o1 = {}
    var o2 = {}
    o1.p = o2 //o2被o1.p引用了一次
    o2.p = o1 //o1被o2.p引用了一次
}
f()

标记清除法[原文地址]

• 由于引用计数的循环引用还是会造成内存的泄漏。所以程序又回执行一次标记清除法
• 从‘根’上生成一个列表（通常是以全局变量为根）。在JS中window对象可以作为一个'根'
• 从‘根’上生成一个列表（通常是以全局变量为根）。在JS中window对象可以作为一个'根'

• 没有被标记为活跃的就被认为成垃圾。这些内存就会被释放。

  
  标记清除法

四种常见的JS泄漏

1、全局变量

1、js对未声明的变量的引用在全局对象里创建一个新的变量。即直接在'window.变量名'。根据标记清除法，这个变量直接挂在window内，所有他不会被释放掉。
2、为了防止这些问题发生，可以在你的JaveScript文件开头使用'use strict'；。这个可以使用一种严格的模式解析JavaScript来阻止意外的全局变量。

2、定时器或者回调

3、闭包

4、来自DOM的引用

• 即使我们将DOM删除，但之前element对象中还是保存了DOM

  
  源代码
  控制台输出

8、Number.toFixed()

123.toFixed(2) // 会报错 js解释器会把数字后的.当做小数点而不是点操作符。
// 处理方法
(123).toFixed(2) // >> "123.00"
// 以下两种都可以，但完全不推荐
123..toFixed(2)
123 .toFixed(2)

9、连等赋值问题

var a = {n: 1};  
var b = a; 
a.x = a = {n: 2};  
console.log(a.x);// --> undefined  
console.log(b.x);// --> {n:2}

// 首页我们知道为对象声明一个变量，实际上是声明一个对对象地址的引用
// 如果我们把上面{n: 1} 在内存中的地址假设为00F0
00F0 => {n: 1}
a和b 都指向 00F0
当 a = {n: 2} // 假设a={n: 2} 的内存地址为00F1 a重新指向了00F0
当 a.x => 00F0.x = a = {n: 2} //当a.x 被x调用时 实际上是直接调用到了内存中的值
console.log(a) // {n: 2}
console.log(b) // {n: 1,x: {n: 2}}

10、逗号操作符[MDN]

逗号操作符 对它的每个操作数求值（从左到右），并返回最后一个操作数的值。

var x = 20;
var temp = {
    x: 40,
    foo: function() {
        var x = 10;
        return this.x;
    }
};
(temp.foo, temp.foo)() // 20，而不是40

11、位操作符 '>>'MDN

function convertToInt(num) {
      return num >> 0;
}
convertToInt(-Math.PI); // -3
convertToInt(12.921); // 12

12、数组的展开/扁平

将[1,2,[2,3,[4,5]]] 转化为 [1,2,2,3,4,5]

方法一：
function flatten(arr) {
    if(!isArray(arr) || !arr.length) {
        return [];
    } else {
        return Array.prototype.concat.apply([], arr.map(function(val) {
            return isArray(val) ? flatten(val) : val;
        }));
    }
    function isArray(arr) {
        console.log(Object.prototype.toString.call(arr)) // "[object Array]"
        return Object.prototype.toString.call(arr).slice(8, -1).toLowerCase() === 'array';
    }
}
flatten([1,2,[2,3,[4,5]]])
方法二：
[1,2,[2,3,[4,5]]].toString().split(',')  // ["1", "2", "2", "3", "4", "5"]

13、找出字符串中出现最多的字母

function getMaxNumberOfChar(str) {
    return (str).split('').reduce(function (pre, cur, index, arr) {
        cur in pre ? pre[cur]++ : (pre[cur] = 1);
        pre[cur] > pre.maxNum && (pre.maxLabel = cur, pre.maxNum = pre[cur]);
        return pre
    }, {maxNum: 0, maxLabel: ''})
}
console.log(getMaxNumberOfChar('abxbccdeajxac')) // "{"maxNum":3,"maxLabel":"a","a":3,"b":2,"x":2,"c":3,"d":1,"e":1,"j":1}"

14、渐进增强 VS 优雅降级[原文地址]

渐进增强：低浏览器实现基本功能，高级浏览器实现交互、效果达到更好的体验

优雅降级： 在高级浏览器实现完整功能，然后针对低级浏览器进行hack以便低级浏览器能够正常运行

15、js组成部分

1、ECMAScript 定义脚本语言的属性、方法和对象
2、文档对象类型(DOM)：把整个页面规划成由节点层级构成的文档
3、浏览器对象模型(BOM)：处理浏览器宽口和框架

16、如何跨域访问

同源策略： 同一协议、同一域名、同一端口但凡有一项不满足，浏览器就会返回 No 'Access-Control-Allow-Origin' header is present on the requested resource

• CORS 跨域资源共享策略
• jsonp跨域访问 (它只支持GET请求而不支持POST等其它类型的HTTP请求)]
• window.name
• document.domain(主域相同的情况下可用）
• postMessage(h5新引入）
• websocket(h5新引入，不受同源策略限制)
  ...

17、严格模式

1、全局变量显示声明
2、静态绑定：属性和方法归属的对象，在编译阶段就确定
3、增强的安全措施：①禁止this指向全局对象②禁止在函数内部遍历调用栈
4、禁止删除变量，除非创建对象使用configurable=true
5、显示报错：对对象的只读属性，只有getter的对象赋值，对禁止扩展的对象添加新属性都会报错
6、重名错误：对象不能有同名的参数，函数不能有重名的参数
7、禁止八进制表示法
8、禁止arguments赋值，不会追踪参数的变化，禁止使用arguments.callee
9、函数必须声明在顶层
10、新增保留字

18、meta标签的使用

meta name="keyword" 告诉搜素引擎网页的关键词
meta name="description" 告诉搜素引擎站点的内容
mata name="author" content="name"站点制作者
meta name="viewport" content="width=device-width, initial-scale=1.0"响应式页面

19、<!doctyle html>的作用

使用html5标准来解析渲染页面，如果不写就进入混杂模式

严格模式：浏览器最高标准呈现页面
混杂模式：页面以一种比较宽松的向后兼容的方式显示

浏览器内核的理解

渲染引擎和JS引擎
渲染引擎：负责取得网页的内容、整理讯息，以及计算网页的显示方式
JS引擎：解析和执行js来实现网页的动态效果