原文：github.com/paddingme/F…

以下是来自 FEX 面试问题

我们喜欢问的问题

以下会列出一些我们常问的问题，请提前做好准备。

需要注意的是，校招和社招的是不一样的，校招会更加关注基础知识，而社招会更加关注之前做过的项目情况。

项目相关

面试其实说白了就是根据一个人之前的经历，来判断出后续这人会做得怎样，如果你之前从没做成过一件事情，凭什么让别人相信你之后能做成呢？因此无论哪里的面试都会问你之前做过的项目

项目可以是多人协助开发一个产品，也可以是自己个人做过的业余应用，只需介绍 1、2 个就够了，需要注意的是 1 + 1 != 2，做了两个平庸的项目不如做了一个好项目

一般来说会问如下几方面的问题：

做过最满意的项目是什么？
项目背景
- 为什么要做这件事情？
- 最终达到什么效果？
你处于什么样的角色，起到了什么方面的作用？
在项目中遇到什么技术问题？具体是如何解决的？
如果再做这个项目，你会在哪些方面进行改善？

技术相关 - 1 面

技术一面主要判断对基础知识的掌握

描述一个你遇到过的技术问题，你是如何解决的？
- 这个问题很常见，有没有遇到过很不常见的问题？比如在网上根本搜不到解决方法的？
是否有设计过通用的组件？
- 请设计一个 Dialog（弹出层） / Suggestion（自动完成） / Slider（图片轮播）等组件
- 你会提供什么接口？
- 调用过程是怎样的？可能会遇到什么细节问题？
更细节的问题推荐参考 github.com/darcyclarke…

技术相关 - 2 面

技术二面主要判断技术深度及广度

你最擅长的技术是什么？
- 你觉得你在这个技术上的水平到什么程度了？你觉得最高级别应该是怎样的？
浏览器及性能
- 一个页面从输入 URL 到页面加载完的过程中都发生了什么事情？越详细越好
  - （这个问既考察技术深度又考察技术广度，其实要答好是相当难的，注意越详细越好）
- 谈一下你所知道的页面性能优化方法？
  - 这些优化方法背后的原理是什么？
  - 除了这些常规的，你还了解什么最新的方法么？
- 如何分析页面性能？
其它
- 除了前端以外还了解什么其它技术么？
- 对计算机基础的了解情况，比如常见数据结构、编译原理等

兴趣相关

最近在学什么？接下来半年你打算学习什么？
做什么方面的事情最让你有成就感？需求设计？规划？具体开发？
后续想做什么？3 年后你希望自己是什么水平？

主动性相关

FEX 和很多其它团队不一样，我们没有 PM 天天跟在你后面催你做事情，所以你需要自主去发现和解决问题，主动性是我们最看重的软素质之一

在之前做过的项目中，有没有什么功能或改进点是由你提出来的？
是否有参与和改进其它开源项目

FEX 的面试过程

我们一般会有 3 轮面试，对于高级别的工程师可能会有 4-5 轮面试。

我们可能会采用哪些方法来面试

代码编写笔试
问答式

过程遵循 STAR 面试法。

我们喜欢什么样的面试者

基础扎实
- 从多年的经验看，那些发展好的同学都具备扎实的基础知识
- 比如只懂 jQuery 不懂 JavaScript 是不行的哦
- 如果了解计算机基础会更好，因为我们将面临很多非前端技术的问题
主动思考
- 被动完成任务的同学在这里进步会很慢
- 你需要有自己的想法，而不是仅仅完成任务
爱学习
- 前端领域知识淘汰速度很快，所以最好能经常学习和接触新东西
有深度
- 遇到问题时多研究背后深层次的原因，而不是想办法先绕过去
- 比如追踪某个 Bug 一直了解它本质的原因
有视野
- 创新往往来自于不同学科的交集，如果你了解的领域越多，就越有可能有新想法

FAQ

公开面试题不怕面试者精心准备么？
- 面试题大多是开放性问题，是无法准备的
- 如果真的精心准备，在各方面都能答好，那说明做事态度认真且努力，这正是我们需要的品质，因为我们相信一个人不是一成不变的，可以不断学习和进步，只要 ta 肯努力
我只会 CSS/HTML，或只会 JavaScript，可以么？
- 不行，而且很多内部项目还需要用 PHP
如果投递简历后 2 周都没面试消息，意味着没筛选通过么？
- 首先，你确定简历提交到的是「Web 前端研发部」，而且我们正在招聘
- 如果符合前面的条件，很遗憾，或许是我们招满了，或许是你暂时不适合我们部门，但这不意味着你不能改进，请继续努力
如果面试不过，可以提供后续发展建议么？
- 可以，请发邮件到 fex-hr@baidu.com 咨询，我们会尽量抽时间回复，但不能保证回复所有人
有疑问如何咨询？
- 可以在这个项目中提 Issues，或发邮件到 fex-hr@baidu.com 上

参考

Front-end Job Interview Questions

前端工作面试常见问题

备注: Rebecca Murphey 的 Baseline For Front-End Developers 是你在准备面试前应该阅读的绝佳资源。

记住： 很多问题都是开放的，可以引发有趣的讨论。这比直接的答案更能体现此人的能力。

###常见问题：

Q: 你在昨天/本周学到了什么？
Q: 编写代码的哪些方面能够使你兴奋或感兴趣？
Q: 在制作一个Web应用或Web站点的过程中，你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的？

A: 安全性：
高性能：
SEO：
- SEO在网页制作中的应用
Q: 谈谈你喜欢的开发环境。(例如操作系统，编辑器，浏览器，工具等等)

A:
- 我要攒钱买MBPR;
- 操作系统：windows,linux;
- 编辑器：Sublime Text,以前用过一段时间Vim,后来转到Sublime Text;
- 浏览器：Chrome,Firefox;
- 工具：Photoshop,Eclipse,Fiddler 等;
- 前端框架：Bootstarp，jQuery等。
Q: 你最熟悉哪一套版本控制系统？

