在网上搜罗了很多面试题，本文只是记录一些我不太会的，答案也不一定准确。文末会给出题目来源。

1.渐进增强和优雅降级之间的不同

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用

2.为什么利用多个域名来提供网站资源会更有效

1.CDN缓存更方便

2.突破浏览器并发限制（一般每个域名建立的链接不超过6个）

3.Cookieless，节省带宽，尤其是上行带宽一般比下行要慢

4.对于UGC的内容和主站隔离，防止不必要的安全问题(上传js窃取主站cookie之类的)。正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。

5.数据做了划分，甚至切到了不同的物理集群，通过子域名来分流比较省事。这个可能被用的不多。

PS:关于Cookie的问题，带宽是次要的，安全隔离才是主要的。关于多域名，也不是越多越好，虽然服务器端可以做泛解释，浏览器做dns解释也是耗时间的，而且太多域名，如果要走https的话，还有要多买证书和部署的问题。

3.你都使用哪些工具来测试代码的性能

Profiler,JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）,Dromaeo

PS：这个题目个人认为，如果确实没有做过测试，可以说  ：我知道有哪些测试工具，但是没有实际使用过。

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

简单地说就是，由于css文档的错误引入，使得浏览器在加载完DOM之后到渲染css上去中间间隔时间较长，这段时间内页面上没有样式。

解决方法就是，css样式的引入或者是css代码写在最上面。

5.doctype（文档类型）的作用是什么？你知道多少种文档类型？

此标签可告知浏览器文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。

HTML 4.01规定了三种文档类型：Strict、Transitional以及Frameset。

XHTML 1.0规定了三种XML文档类型：Strict、Transitional以及Frameset。

Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页

6.如果网页内容需要支持多语言，你会怎么做

应用字符集的选择，选择UTF-8编码

语言书写习惯&导航结构

数据库驱动型网站

7.data-属性的作用是什么

data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性包括两部分：

属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符

属性值可以是任意字符串

例子：data-animal-type="鸟类"

8.描述一下cookies，sessionStorage和localStorage的区别

sessionStorage和localStorage是HTML5 Web Storage API提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的cookies会发送到服务器端。其余两个不会。Microsoft指出InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。

Firefox每个域名cookie限制为50个。

Opera每个域名cookie限制为30个。

Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号。

Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号。

InternetExplorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。

9.描述下“reset”CSS文件的作用和使用它的好处

因为浏览器的品种很多，每个浏览器的默认样式也是不同的，所以定义一个css reset可以使各浏览器的默认样式统一

10.列举不同的清除浮动的技巧，并指出它们各自适用的使用场景

1.使用空标签清除浮动。这种方法是在所有浮动标签后面添加一个空标签定义css clear:both.弊端就是增加了无意义标签。

2.使用overflow。给包含浮动元素的父标签添加css属性overflow:auto;zoom:1;zoom:1用于兼容IE6。

3.使用after伪对象清除浮动。该方法只适用于非IE浏览器。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，content属性的值设为”.”，空亦是可以的

此三种方法各有利弊，使用时应择优选择，比较之下第二种方法更为可取

11.解释下CSS sprites，以及你要如何在页面或网站中使用它

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置

12.图片替换方法

1.img标签要写alt，在图片缺失的情况下保证搜索引擎的准确性（我常用这个）

2.把span背景设成文字内容，这样又可以保证seo，也有图片的效果在上面

13.CSS hacks

答案来自CSDN freshlover的博客专栏《史上最全CSS Hack方式一览》

14.如何为有功能限制的浏览器提供网页

1.渐进增强或优雅降级

2.媒体查询

3.css hacks

15.如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局

css3中引入了一个新的属性：box-sizing，它具有“content-box”和”border-box“两个值。

box-sizing:content-box

当我们设置box-sizing:content-box;时，浏览器对盒模型的解释遵从我们之前认识到的W3C标准，当它定义width和height时，它的宽度不包括border和padding。

box-sizing:border-box

当我们设置box-sizing:border-box;时，浏览器对盒模型的解释与IE6之前的版本相同，当它定义width和height时，border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和“height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。

16.display的所有属性

http://www.w3school.com.cn/cssref/pr_class_display.asp

17.事件代理

JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素

18.JavaScript宿主对象和原生对象的区别

原生对象

ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。

“本地对象”包含哪些内容：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。

由此可以看出，简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。

宿主对象

何为“宿主对象”？主要在这个“宿主”的概念上，ECMAScript中的“宿主”当然就是我们网页的运行环境，即“操作系统”和“浏览器”。

所有非本地对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象。所有的BOM和DOM都是宿主对象。因为其对于不同的“宿主”环境所展示的内容不同。其实说白了就是，ECMAScript官方未定义的对象都属于宿主对象，因为其未定义的对象大多数是自己通过ECMAScript程序创建的对象

19.请指出document.onload和document.ready两个事件的区别

页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成

以上都是在较为基础的js方面我没遇到的面试题，还有更多关于原型链，继承，闭包，模块化，命名空间，代码优化之类的问题，需要进一步学习才能继续整理。

来源网址：

https://www.cnblogs.com/lanyueff/p/6400785.html

https://blog.csdn.net/sinat_27346451/article/details/78315112