1. 前端开发面试题

https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Question

1.1. HTML5 增加功能

绘画 canvas 元素
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
CSS3 实现圆角，阴影，对文字加特效，增加了更多的 CSS 选择器和多背景 rgba
新的技术 webworker, websocket, Geolocation

1.2. 语义化的理解

html 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析
在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

1.3. 介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engine 或 Rendering Engine) 和 JS 引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS 引擎：解析和执行 javascript 来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

1.4. 常见的浏览器内核有哪些？

Trident 内核：IE, MaxThon, TT, The World, 360, 搜狗浏览器等。
Gecko 内核：Netscape6 及以上版本，FF, MozillaSuite/SeaMonkey 等
Presto 内核：Opera7 及以上。 [Opera 内核原为：Presto，现为：Blink;]
Webkit 内核：Safari, Chrome 等。 [ Chrome 的：Blink（WebKit 的分支）]

浏览器内核的解析和对比

1.5. css 多列等高如何实现？

利用 padding-bottom|margin-bottom 正负值相抵；设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定 padding-bottom 时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的 padding-bottom 补偿这部分高度差。

使用 flex

1.6. 移动端的布局用过媒体查询吗？

当媒体查询为真时，相关的样式表或样式规则会按照正常的级联规被应用。当媒体查询返回假，<link> 标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）。

<!-- link 元素中的 CSS 媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的 CSS 媒体查询 -->
<style>
  @media (min-width: 700px) and (orientation: landscape){
    .sidebar {
      display: none;
    }
  }
</style>

1.7. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

多数显示器默认频率是 60Hz，即 1 秒刷新 60 次，所以理论上最小间隔为 1/60＊1000ms ＝ 16.7ms

1.8. display:inline-block 什么时候会显示间隙？怎么处理？(携程)

移除空格、使用 margin 负值、使用 font-size:0、letter-spacing、word-spacing

1.9. javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？

使 JS 编码更加规范化的模式，消除 Javascript 语法的一些不合理、不严谨之处，减少一些怪异行为。
默认支持的糟糕特性都会被禁用，比如不能用 with，也不能在意外的情况下给全局变量赋值;
全局变量的显示声明，函数必须声明在顶层，不允许在非函数代码块内声明函数，arguments.callee 也不允许使用；
消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的 arguments 修改，严格模式下的 eval 函数的行为和非严格模式的也不相同;
提高编译器效率，增加运行速度；为未来新版本的 Javascript 标准化做铺垫。

1.10. Ajax 解决浏览器缓存问题？

在 ajax 发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")
在 ajax 发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")
在 URL 后面加上一个随机数："fresh=" + Math.random();
在 URL 后面加上时间戳："nowtime=" + new Date().getTime();
如果是使用 jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有 ajax 都会执行这条语句就是不需要保存缓存记录

1.11. requireJS 的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）

参考：http://annn.me/how-to-realize-cmd-loader/

1.12. jquery.extend 与 jquery.fn.extend 的区别？

jquery.extend 为 jquery 添加类方法，可以理解为添加静态方法
jquery.fn.extend: 源码中 jquery.fn = jquery.prototype，所以对 jquery.fn 的扩展，就是为 jquery 类添加成员函数

jquery.extend 扩展，需要通过 jquery 类来调用，而 jquery.fn.extend 扩展，所有 jquery 实例都可以直接调用。

$.fn.stringifyArray = function(array) {
  return JSON.stringify(array);
};

$.fn.parseArray = function(array) {
  return JSON.parse(array);
};

// 然后调用：
$('').stringifyArray(array);

1.13. Object.is() 与原来的比较操作符“===”、“==”的区别？

两等号判等，会在比较时进行类型转换；
三等号判等(判断严格)，比较时不进行隐式类型转换,（类型不同则会返回 false）；
Object.is 在三等号判等的基础上特别处理了 NaN 、-0 和 +0 ，保证 -0 和 +0 不再相同。但 Object.is(NaN, NaN) 会返回 true.

前端面试杂