A:
- Git
- SVN
Q: 你能描述一下当你制作一个网页的工作流程吗？
Q: 你能描述一下渐进增强和优雅降级之间的不同吗?
- 如果提到了特性检测，可以加分。
A:
- 渐进增强(progressive enhancement)：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
- 优雅降级(graceful degradation)：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。 “优雅降级”观点

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点

“渐进增强”观点则认为应关注于内容本身。

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在

Q: 请解释一下什么是“语义化的 HTML”。

A:
Q: 你如何对网站的文件和资源进行优化？
- 期待的解决方案包括：
  - 文件合并
  - 文件最小化/文件压缩
  - 使用 CDN 托管
  - 缓存的使用
  - 其他
Q: 为什么利用多个域名来提供网站资源会更有效？
- 浏览器同一时间可以从一个域名下载多少资源？
Q: 请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）
Q: 如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？
- 建议这个项目使用像 EditorConfig (editorconfig.org/) 之类的规范
- 为了保持一致性，接受项目原有的风格
- 直接使用 VIM 的 retab 命令

Q: 请写一个简单的幻灯效果页面

如果不使用JS来完成，可以加分。

<!doctype htm l>
<html>
  <head>
    <style>
    img {
      display: none;
      width: 100px;
      height: 100px;
    }
    input:checked + img {
      display: block;
    }
    input {
      position: absolute;
      left: -9999px;
    }
    label {
      cursor: pointer;
    }
    </style>
  </head>
  <body>
    <div id="cont">
      <input id="img1" name="img" type="radio" checked="checked">
      <img src="a.png">
      <input id="img2" name="img" type="radio">
      <img src="b.png">
    </div>
    <div id="nav">
      <label for="img1">第一张</label>
      <label for="img2">第二张</label>
    </div>
  </body>
</html>

可以这样写，但是不能支持所有浏览器。

<!DOCTYPE HTML>
<html>
  <head>
  <style>

  #cont {
  position: relative;
  height: 100px;
  }
img {
      position: absolute;
      width: 100px;
      height: 100px;
      z-index: 1;
    }
img:first-child,
img:target {
      z-index: 2;
    }
  </style>
  </head>
  <body>
  <div id="cont">
      <img id="img1" src="a.jpg">
      <img id="img2" src="b.jpg">
    </div>
    <div>
      <a href="#img1">one</a>
      <a href="#img2">two</a>
    </div>
  </body>
</html>

Q: 你都使用哪些工具来测试代码的性能？
- Profiler, JSPerf, Dromaeo
Q: 如果今年你打算熟练掌握一项新技术，那会是什么？
Q: Long-Polling, Websockets, SSE(Server-Sent Event) 之间有什么区别？
Q: 请谈一下你对网页标准和标准制定机构重要性的理解。

A: “一次编码。随处运行”。
网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。摘自:www.cnblogs.com/coco1s/p/40…

Q: 什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

A: blog.csdn.net/laney1206/a…
Q: 请尽可能完整得描述下从输入URL到整个网页加载完毕及显示在屏幕上的整个流程

前端工作面试HTML相关问题

Q: doctype（文档类型）的作用是什么？

A: 在HTML中 doctype 有两个主要目的。
- 对文档进行有效性验证:
  
  它告诉用户代理和校验器这个文档是按照什么DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载DTD 并检查合法性，只有当手动校验页面时才启用。
- 决定浏览器的呈现模式:
  
  对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响HTML 排版布局。浏览器有三种方式解析HTML文档。
  - 非怪异（标准）模式
  - 怪异模式
  - 部分怪异（近乎标准）模式
关于IE浏览器的文档模式，浏览器模式，严格模式，怪异模式，DOCTYPE标签，可详细阅读模式？标准！的内容。
Q: 浏览器标准模式和怪异模式之间的区别是什么？

A: 在“标准模式”(Standards Mode) 页面按照 HTML 与 CSS 的定义渲染，而在“怪异模式”(Quirks Mode)就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式；如果存在一个完整的DOCTYPE则浏览器将会采用标准模式，而如果它缺失则浏览器将会采用怪异模式。

强烈建议阅读加深理解：怪异模式（Quirks Mode）对 HTML 页面的影响，这里列下浏览器标准模式和怪异模式的区别：
1. 盒模型：
在怪异模式下，盒模型为IE盒模型而非标准模式下的W3C 盒模型：在 IE 盒模型中， box width = content width + padding left + padding right + border left + border right， box height = content height + padding top + padding bottom + border top + border bottom。而在 W3C 标准的盒模型中，box 的大小就是 content 的大小。
1. 图片元素的垂直对齐方式:
对于inline元素和table-cell元素，在 IE Standards Mode 下 vertical-align 属性默认取值为baseline。而当inline元素的内容只有图片时，如table的单元格table-cell。在 IE Quirks Mode 下，table单元格中的图片的 vertical-align 属性默认为bottom，因此，在图片底部会有几像素的空间。
1. <table>元素中的字体:
CSS 中，描述font的属性有font-family，font-size，font-style，font-weigh,上述属性都是可以继承的。而在 IE Quirks Mode 下，对于table 元素，字体的某些属性将不会从body或其他封闭元素继承到table中，特别是 font-size属性。
1. 内联元素的尺寸:
在 IE Standards Mode 下，non-replaced inline 元素无法自定义大小，而在 IE Quirks Mode 下，定义这些元素的width和height 属性，能够影响该元素显示的大小尺寸。
1. 元素的百分比高度:
CSS 中对于元素的百分比高度规定如下，百分比为元素包含块的高度，不可为负值。如果包含块的高度没有显式给出，该值等同于“auto”（即取决于内容的高度）。所以百分比的高度必须在父元素有声明高度时使用。

当一个元素使用百分比高度时，在 IE Standards Mode 下，高度取决于内容的变化，而在 Quirks Mode 下，百分比高度则被正确应用。
1. 元素溢出的处理：
在 IE Standard Mode 下，overflow取默认值 visible，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外。而在 Quirks Mode 下，该溢出被当做扩展box来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容。

