关于HTML相关问题：
浏览器标准模式(standards mode)、几乎标准模式(almost standards mode)和怪异模式(quicks mode)之间区别是什么？
标准模式是指浏览器按W3C标准解析执行代码。怪异模式是指使用浏览器自己的方式解析，几乎标准模式的浏览器特性都是符合标准的，不标准的地方主要体现在处理图片间隙的时候。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页HTML5 为什么只需要写 ？
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）； 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
HTML与XHTML有什么区别？
最主要的不同：1.xhtml元素必须被正确的嵌套。2.XHTML元素必须被关闭。3.标签名必须用小写字母。 4.XHTML文档必须拥有根元素。
页面使用‘application/xhtml+xml’会有什么问题？
content类型分为text/html和application/xhtml+xml 两种，前面一种表示HTML文档的类型，后一种是xhtml系列文档的类型。若使用‘application/xhtml+xml’要求比较严格，一些老的浏览器会不支持。
使用data-属性的好处？
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的（自定义）数据能够被页面的 JavaScript 中利用。可通过getAttribute()传递名称来获取，或者使用dataset属性集来获取。
请描述cookies、sessionStorage和localStorage的区别？
首先从兼容性出发：cookies兼容所有的浏览器，localStorage和sessionStorage为HTML5标签
存储：cookie始终在同源的http请求中携带，在浏览器和服务器中来回传送。而sessionStorage和localStorage仅在本地保存；
大小方面的限制：cookie数据最多不能超过4k,主要用于会话标识，而另两种，也有存储限制，但是一般不大于5M
数据有效期：cookie可以通过设置expires选择有效期，而sessionStorage对象特定于某个会话的数据，数据维持到浏览器关闭。而localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除。
作用域：sessionStorage不在不同的浏览器共享，即使是同一个页面，但是localStorage在所有同源串口均是共享的，cookie也是在所有同源窗口共享。解释
<script>、<script async>、<script defer>的区别？script标签会按照顺序加载执行；async属性表示应该立即下载脚本，但是不妨碍页面中的其他操作。比如下载其他资源或等待加载其他脚本。同时该属性只针对于外部脚本。而defer属性表示脚本可以延迟到文档完全被解析和执行之后再执行。且只针对于外部脚本。
为什么通常推荐CSS
<link>放置在<head></head之间，而将JS<script>放置在</body>之前？你知道有哪些例外？浏览器在处理HTML页面渲染和JavaScript脚本执行的时候是单一进程的,所以在当浏览器在渲染HTML遇到了
<script>标签会先去执行标签内的代码(如果是使用src属性加载的外链文件,则先下载再执行),在这个过程中,页面渲染和交互都会被阻塞。所以将<script>放在</body>之前,当页面渲染完成再去执行<script>。
同时针对于DOM未加载而必须加载的脚本会放置在head标签中，有些加了defer标签的脚本也会放置在head标签中。
关于CSS相关问题：
* 1. 请描述BFC及其如何工作？*
BFC是块级格式化上下文：block formatting context. （W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。
* 2. 列举不同的清除浮动的技巧，并指出它们各自适用的使用场景？*
1.在浮动元素后面新增一个div,用clear：both清除浮动。
2.也可以通过增加伪元素：after清除浮动。
3.给父元素定高度
4.利用 overflow:hidden 属性
5.父元素处于绝对定位
3. 最喜欢的图片替换方法是什么，你如何选择使用？
图像替代，就是像我们在平时将文本添加到文本中，然后通过css隐藏文本并在它的位置上显示一个背景图片，这样，搜索引擎仍然可以搜到HTML文本，即使我们禁用css后，文本仍然是可以显示的。
在样式中使用背景图片来替换掉HTML模板中的文本内容，从而达到一种样式无法实现的页面渲染效果。
4. 会如何解决特定浏览器的样式问题？
采用css hack方法进行兼容，css hack技术是通过一些浏览器特殊支持或者不支持的语句。使一个CSS样式能够被浏览器解析或者不能被解析。主要方法有三种：
1.IE条件注释法。条件注释主要是针对于单独的XHTML代码处理。
只在IE下生效
2.类内属性前缀法
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果
“-“减号是IE6专有的hack
“\9” IE6/IE7/IE8/IE9/IE10都生效
“\0” IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0” 只对IE9/IE10生效，是IE9/10的hack
3.选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。,可以采用media screen 的方式。“`
5.有哪些隐藏内容的方法？
有两种：1.display:none不分配位置空间 2.visibility:hidden分配位置空间3.opcitity:0
6. 栅格系统？
栅格系统是响应式，使用于各种设备的布局方式。主要是结合媒体查询，将列平分为12列，再调整内外边距制作出来的响应式网格系统。
“`
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
@media (min-width: 768px) {
.container {
width: 750px;
}
@media (min-width: 992px) {
.container {
width: 970px;
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
关于列偏移，主要是通过设置margin-left的百分比，进行偏移。
关于列排序，也是通过设置left和right属性进行列排序。
7. 媒体查询或者移动端布局/CSS吗？
8. 熟悉SVG样式的书写？
9. 如何优化网页的打印样式？
10. 使用CSS预处理器的优缺点有哪些、。
11. 解释浏览器如何判断元素是否匹配某个CSS选择器？
12. 请描述伪元素及其用途？
13. 盒模型的理解
IE6以下盒模型宽度=margin+width。其他浏览器盒模型宽度=margin+border+padding+width。
14. 解释*{box-sizing:border-box}的作用，并且说明使用它什么好处？
15. 列举所有display的属性？
16. inline和inline-block的区别？
块级元素：
<div>、<form>、<table>、<h1>、<ul>、<dl>、<p>
内联元素：<span>、<a>、<strong>、<em>、<label>、<input>、<select>、<textarea>、<img>
Block元素会独占一行，会自动填满其父元素的宽度；可以设置margin和padding属性；
Inline元素不会独占一行，其宽度随着元素内容而变化；设置width和height元素无效. 水平方向的padding- left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding- bottom, margin-top, margin-bottom不会产生边距效果。
Inline-block元素将对象呈现为inline对象，但是对象内容作为block呈现，内联元素会被排列在同一行，但 是具有block的宽度高度特性又具有inline的同行特性。
18. css Flexbox或者grid标准规范
19. 响应式设计和自适应设计的不同
其实RWD和AWD都是响应式设计，从外观上很难分辨，但他们自己运行机理不同，RWD是主动式的响 应设计，AWD是被动式的响应式设计，RWD不管用户使用的是什么设备都是在服务器把数据推送到浏览器后，脚本或CSS自行侦测屏幕大小后执行对应的样式表内容，并且一直通过本地脚本在监听屏幕大小的变化，随时做出样式响应的变化，所以是主动的。但AWD是用户通过浏览器发送请求后，服务器根据请求中夹带的用户设备设备信息做出判断，调用已经在服务器里准备好的，适应对应设备样式文件+HTML内容+JS，返回给浏览器以这种方式响应不同设备。
20. 为何要使用tranlate()而非absolute positioning，或反之的理由？
21. 关于定位的几种方式？
1.static 默认值，没有定位，元素正常的出现在普通流中，元素框正常生成。
2.relative 生成相对定位的元素，相对于其正常元素进行定位。使得被设置元素保持与其原始位置相对，并不破坏其原始位置的信息，占据原始位置的空间。
3.absolute 绝对定位，是相对于除（static元素）以外最近的祖先元素定位，若不存在，则根据最初的包含块。可根据left,top,right,bottom属性进行规定，也可以通过z-index进行层叠顺序的确定。
4.fixed 固定定位，是相对于浏览器窗口定位。
5.inherit 从父元素继承position的信息。
22. box-sizing常用的属性有哪些？分别有什么作用？
box-sizing: content-box|border-box|inherit;
content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认 效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和 高度分别减去边框和内边距才能得到内容的宽度和高度。
关于JS相关问题
1. 解释事件代理
事件委托就是利用事件冒泡的原理，把事件加到父元素或祖先元素上,触发执行效果。
优点是提升javascript性能，事件委托可以显著的提高事件的处理速度，减少内存的占用。动态的添加DOM元素，不需要因为元素的改动而修改事件绑定。
事件监听：依次是捕获阶段，目标阶段，冒泡阶段。
事件捕获：当某个元素触发某个事件，顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。
事件目标：当到达目标元素之后，执行目标元素该事件的处理函数，如果没有绑定监听函数，那就不执行。
事件起泡：从目标元素开始，往顶层元素传播，途中如果有节点绑定了相应的事件处理函数，这些函数就会被一次触发。如果想阻止事件起泡，可以使用e.stopPropagation()来组织事件的冒泡传播。
2. js中this如何工作
全局环境下的this,当在网页的全局作用域中调用this时，this指向的是window对象；
对象中的this,讲一个函数赋给对象，通过这个对象调用这个函数，它们的this是调用该函数的对象。JavaScript中的this对象o有方法sayColor()，o.sayColor()被调用时，函数内部的this被绑定到o 上；
构造函数中的this:函数或方法之前带有关键字new,它就构成了构造函数调用，通过构造函数生成了一个新的对象，this指向新对象。
apply和call: 每个函数都包含两个方法，apply()和call()。这两个方法的用途都是在特定的作用域中调用函数，可以设置函数体内this对象的值。apply()方法接收两个参数：一个是在其中运行函数的作用域，另一个是参数数组。其中，第二个参数可以是Array实例，也可以是 arguments对象。在严格模式下，未指定环境对象而调用函数，则this值不会被转型为window,除非明确把函数添加到某个对象或者调用apply()或call()，否则this值是undefined.
Bind：这个方法会创建一个函数的实例，其this值会被绑定传给bind()函数的值。
闭包中的this，this对象在运行时是基于函数的执行环境对象的，在全局对象中，this等于window,而当函数作为某个对象方法调用时this指向那个对象，匿名函数的执行环境具有全局性，因此其this对象通常指向window.
3. 原型继承的原理
JavaScript中的每个对象都有一个prototype属性，我们称之为原型，而原型的值也是一个对象，因此它也有自己的原型，这样就串联起来了一条原型链，原型链的链头是object,它的prototype比较特殊，值为null。
原型链的作用是用于对象继承，函数A的原型属性(prototype property)是一个对象，当这个函数被用作构造函数来创建实例时，该函数的原型属性将被作为原型赋值给所有对象实例，比如我们新建一个数组，数组的方法便从数组的原型上继承而来。
当访问对象的一个属性时, 首先查找对象本身, 找到则返回; 若未找到, 则继续查找其原型对象的属性(如果还找不到实际上还会沿着原型链向上查找, 直至到根). 只要没有被覆盖的话, 对象原型的属性就能在所有的实例中找到，若整个原型链未找到则返回undefined。“`
4. AMD vs CommonJS?
AMD，CMD是用在浏览器端，异步的，如require.js和sea.js
CommonJs是用在服务器端的，同步的，如node.js。因为主要用于服务器的编程，加载的模块文件一般都已经存在于本地硬盘中，所有加载比较快，所以不需要异步加载的方式。
同时相对于浏览器端，要从服务器中取加载模板，就必须采用异步模式。
同时相对于AMD和CMD。不同之处在于AMD是提前执行，而CMD是依赖就近。
5. 以下变量的区别：null.undefined或undeclared?如何检测？
undefined是已经定义，还未赋值的变量；null是一种特殊的object;undeclared是未定义也未赋值的变量，访问会报错。
6. 关于闭包？
一个函数被执行时，和函数有关的一些变量会被申明（出现在内存中），当这个函数执行完成以后，如果函数中申明的变量没有再被调用，则会销毁函数中所有有关的数据。
相对于闭包，指有权访问另一个函数作用域中的变量的函数。闭包就是能够读取其他函数内部变量的函数。好处就是，一可以读取函数内部的变量；二是让这些变量的值永远保持在内存中。
使用闭包的注意点
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
7. 一个匿名函数的典型用例？
8. js宿主对象和原生对象的区别
9. 请指出以下代码的区别？function Person(){}、var person = Person()、var person=new Person()?
10. call和apply的区别？
共同点都是用来改变函数体内this对象的值。调用参数不同。call传递的是参数，而apply传递的是数组。
11. Ajax的工作原理和优势？
优势： 通过异步模式，提升了用户体验；优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用；Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
缺点：对搜索引擎不友好；跨域限制；不能使用浏览器前进后退按钮。Ajax的特点：Ajax可以实现动态不刷新（局部刷新）
ajax过程：1：创建XMLHttpRequest对象；2.设置响应http请求的回调函数；3.创建一个HTTP请求，指定请求方法和请求地址；4.发送HTTP请求；5：检测服务器返回状态，若成功后则获取服务器端返回的数据；后使用js操作DOM更新页面。
readyState属性 状态 有5个可取值： 0=未初始化 ，1=启动 2=发送，3=接收，4=完成
ajax的缺点：ajax不支持浏览器back按钮；安全问题 AJAX暴露了与服务器交互的细节；对搜索引擎的支持比较弱；破坏了程序的异常机制；不容易调试。
12. JSONP的工作原理和为什么不是真正的ajax?
JSONP是通过动态创建
<script>标签来实现跨域请求，后服务器生成一个和传递函数相同名字的参数，并把需要传递的数据当做参数传入。没有创建新的XMLHttpRequest对象，ajax不能进行跨域请求。
13. 解释变量声明提升
在js中，js解析器会对我们的代码进行分析的操作，解析器会把程序中变量的申明提前，在程序执行之前做一个初始化，解析器会把变量的声明做提前处理。同时相对于声明会提前，但是表达式不会被提前。
14. 描述事件冒泡机制？
事件起泡：从目标元素开始，往顶层元素传播，途中如果有节点绑定了相应的事件处理函数，这些函数就会被一次触发。如果想阻止事件起泡，可以使用e.stopPropagation()来组织事件的冒泡传播。IE的事件流叫做事件冒泡。而DOM2级的事件流分为三个阶段：事件捕获，目标阶段，事件冒泡。且作用域不同，IE事件处理程序会在全局作用域上运行，而DOM0级方法的情况下，事件处理程序会在其所属元素的作用域运行。同时event参数也不一样。
15. attribute和“prototype”的区别是什么？
16. onload和$.ready的区别？
Window.onload执行时机是在网页中所有内容加载完毕后触发，而$(document).ready()是在网页中所有DOM结构绘制完毕后就执行,即有可能dom相关的元素还未加载完。“`
17. js的同源策略？
>同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。这里的同源策略指的是：**协议，域名，端口相同**，同源策略是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性。
严格模式下的好处和坏处？
19. 解释什么是单页应用？以及如何使其对搜索引擎良好(SEO-friendly)?
20. Promise的polyfill?
21. 使用Promises而非回调优缺点？Promise 可以避免产生回调函数层层嵌套，是以同步执行的方式来异步执行。Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。主要有三种状态（pending,resolved,rejected）
缺点在于：首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。22. 使用一种可以编译成js语言来写代码有哪些优缺点？
23. 同步和异步函数的区别？同步函数 : 该函数被调用时不会立即返回，直到该函数所有的事情做完后才返回
异步函数 : 如果一个异步函数被调用时，该函数会立即返回尽管该函数规定的操作任务还没有完成。24. 什么是事件循环(event loop)—调用栈(call stack)和任务队列(task queue)的区别?
javascript是单线程运行的。为了解决I/O事件等待事件较长的情况，因此出现了异步执行的方式：
首先所有任务都在主线程上执行，形成一个任务栈(call stack)，主线程之外，还存在一个任务队列（task quene），系统把异步任务放在“任务队列”中，后执行后续任务。一旦执行栈的任务执行完后，去取任务队列中。若异步任务已经结束等待状态，则会从“任务队列”进行执行栈，恢复执行。
主线程会重复上面的步骤。25. 请解释layout、painting和composition的区别？
layout主要是布局确定每个元素的样式规则，进一步具体计算每个DOM元素最终在屏幕上显示的大小和位置，页面布局是相对的，一个元素变化有可能会联动其他元素的变化。
paint即是绘制的过程，即填充像素的过程，包括绘制文字，颜色，边框和阴影等。一般会在多个层中进行。
Composite即是渲染层合并，对页面中DOM元素的绘制是在多个层中进行的，在每个层完成绘制过程之后，浏览器按照合理的顺序合并成一个图层。26. array底层实现排序算法思路？
Mozilla/Firefox : 归并排序（jsarray.c 源码）； V8 ：数组长度小于等于 22 的用插入排序，其它的用快速排序。Webkit ：底层实现用了 C++ 库中的 qsort() 方法。
27.new操作符具体做了什么？
首先是一个对象被创建，它继承于自函数原型
其次是将构造函数的作用域赋给新对象（因此this指着这个新对象）
执行构造函数的代码(为这个新对象添加新属性)
返回新对象.
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