另可参考阅读：www.cs.tut.fi/~jkorpela/q…
Q: 使用 XHTML 的局限有哪些？
- 如果页面使用 'application/xhtml+xml' 会有什么问题吗？
A: xhtml 语法要求严格，必须有head、body 每个dom 必须要闭合。空标签也必须闭合。例如<img />, <br/>, <input />等。另外要在属性值上使用双引号。一旦遇到错误，立刻停止解析，并显示错误信息。如果页面使用'application/xhtml+xml',一些老的浏览器会不兼容。
Q: 如果网页内容需要支持多语言，你会怎么做？
- 在设计和开发多语言网站时，有哪些问题你必须要考虑？
A: 编码使用UTF-8，空间域名需要支持多浏览地址,准备多套模板。在设计和开发多语言网站时，需要考虑
- 应用字符集的选择
- 语言书写习惯&导航结构
- 数据库驱动型网站
- css 盒子会因为内容尺寸不一样出现不对齐偏移
Q: data-属性的作用是什么？

A: data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法获取:

<div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>

div.dataset.commentNum; // 10

需要注意的是，data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。并不是所有的浏览器都支持.dataset属性，测试的浏览器中只有Chrome 和Opera 支持。

即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
Q:如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？

A: 开放网络平台:

The Open Web Platform is the collection of open (royalty-free) technologies which enables the Web. Using the Open Web Platform, everyone has the right to implement a software component of the Web without requiring any approvals or waiving license fees.

开放网络平台（Open Web Platform）是一些开放的（免版权）技术的集合，这些技术激活了互联网。使用开放网络平台时，每个人都有权实现 Web 上的一个组件，而不用向任何人索取许可和证书。

将 HTML5 看做开放网络平台，那它的构建模块有哪些？我想，所谓构建模块，指的应该是开放网络平台这个技术集合中的技术。
- HTML
- DOM
- CSS
- SVG
- MathML
- Web APIs
  - Canvas WebGL
  - Audio
  - Web Storage
  - File, File System
  - History, contentEditable, Drag & Drop, HTML Editing Commands
  - Web Sockets
  - Web Workers
  - Server-Send Events
  - XMLHttpRequest
  - Geolocation, Device Orientation
  - DOM Events, Touch Events, Progress Events
  - Custom application development
  - Clipboard and events
  - Web Notifications, Web Messaging
  - Offine Web Applications
  - Media Capture API
  - Timing control for script-based animations, Page Visibility, Navigation + Timing, Resource Timing
  - Selectors
  - DOM Traversal, DOM XPath, Element Traversal
  - EcmaScript / JavaScript
  - HTTP
  - URI
  - Media Accessibility Checklist
该答案引自: witcher42.github.io/2014/06/03/…
Q: 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

A: sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。

sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage 的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage 是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage 即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage 对象也是不同的

cookies会发送到服务器端。其余两个不会。

Microsoft 指出 Internet Explorer 8 增加cookie 限制为每个域名50个，但IE7 似乎也允许每个域名50个cookie。Firefox 每个域名cookie 限制为50个。Opera每个域名cookie 限制为30个。Firefox 和Safari 允许cookie 多达4097个字节，包括名（name）、值（value）和等号。Opera 许cookie 多达4096个字节，包括：名（name）、值（value）和等号。Internet Explorer 允许cookie 多达4095个字节，包括：名（name）、值（value）和等号。
- Cookie
  - 每个域名存储量比较小（各浏览器不同，大致4K）
  - 所有域名的存储量有限制（各浏览器不同，大致4K）
  - 有个数限制（各浏览器不同）
  - 会随请求发送到服务器
- LocalStorage
  - 永久存储
  - 单个域名存储量比较大（推荐5MB，各浏览器不同）
  - 总体数量无限制
- SessionStorage
  - 只在 Session 内有效
  - 存储量更大（推荐没有限制，但是实际上各浏览器也不同）

请描述一下 GET 和 POST 的区别?

A: 区别如下：

get 向指定的资源请求数据,请求的数据会附在URL 之后,就是把数据放置在请求行（request line）中），以?分割URL和传输数据，多个参数用&连接；
post 向指定的资源提交要被处理的数据。get 方法，查询请求是在url中显示的，有长度限制，get 方法是安全幂等的。而post 方法请求是封装在http 消息包体中

&	get	post
后退/刷新	无害	请求重新提交
书签	可做书签	不可做
缓存	可被缓存	不能被缓存
历史	保留在浏览器记录里	不保留
对数据长度限制	限制（2048字符）	不限制
安全性	url中暴露数据	相对安全
可见性	url中可见	不可见

总结：

对于get 来说，是向服务器端请求数据，其请求在url 中可见，其长度有限制（2048字符）个体方法是安全幂等，这里的安全是指用于获取信息而非修改信息，幂等是指每次请求得到的结果都一样。
对于post 来说，是向服务器端提交数据，每次刷新或者后退都会重新提交，post 请求的数据封装在http 请求的首部里。

tips: 以上部分答案参考自：

前端面试CSS 相关问题

Q：描述下 “reset” CSS 文件的作用和使用它的好处。

A：
- 作用以及好处：因为各个浏览器默认对CSS的渲染有差异，"reset" CSS 通过重新定义标签样式，对浏览器进行默认样式“清零”重置，样式保持一致。
- 不足:
  - css文件大小增加；
  - 许多样式本身就需要重置，多此一举；
  - 增加浏览器对CSS 的渲染。
可以阅读以下文章增强了解：
Q: 解释下浮动和它的工作原理。

A: 浮动出现的最开始出现的意义是用来让文字环绕图片而已。float可以自动包裹元素。float会导致高度塌陷。float为什么会导致高度塌陷：元素含有浮动属性 –> 破坏inline box –> 破坏line box高度 –> 没有高度 –> 塌陷。什么时候会塌陷：当标签里面的元素只要样子没有实际高度时会塌陷。浮动会脱离文档流。产生自己的块级格式化上下文。

可以阅读以下文章增加理解：
- CSS float浮动的深入研究、详解及拓展(一)
- CSS float浮动的深入研究、详解及拓展(二)
- 那些年我们一起清除过的浮动
- 《CSS权威指南》
列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。
- 直接把<div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿，此方法兼容性强，使用方便，但是浪费了一个标签，而且只能使用一次，而且有时候如果不注意中间多了个空格会产生一段空白高度。
  - 优点：通俗易懂，容易掌握；
  - 缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦。
- 如下:
```
.clearfix{overflow:hidden; zoom:1;}
```
  此方法优点在于代码简洁，涵盖所有浏览器，可是对于overflow:hidden;要是里面的元素要是想来个margin负值定位或是负的绝对定位，岂不是直接被裁掉了，所以此方法是有不小的局限性的。
  - 优点：不存在结构和语义化问题，代码量极少；
  - 缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
- 如下：
```
.fix{zoom:1;}
.fix:after{
    display:block;
    content:'.';
    clear:both;
    line-height:0;
    visibility:hidden;}
```
  line-height:0写成height:0也是可以的。不会影响任何其他样式，通用性强，覆盖面广，我很推荐哦。
- 父元素也浮动：
  - 优点：不存在结构和语义化问题，代码量极少
  - 缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用
总结：
- 其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；
- 其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动，这里的原理涉及到BFC，不再赘述。
同样请参考上一题给出的参考文章进行阅读加以理解。
Q: 解释下 CSS sprites，以及你要如何在页面或网站中使用它。

A: CSS Sprites就是把网页中一些小图片整合到一张图片文件中，再利用CSS的background-image，background- repeat，background-position的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。可以减少http请求。
Q: 你最喜欢的图片替换方法是什么，你如何选择使用。

A:
- 一些图标是使用before和after伪元素;
- 还有一些使用iconfont;
- 使用sprite图;
- 用背景图片代替图片。
举个栗子：
```
  <h1 class="nir">[content]</h1>
```
```
.nir {
   height: 100px; /* height of replacement image */
   padding: 0;
   margin: 0;
   overflow: hidden;
}

.nir:before {
     content: url(image.gif);
     display: block;
  }
```
详细可阅读：CSS image replacement with pseudo-elements
Q：讨论CSS hacks，条件引用或者其他。

A: CSS主要由三种方法：
- 属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
- 选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
- IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
```
<!DOCTYPE html>
<html>
<head>
    <title>Css Hack</title>
    <style>
    #test
    {
        width:300px;
        height:300px;

        background-color:blue;      /*firefox*/
        background-color:red\9;      /*all ie*/
        background-color:yellow\0;    /*ie8*/
        +background-color:pink;        /*ie7*/
        _background-color:orange;       /*ie6*/
    }
    :root #test { background-color:purple\9; }  /*ie9*/
    @media all and (min-width:0px){ #test {background-color:black\0;} }  /*opera*/
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  /*chrome and safari*/
    </style>
</head>
<body>
    <div id="test">test</div>
</body>
</html>
```
想要更多的了解CSS hack 方面的知识可以参考：
- 史上最全的CSS hack方式一览
- 史上最全的css hack
Q: 如何为有功能限制的浏览器提供网页？
- Q: 你会使用哪些技术和处理方法？
A: 功能限制的浏览器，比如 IE 低版本、手机浏览器、奇葩国内浏览器，会在很多功能上不符合 Web 标准，而应对的方式有这么几种：
- 只提供符合 Web 标准的页面；
- 提供另一个符合那些浏览器标准的页面(例如说移动端一套css,电脑端一套css);
- 兼容：这里有两种思路，一个是渐进增强，一个优雅降级。渐进增强的思路就是提供一个可用的原型，后来再为高级浏览器提供优化。优雅降级的思路是根据高级浏览器提供一个版本，然后有功能限制的浏览器只需要一个刚好能用的版本。当然，工作中的标准都是尽量满足设计，如果不能满足的话就尽量贴近，不得已（性能之类的问题）才会砍掉某个浏览器版本上的需求。
相关技术:
- Media Query
- CSS hack
- 条件判断 除IE外都可识别 
Q：有哪些的隐藏内容的方法（如果同时还要保证屏幕阅读器可用呢？）

A: display:none看不见也摸不着，屏幕阅读器更会忽略其内容；而visibility:hidden虽然看得见但是摸不着，占据了一定的物理空间，屏幕阅读器也会忽略。如果想要在读屏设备中让这些内容可见。解决方案的基本思路都是将这些内容放到屏幕、视线意外的地方，或者就是将大小设置成 0。比如 text-indent: -9999em;、overflow: hidden;、height: 0。
```
  .texthidden {
    display:block;/*统一转化为块级元素*/
    overflow: hidden;
    width: 0;
    height: 0;
   }
```
更详细的方法可以参考这篇文章HIDING CONTENT FOR ACCESSIBILITY

不过既然这是了读屏而优化的，那么可以用 media query 来完成，media speech 用于语音输出的读屏设备。
```
@media speech {
    /* media-specify rules */
}
```
以上转自Witcher42给出的答案。
Q：你用过栅格系统吗？如果使用过，你最喜欢哪种？

A：使用过bootstarp。易于上手，学习成本低，还能做出比较大方美观的页面。

可阅读栅格系统延续美学。

Q: 你用过媒体查询，或针对移动端的布局/CSS 吗？

  @media screen and (min-width:600px) {
    nav {
      float: left;
      width: 25%;
    }
    section {
      margin-left: 25%;
    }
  }
  @media screen and (max-width:599px) {
    nav li {
      display: inline;
    }
  }

可参考：

Q:你熟悉 SVG 样式的书写吗？

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
 <text x="250" y="150" font-family="Verdana" font-size="10px" fill="blue">Hello, out there</text>
 <defs><style type="text/css"> <![CDATA[.sample{stroke:blue;fill:#0080FF;opacity:1;}]]></style></defs>
 <use xlink:href="#sample1" class="sample"/>
 </svg>

教程参考: SVG教程

Q: 如何优化网页的打印样式？

A:

<link rel="stylesheet" type="text/css" media="screen" href="xxx.css" />

其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。

<link rel="stylesheet" type="text/css" media="print" href="yyy.css" />

但打印样式表也应有些注意事项：

1 打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。 2 最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。 3 隐藏掉不必要的内容。（@print div{display:none;}） 4 打印样式表中最好少用浮动属性，因为它们会消失。如果想要知道打印样式表的效果如何，直接在浏览器上选择打印预览就可以了。

Q: 书写高效 CSS 时会有哪些问题需要考虑？

A:
- 样式是：从右向左的解析一个选择器
- ID最快，Universal最慢有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
- 不要tag-qualify （永远不要这样做 ul#main-navigation { } ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。）
- 后代选择器最糟糕（换句话说，下面这个选择器是很低效的： html body ul li a { }）
- 想清楚你为什么这样写
- CSS3的效率问题（CSS3选择器（比如 :nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。）
- 我们知道#ID速度是最快的，那么我们都用ID，是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性`
可参考： blog.jobbole.com/55067/

等我重写这道题答案。=。=
使用 CSS 预处理器的优缺点有哪些？(SASS，Compass，Stylus，LESS)
- 描述下你曾经使用过的 CSS 预处理的优缺点。
如果设计中使用了非标准的字体，你该如何去实现？
- Webfonts (字体服务例如：Google Webfonts，Typekit 等等。)
解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？
解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。
请解释一下 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处？
请罗列出你所知道的 display 属性的全部值
请解释一下 inline 和 inline-block 的区别？
请解释一下 relative、fixed、absolute 和 static 元素的区别
你目前在使用哪一套CSS框架，或者在产品线上使用过哪一套？(Bootstrap, PureCSS, Foundation 等等)
- 如果有，请问是哪一套？如果可以，你如何改善CSS框架？
请问你有使用过 CSS Flexbox 或者 Grid specs 吗？
- 如果有，请问在性能和效率的方面你是怎么看的？

前端工作面试 JS 相关问题

Q：解释下事件代理。

A: 当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。
```
  var delegate = function(client, clientMethod) {
      return function() {
          return clientMethod.apply(client, arguments);
      }
  }

  var agentMethod = delegate (client, clientMethod);
  agentMethod();
```
相关阅读：
- JavaScript事件代理和委托（Delegation）
- 事件代理
- 事件代理的应用
Q: 解释下 JavaScript 中 this 是如何工作的。

A: this 在 JavaScript 中主要由以下五种使用场景。
- 作为函数调用，this 绑定全局对象，浏览器环境全局对象为 window 。
- 内部函数内部函数的 this 也绑定全局对象，应该绑定到其外层函数对应的对象上，这是 JavaScript的缺陷，用that替换。
- 作为构造函数使用，this 绑定到新创建的对象。
- 作为对象方法使用，this 绑定到该对象。
- 使用apply或call调用 this 将会被显式设置为函数调用的第一个参数。
参考阅读：
- 深入浅出 JavaScript 中的 this
- this 的工作原理
Q: 解释下原型继承的原理。

A:原型继承的基础是原型链查找。原型链查找基本概念：
1. 每一个函数 F 都有一个原型对象（prototype）F.prototype
2. 每一个函数都可以通过 new 关键字化身成为一个类构造函数，new F 会产生一个对象 O
3. 在调用对象的某个属性或者方法，比如 O.xxx 的时候，会首先查找对象自身是否有这个方法或者属性，如果没找到就会去对象的构造函数的原型对象中查找（注意有两个定语），也就是查找 O 的构造函数 F 的原型对象 F.prototype.xxx
4. F.prototype 也是一个对象，查找 F.prototype.xxx 的时候会重复第 3 步的过程
参考：
- 深入理解javascript原型继承
- JavaScript原型继承工作原理
- Prototypal Inheritance in JavaScript
Q: 你是如何测试JavaScript代码的？
A: AMD vs. CommonJS？

Q: 可参考: stackoverflow.com/questions/1…
Q: 什么是哈希表？

A: 哈希表是根据关键字（Key value）而直接访问在内存存储位置的数据结构。也就是说，它通过把键值通过一个函数的计算，映射到表中一个位置来访问记录，这加快了查找速度。这个映射函数称做散列函数，存放记录的数组称做散列表。
Q: 解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式)：function foo(){ }();.
- 要做哪些改动使它变成 IIFE?
A: 可参考前端编码风格规范之 JavaScript 规范

总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression)，用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。

IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改（i.e. 第三方库，window 引用，被覆盖的未定义的关键字等等）。

不推荐
```
var x = 10,
    y = 100;

// Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this
// will be stored in the window object. This is very unclean and needs to be avoided.
console.log(window.x + ' ' + window.y);
```
推荐
```
// We declare a IIFE and pass parameters into the function that we will use from the global space
(function(log, w, undefined){
  'use strict';

  var x = 10,
      y = 100;

  // Will output 'true true'
  log((w.x === undefined) + ' ' + (w.y === undefined));

}(window.console.log, window));
```
IIFE（立即执行的函数表达式）:无论何时，想要创建一个新的封闭的定义域，那就用 IIFE。它不仅避免了干扰，也使得内存在执行完后立即释放。

所有脚本文件建议都从 IIFE 开始。

立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的，但写在内使得整个表达式看起来更像一个整体，因此推荐这么做。

不推荐
```
(function(){})();
```
推荐
```
(function(){}());
```
so，用下列写法来格式化你的 IIFE 代码：
```
(function(){
  'use strict';

  // Code goes here

}());
```
如果你想引用全局变量或者是外层 IIFE 的变量，可以通过下列方式传参：
```
(function($, w, d){
  'use strict';

  $(function() {
    w.alert(d.querySelectorAll('div').length);
  });
}(jQuery, window, document));
```
Q: 描述以下变量的区别：null，undefined 或 undeclared？
- 该如何检测它们？
A: undefined是Js语言类型，而undeclared是一种Js语法错误。在JavaScript中，有两个表示‘空’的值undefined和null，undefined是一个值为undefined 的类型。JavaScript语言也定义了一个全局变量，它的值是 undefined，这个变量也被称为undefined。但是这个变量不是一个常量，也不是一个关键字。这意味着它的值可以轻易被覆盖。为了避免可能对undefined值的改变，一个常用的技巧是使用一个传递到匿名包装器的额外参数。在调用时，这个参数不会获取任何值。如下例子：
```
  var undefined = 123;
  (function(something, foo, undefined) {
  // 局部作用域里的 undefined 变量重新获得了 `undefined` 值
  })('Hello World', 42);
```
待修改。
- stackoverflow.com/questions/6…
- www.zhihu.com/question/19…
什么是闭包，如何使用它，为什么要使用它？
请举出一个匿名函数的典型用例？
解释 “JavaScript 模块模式” 以及你在何时使用它。
- 如果有提到无污染的命名空间，可以考虑加分。
- 如果你的模块没有自己的命名空间会怎么样？
你是如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？
Q: 请指出 JavaScript 宿主对象和原生对象的区别？

A: 宿主对象是指DOM和BOM。原生对象是Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、Math等对象。
Q:指出下列代码的区别：
```
function Person(){}
var person = Person();
var person = new Person();
```
A: 第一行是定义了一个函数 Person()；第二行代码是执行函数 Person() 并将其返回值复制给变量 person，如果 Person() 是一个构造器函数的话，新的对象将不会被创建，并且 this 将被绑定到全局对象上；第三行代码是用构造函数 Person() 构造一个实例对象 person。
Q:.call 和 .apply 的区别是什么？

A: 关于javascript中apply()和call()方法的区别
请解释 Function.prototype.bind 的作用？
你何时优化自己的代码？
你能解释一下 JavaScript 中的继承是如何工作的吗？
在什么时候你会使用 document.write()？
- 大多数生成的广告代码依旧使用 document.write()，虽然这种用法会让人很不爽。
请指出浏览器特性检测，特性推断和浏览器 UA 字符串嗅探的区别？
请尽可能详尽的解释 AJAX 的工作原理。

Q: Ajax 全称为 Asynchronous JavaScript and XML（异步 JavaScript 和 XML），是一种创建交互式网页应用的网页开发技术。 Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用 JavaScript来操作 DOM 而更新页面。这其中最关键的一步就是从服务器获得请求数据。

以往我们浏览网页的原理是由 Client 向 Server 提交页面申请，再由 Server 将申请通过 HTTP 传回给 Client 生成浏览页面：

使用 Ajax 后的工作原理如下图，可见通过 Ajax 在用户交互方面有了很大改进，用户可以不用为提交了 Form 而长时间等待服务器应答，而且通过 Ajax 也可以开发出华丽的 Web 交互页面。

转自：AJAX 的工作原理
请解释 JSONP 的工作原理，以及它为什么不是真正的 AJAX。
你使用过 JavaScript 模板系统吗？
- 如有使用过，请谈谈你都使用过哪些库，比如 Mustache.js，Handlebars 等等。
请解释变量声明提升。
请描述下事件冒泡机制。
"attribute" 和 "property" 的区别是什么？
为什么扩展 JavaScript 内置对象不是好的做法？
为什么扩展 JavaScript 内置对象是好的做法？
请指出 document load 和 document ready 两个事件的区别。
Q: == 和 === 有什么不同？

A: ==（相等运算法），===（严格相等运算符） JavaScript 对象的比较是引用的比较，非值的比较，对象和其本身相等，和其他任何对象不相等。 === 首先计算其操作数的值，然后比较，比较过程无任何类型转换。 == 如果两个操作数不是同一类型的，则相等运算符进行一些类型转换进行比较。 == 这里截取 JavaScript 相等表格上的的两张图片让大家更为直观的感受下。

引用下温特大大的总结就是：只要记住 null 只和undefined 相等，有 number 都转 number，有 boolean 也转 number，有 string 都转 string，对象互相不等，NaN 互相不等就可以了。
你如何从浏览器的 URL 中获取查询字符串参数。
请解释一下 JavaScript 的同源策略。
请描述一下 JavaScript 的继承模式。
如何实现下列代码：

[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]

描述一种 JavaScript 中实现 memoization(避免重复运算)的策略。
什么是三元表达式？“三元” 表示什么意思？
函数的参数元是什么？
什么是 "use strict"; ? 使用它的好处和坏处分别是什么？

jQuery 相关问题

解释"chaining"。
解释"deferreds"。
你知道哪些针对 jQuery 的优化方法。
请解释 .end() 的用途。
你如何给一个事件处理函数命名空间，为什么要这样做？
请说出你可以传递给 jQuery 方法的四种不同值。
- 选择器（字符串），HTML（字符串），回调函数，HTML元素，对象，数组，元素数组，jQuery对象等。
什么是效果队列？
请指出 .get()，[]，eq() 的区别。
请指出 .bind()，.live() 和 .delegate() 的区别。
请指出 $ 和 $.fn 的区别，或者说出 $.fn 的用途。
请优化下列选择器：

$(".foo div#bar:eq(0)")

代码相关的问题：

modulo(12, 5) // 2

问题：实现满足上述结果的modulo函数

"i'm a lasagna hog".split("").reverse().join("");

问题：上面的语句的返回值是什么？ 答案："goh angasal a m'i"

( window.foo || ( window.foo = "bar" ) );

问题：window.foo 的值是什么？ 答案："bar" 只有 window.foo 为假时的才是上面答案，否则就是它本身的值。

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

问题：上面两个 alert 的结果是什么 答案: "Hello World" 和 ReferenceError: bar is not defined

var foo = [];
foo.push(1);
foo.push(2);

问题：foo.length 的值是什么？ 答案：2)

有趣的问题

你编写过的最酷的代码是什么？其中你最自豪的是什么？
在你使用过的开发工具中，最喜欢哪个？
你有什么业余项目吗？是哪种类型的？
你最爱的 IE 特性是什么？

1.get和post的区别##

get向指定的资源请求数据,请求的数据会附在URL之后,就是把数据放置在请求行（request line）中），以?分割URL和传输数据，多个参数用&连接；
post向指定的资源提交要被处理的数据 get方法，查询请求是在url中显示的，有长度限制，get方法是安全幂等的。而post方法请求是封装在http消息包体中

&	get	post
后退/刷新	无害	请求重新提交
书签	可做书签	不可做
缓存	可被缓存	不能被缓存
历史	保留在浏览器记录里	不保留
对数据长度限制	限制（2048字符）	不限制
安全性	url中暴露数据	相对安全
可见性	url中可见	不可见

总结： ①. 对于get来说，是向服务器端请求数据，其请求在url中可见，其长度有限制（2048字符）个体方法是安全幂等，这里的安全是指用于获取信息而非修改信息，幂等是指每次请求得到的结果都一样。 ②. 对于post来说，是向服务器端提交数据，每次刷新或者后退都会重新提交，post请求的数据封装在http请求的首部里。

2. HTTP 状态码##

1XX代表请求已经被接收；
2xx代表请求已成功被服务器接收、理解、并接受。常用的200表示请求已成功，请求所希望的响应头或数据体将随此响应返回；
3xx代表重定向。
4xx代表客户端错误。404表示网页不存在。
5xx代表服务器错误。500表示服务器内部错误，503表示服务器暂时不可用

3.前端MVC框架##

MVC（模型-视图-控制器） Model(模型)主要与业务数据有关。 View(视图)是关于构件和维护一个DOM元素。应用程序数据的可视化表示。 Controller(控制器）用户更新视图，controller更新model.(网上没有这类型的详细文章，这里可以好好写一写，画画图，各个框架MVC之间的异同。)

如知乎，把数据请求和数据操作放在model中，对视图的操作和改变放在view中，事件绑定放在controller中。

4.闭包##

请见隔壁。

5.DOCTYPE的作用？严格模式与混杂模式如何区分？它们有什么意义？

DOCTYPE声明位于HTML文档顶端，告诉浏览器应该用什么文档类型规范来解析这个文档；严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行；而混杂模式中，页面以较宽松的向后兼容的模式显示。模拟老式浏览器的行为以防止站点无法工作。；DOCTYPE不存在或者格式不正确，则浏览器以混杂模式呈现文档。

6.行内元素有哪些？块级元素有哪些？空（void )元素有哪些？##

7.link和@import的区别

8.浏览器的内核分别是什么

9.常见兼容性问题

浏览器的padding和marigin不同。

10.语义化的理解

11.HTML5的离线存储

localStorage 长期存储数据，浏览器关闭后数据不丢失；而sessionStorage数据在浏览器关闭后自动删除。

12.cookie和session的区别##

① cookie数据存在客户的浏览器上，session数据存放在服务器端 ② cookie不安全 ③ session会在一定时间内保存在服务器端，访问增多，占用服务器性能。 ④ 单个cookie保存的数据不超过4K

13.(写)描述一段语义的html代码吧。##

14.frame有那些缺点？##

15.请描述一下 cookies，sessionStorage 和 localStorage 的区别？##

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会 sessionStorage和localStorage的存储空间更大； sessionStorage和localStorage有更多丰富易用的接口； sessionStorage和localStorage各自独立的存储空间；

16.介绍一下CSS的盒子模型？

① 有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 padding;

② 盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).

##17.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？## !important>id>class>tag

18.如何居中div？如何居中一个浮动元素？

摘自：

markyun 2014年最新前端开发面试题和前端开发面试题
darcyclarkeFront-end-Developer-Interview-Questions

请解释事件代理 (event delegation)。
请解释 JavaScript 中 this 是如何工作的。
请解释原型继承 (prototypal inheritance) 的原理。
你怎么看 AMD vs. CommonJS？
请解释为什么接下来这段代码不是 IIFE (立即调用的函数表达式)：function foo(){ }();.
- 要做哪些改动使它变成 IIFE?
描述以下变量的区别：null，undefined 或 undeclared？
- 该如何检测它们？
什么是闭包 (closure)，如何使用它，为什么要使用它？
请举出一个匿名函数的典型用例？
你是如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？
请指出 JavaScript 宿主对象 (host objects) 和原生对象 (native objects) 的区别？
请指出以下代码的区别：function Person(){}、var person = Person()、var person = new Person()？
.call 和 .apply 的区别是什么？
请解释 Function.prototype.bind？
在什么时候你会使用 document.write()？
请指出浏览器特性检测，特性推断和浏览器 UA 字符串嗅探的区别？
请尽可能详尽的解释 Ajax 的工作原理。
使用 Ajax 都有哪些优劣？
请解释 JSONP 的工作原理，以及它为什么不是真正的 Ajax。
你使用过 JavaScript 模板系统吗？
- 如有使用过，请谈谈你都使用过哪些库？
请解释变量声明提升 (hoisting)。
请描述事件冒泡机制 (event bubbling)。
"attribute" 和 "property" 的区别是什么？
为什么扩展 JavaScript 内置对象不是好的做法？
请指出 document load 和 document DOMContentLoaded 两个事件的区别。
== 和 === 有什么不同？
请解释 JavaScript 的同源策略 (same-origin policy)。
如何实现下列代码：

[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]

什么是三元表达式 (Ternary expression)？“三元 (Ternary)” 表示什么意思？
什么是 "use strict"; ? 使用它的好处和坏处分别是什么？
请实现一个遍历至 100 的 for loop 循环，在能被 3 整除时输出 "fizz"，在能被 5 整除时输出 "buzz"，在能同时被 3 和 5 整除时输出 "fizzbuzz"。
为何通常会认为保留网站现有的全局作用域 (global scope) 不去改变它，是较好的选择？
为何你会使用 load 之类的事件 (event)？此事件有缺点吗？你是否知道其他替代品，以及为何使用它们？
请解释什么是单页应用 (single page app), 以及如何使其对搜索引擎友好 (SEO-friendly)。
你使用过 Promises 及其 polyfills 吗? 请写出 Promise 的基本用法（ES6）。
使用 Promises 而非回调 (callbacks) 优缺点是什么？
使用一种可以编译成 JavaScript 的语言来写 JavaScript 代码有哪些优缺点？
你使用哪些工具和技术来调试 JavaScript 代码？
你会使用怎样的语言结构来遍历对象属性 (object properties) 和数组内容？
请解释可变 (mutable) 和不变 (immutable) 对象的区别。
- 请举出 JavaScript 中一个不变性对象 (immutable object) 的例子？
- 不变性 (immutability) 有哪些优缺点？
- 如何用你自己的代码来实现不变性 (immutability)？
请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别。
什么是事件循环 (event loop)？
- 请问调用栈 (call stack) 和任务队列 (task queue) 的区别是什么？
解释 function foo() {} 与 var foo = function() {} 用法的区别

问题：foo的值是什么？

var foo = 10 + '20';

问题：如何实现以下函数？

add(2, 5); // 7
add(2)(5); // 7

问题：下面的语句的返回值是什么？

"i'm a lasagna hog".split("").reverse().join("");

问题：window.foo的值是什么？

( window.foo || ( window.foo = "bar" ) );

问题：下面两个 alert 的结果是什么？

var foo = "Hello";
(function() {
  var bar = " World";
  alert(foo + bar);
})();
alert(foo + bar);

问题：foo.length的值是什么？

var foo = [];
foo.push(1);
foo.push(2);

问题：foo.x的值是什么？

var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};

问题：下面代码的输出是什么？

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

Form Front-end-Developer-Interview-Questions

为什么传统上利用多个域名来提供网站资源会更有效？
请尽可能完整得描述从输入 URL 到整个网页加载完毕及显示在屏幕上的整个流程。
Long-Polling、Websockets 和 Server-Sent Event 之间有什么区别？
请描述以下 request 和 response headers：
- Diff. between Expires, Date, Age and If-Modified-...
- Do Not Track
- Cache-Control
- Transfer-Encoding
- ETag
- X-Frame-Options
什么是 HTTP method？请罗列出你所知道的所有 HTTP method，并给出解释。
请解释 HTTP status 301 与 302 的区别？

Form Front-end-Developer-Interview-Questions

CSS 中类 (classes) 和 ID 的区别。
请问 "resetting" 和 "normalizing" CSS 之间的区别？你会如何选择，为什么？
请解释浮动 (Floats) 及其工作原理。
描述z-index和叠加上下文是如何形成的。
请描述 BFC(Block Formatting Context) 及其如何工作。
列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。
请解释 CSS sprites，以及你要如何在页面或网站中实现它。
你最喜欢的图片替换方法是什么，你如何选择使用。
你会如何解决特定浏览器的样式问题？
如何为有功能限制的浏览器提供网页？
- 你会使用哪些技术和处理方法？
有哪些的隐藏内容的方法 (如果同时还要保证屏幕阅读器可用呢)？
你用过栅格系统 (grid system) 吗？如果使用过，你最喜欢哪种？
你用过媒体查询，或针对移动端的布局/CSS 吗？
你熟悉 SVG 样式的书写吗？
如何优化网页的打印样式？
在书写高效 CSS 时会有哪些问题需要考虑？
使用 CSS 预处理器的优缺点有哪些？
- 请描述你曾经使用过的 CSS 预处理器的优缺点。
如果设计中使用了非标准的字体，你该如何去实现？
请解释浏览器是如何判断元素是否匹配某个 CSS 选择器？
请描述伪元素 (pseudo-elements) 及其用途。
请解释你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。
请解释 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处？
请罗列出你所知道的 display 属性的全部值
请解释 inline 和 inline-block 的区别？
请解释 relative、fixed、absolute 和 static 元素的区别
CSS 中字母 'C' 的意思是叠层 (Cascading)。请问在确定样式的过程中优先级是如何决定的 (请举例)？如何有效使用此系统？
你在开发或生产环境中使用过哪些 CSS 框架？你觉得应该如何改善他们？
请问你有尝试过 CSS Flexbox 或者 Grid 标准规格吗？
为什么响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同？
你有兼容 retina 屏幕的经历吗？如果有，在什么地方使用了何种技术？
请问为何要使用 translate() 而非 absolute positioning，或反之的理由？为什么？

Form Front-end-Developer-Interview-Questions

前端面试总结

以下是来自 FEX 面试问题

我们喜欢问的问题

项目相关

技术相关 - 1 面

技术相关 - 2 面

兴趣相关

主动性相关

FEX 的面试过程

我们可能会采用哪些方法来面试

我们喜欢什么样的面试者

FAQ

参考

前端工作面试常见问题

前端工作面试HTML相关问题

前端面试CSS 相关问题

前端工作面试 JS 相关问题

jQuery 相关问题

代码相关的问题：

有趣的问题

1.get和post的区别##

2. HTTP 状态码##

3.前端MVC框架##

4.闭包##

5.DOCTYPE的作用？严格模式与混杂模式如何区分？它们有什么意义？

6.行内元素有哪些？块级元素有哪些？空（void )元素有哪些？##

7.link和@import的区别

8.浏览器的内核分别是什么

9.常见兼容性问题

10.语义化的理解

11.HTML5的离线存储

12.cookie和session的区别##

13.(写)描述一段语义的html代码吧。##

14.frame有那些缺点？##

15.请描述一下 cookies，sessionStorage 和 localStorage 的区别？##

16.介绍一下CSS的盒子模型？

18.如何居中div？如何居中一个浮动元素？

JS 相关问题

网络相关问题

CSS 相关问题