WEB面试题二,

1.你在昨天/本周学到了什么？

2.编写代码的哪些方面能够使你兴奋或感兴趣？

在完成功能的同时精良多考虑性能，安全性，兼容性，代码的扩展性。

3.在制作一个Web应用或Web站点的过程中，你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的？

UI：界面美观，要有个性，考虑用户使用的逻辑要简单，用起来舒适自由。使用习惯要符合大部分用户的习惯，比如少让用户输入，采用选择的方式，提供搜索和提示功能。

安全性：对输入进行有效性验证（非法字符，特殊字符）如PHP中的方法htmlspecialchars()将特殊字符（>）转化为html实体，trim()去掉用户输入的不必要字符，stripslashes()去掉用户输入的反斜杠等等。

对交互操作进行身份验证和授权（api-key,authtoken）,异常错误处理（向用户反馈单额错误提示不要让攻击者分析出一些网络环境和配置），内存溢出，注入攻击等。

高性能：DNS负载均衡，HTTP重定向（通过使客户端重定向，来分散和转移请求压力，比如一些下载服务通常都有几个镜像服务器）

   分布式缓存

   负载均衡：反向代理负载均衡,

           数据库扩展：读写分离，垂直分区，水平分区。

SEO:选好关键字，描述语言，修饰性图片换成文本，合理使用h1-h6，对图片添加alt属性，链接添加target属性。

可维护性：代码是否容易被理解，是否容易被修改和增加新的功能，当出现问题时是否能快速定位到问题代码。

4.谈谈你喜欢的开发环境。(例如操作系统，编辑器，浏览器，工具等等。)

dreamweaver,eclipse,Fierbug,chrome自带的元素审查，IEtest, FileZilla (Portable)

5.你最熟悉哪一套版本控制系统？

svn:（1）程式码版本的存储与维护、（2）、程式码版本的追踪回溯（3）、程式码版本的分合控制（4）、职员多人合作开发专案（5）、程式码远端管理维护（6）、程式码匿名截取（7）对多个项目文件进行不分割送交（8）目录版本控制，目录更名

Check out——从服务器端取得代码、Update——更新项目代码、Commit——将本地代码上传到服务器、Export——将项目导出到本地、Add——增加文件、Show Log——显示所有版本、Update To Revision——恢复到某个版本

6.你能描述一下当你制作一个网页的工作流程吗？

内容分析：分清展现在网络中内容的层次和逻辑关系

结构设计：写出合理的html结构代码

布局设计：使用html+css进行布局。

样式设计：首先要使用reset.css。

交互设计：鼠标特效。行为设计：js代码，ajax页面行为和从服务器获取数据。最后测试兼容性。优化性能。

7.你能描述一下渐进增强和优雅降级之间的不同吗?

要么优雅降级（graceful degradation，一开始就构建站点的完整功能，然后针对浏览器测试和修复），要么渐进增强（progressive enhancement，一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。

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

特性检测，window.innerWidth/document.documentElement.clientWidth

8.请说出三种减少页面加载时间的方法。

  1). 尽量减少页面中重复的HTTP请求数量

   2). 服务器开启gzip压缩

   3). css样式的定义放置在文件头部
   4). Javascript脚本放在文件末尾

   5). 压缩Javascript、CSS代码

  7). 尽可能减少DCOM元素
  8). 使用多域名负载网页内的多个文件、图片
  9). 使用CDN
 10). 在服务器端配置control-cache last-modify-date
 11).在服务器配置Entity-Tag if-none-match

9.如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？
建议这个项目使用像 EditorConfig (http://editorconfig.org/) 之类的规范
为了保持一致性，接受项目原有的风格
直接使用 VIM 的 retab 命令

10.请写一个简单的幻灯效果页面

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

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

Profiler, JSPerf, Dromaeo
12.如果今年你打算熟练掌握一项新技术，那会是什么？

13.Long-Polling, Websockets, SSE(Server-Sent Event) 之间有什么区别？

14.请谈一下你对网页标准和标准制定机构重要性的理解。

让浏览器兼容性的问题尽量小，对浏览器的开发者的约束，也是对web开发者的约束。

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

如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。
原因大致为：
1，使用import方法导入样式表。
2，将样式表放在页面底部
3，有几个样式表，放在html结构的不同位置。
其实原理很清楚：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
解决方法：
使用LINK标签将样式表放在文档HEAD中。

16.请尽可能完整得描述下从输入URL到整个网页加载完毕及显示在屏幕上的整个流程

1）把URL分割成几个部分：协议、网络地址、资源路径。其中网络地址指示该连接网络上哪一台计算机，可以是域名或者IP地址，可以包括端口号；协议是从该计算机获取资源的方式，常见的是HTTP、FTP，不同协议有不同的通讯内容格式；资源路径指示从服务器上获取哪一项资源。
例如：http://www.guokr.com/question/554991/
协议部分：http
网络地址：www.guokr.com
资源路径：/question/554991/
2）如果地址不是一个IP地址，通过DNS（域名系统）将该地址解析成IP地址。IP地址对应着网络上一台计算机，DNS服务器本身也有IP，你的网络设置包含DNS服务器的IP。
例如：www.guokr.com 不是一个IP，向DNS询问请求www.guokr.com 对应的IP，获得IP： 111.13.57.142。这个过程里，你的电脑直接询问的DNS服务器可能没有www.guokr.com 对应的IP，就会向它的上级服务器询问，上级服务器同样可能没有，就依此一层层向上找，最高可达根节点，找到或者全部找不到为止。
3）如果地址不包含端口号，根据协议的默认端口号确定一个。端口号之于计算机就像窗口号之于银行，一家银行有多个窗口，每个窗口都有个号码，不同窗口可以负责不同的服务。端口只是一个逻辑概念，和计算机硬件没有关系。
例如：www.guokr.com 不包含端口号，http协议默认端口号是80。如果你输入的url是http://www.guokr.com:8080/ ，那表示不使用默认的端口号，而使用指定的端口号8080。
4）向2和3确定的IP和端口号发起网络连接。
例如：向111.13.57.142的80端口发起连接
5）根据http协议要求，组织一个请求的数据包，里面包含大量请求信息，包括请求的资源路径、你的身份
例如：用自然语言来表达这个数据包，大概就是：请求 /question/554991/ ，我的身份是xxxxxxx。
6）服务器响应请求，将数据返回给浏览器。数据可能是根据HTML协议组织的网页，里面包含页面的布局、文字。数据也可能是图片、脚本程序等。现在你可以用浏览器的“查看源代码”功能，感受一下服务器返回的是什么东东。如果资源路径指示的资源不存在，服务器就会返回著名的404错误。
7）如果（6）返回的是一个页面，根据页面里一些外链的URL，例如图片的地址，按照（1）－（6）再次获取。
8）开始根据资源的类型，将资源组织成屏幕上显示的图像，这个过程叫渲染，网页渲染是浏览器最复杂、最核心的功能。
9）将渲染好的页面图像显示出来，并开始响应用户的操作。
以上只是最基本的步骤，实际不可能就这么简单，一些可选的步骤例如网页缓存、连接池、加载策略、加密解密、代理中转等等都没有提及。即使基本步骤本身也有很复杂的子步骤，TCP/IP、DNS、HTTP、HTML：每一个都可以展开成庞大的课题，而浏览器的基础——操作系统、编译器、硬件等更是一个比一个复杂。不是计算机专业的同学看了上面的解释完全不明白是很正常的，可能会问为什么要搞得那么复杂，但我保证这每一个步骤都经过深思熟虑和时间的考验。你输入URL即可浏览互联网，而计算机系统在背后做了无数你看不到的工作，计算机各个子领域无数工程师为此付出你难以想象的努力。

[⬆] HTML相关问题：

1.如果页面使用 'application/xhtml+xml' 会有什么问题吗？

一些老的浏览器并不兼容，IE876不支持。

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

采用统一编码UTF-8模式

3.在设计和开发多语言网站时，有哪些问题你必须要考虑？

4.data-属性的作用是什么？

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

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

var post = document.getElementsByTagName('div')[0];
post.dataset; // DOMStringMap
post.dataset.commentNum; // 10

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

5.如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？

<nav>, <header>,<section>, <footer>

必须知道的html相关特性：http://www.camnpr.com/archives/must-know-the-seven-html5-features.html

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

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

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

Web Storage带来的好处：

1. 减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
2. 快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。
3. 临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。

浏览器本地存储与服务器端存储之间的区别

其实数据既可以在浏览器本地存储，也可以在服务器端存储。

浏览器端可以保存一些数据，需要的时候直接从本地获取，sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。

服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据。

1.服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端。

2.服务器端也可以保存用户的临时会话数据。服务器端的session机制，如jsp的 session 对象，数据保存在服务器上。实现上，服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。

服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。

浏览器端一般只用来存储小数据，而服务器可以存储大数据或小数据。

服务器存储数据安全一些，浏览器只适合存储一般数据。

sessionStorage 、localStorage 和 cookie 之间的区别

共同点：都是保存在浏览器端，且同源的。

区别：

1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2. 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
5. Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
6. Web Storage 的 api 接口使用更方便。

sessionStorage 和 localStorage 之间的区别

见上面的区别3、4

sessionStorage与页面 js 数据对象的区别

页面中一般的 js 对象或数据的生存期是仅在当前页面有效，因此刷新页面或转到另一页面这样的重新加载页面的情况，数据就不存在了。

而sessionStorage 只要同源的同窗口（或tab）中，刷新页面或进入同源的不同页面，数据始终存在。也就是说只要这个浏览器窗口没有关闭，加载新页面或重新加载，数据仍然存在

[⬆] CSS 相关问题：

1.你最喜欢的图片替换方法是什么，你如何选择使用。

Alt，title,onerror

2.讨论CSS hacks，条件引用或者其他。

3.如何为有功能限制的浏览器提供网页？你会使用哪些技术和处理方法？

4.有哪些的隐藏内容的方法（如果同时还要保证屏幕阅读器可用呢？）

5.你用过栅格系统吗？如果使用过，你最喜欢哪种？

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

7.你熟悉 SVG 样式的书写吗？

8.如何优化网页的打印样式？

9.在书写高效 CSS 时会有哪些问题需要考虑？

10.使用 CSS 预处理器的优缺点有哪些？(SASS，Compass，Stylus，LESS)描述下你曾经使用过的 CSS 预处理的优缺点。
11.如果设计中使用了非标准的字体，你该如何去实现？

Webfonts (字体服务例如：Google Webfonts，Typekit 等等。)

12.解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？

13.解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

14.请解释一下 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处？

15.请罗列出你所知道的 display 属性的全部值

16.请解释一下 inline 和 inline-block 的区别？

inline-block可以设置行高

17.请解释一下 relative、fixed、absolute 和 static 元素的区别

1）static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2）relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。
3）absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。与relative的区别是其在正常流中的位置不在存在。
4）fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

18.你目前在使用哪一套CSS框架，或者在产品线上使用过哪一套？(Bootstrap, PureCSS, Foundation 等等)

如果有，请问是哪一套？如果可以，你如何改善CSS框架？
请问你有使用过 CSS Flexbox 或者 Grid specs 吗？

如果有，请问在性能和效率的方面你是怎么看的？

[⬆] JS相关问题：

1.解释下 JavaScript 中 this 是如何工作的。

this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。匿名函数和不处于任何对象中的函数指向window。

call,apply,with指的this是谁就是谁。

普通的函数调用，函数调用被谁调用，this指的就是谁。

2.解释下原型继承的原理。

3.你是如何测试JavaScript代码的？

4.AMD vs. CommonJS？

5.什么是哈希表？

6.解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式)：function foo(){ }();.要做哪些改动使它变成 IIFE?

function foo(){ }()解析器会把function foo(){ }当作一个函数声明，（）没有实际意义的函数表达式。分组操作需要包含表达式。给加上括号就行。

7.描述以下变量的区别：null，undefined 或 undeclared？该如何检测它们？

undefined :js语言类型，有申明，没有初始化。undeclared：js语法错误，没有申明直接使用，js无法找到对应的上下文。null：是空值。用typeof判断undefined，==，！=null判断Null..

8.什么是闭包，如何使用它，为什么要使用它？

9.请举出一个匿名函数的典型用例？

不会造成全局变量的污染

10.解释 “JavaScript 模块模式” 以及你在何时使用它。

如果有提到无污染的命名空间，可以考虑加分。
如果你的模块没有自己的命名空间会怎么样？
你是如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？

11.请指出 JavaScript 宿主对象和原生对象的区别？

12.指出下列代码的区别：
function Person(){}
var person = Person();

var person = new Person();

13.请解释 Function.prototype.bind 的作用？

你何时优化自己的代码？

你能解释一下 JavaScript 中的继承是如何工作的吗？

在什么时候你会使用 document.write()？

大多数生成的广告代码依旧使用 document.write()，虽然这种用法会让人很不爽。
请指出浏览器特性检测，特性推断和浏览器 UA 字符串嗅探的区别？

请尽可能详尽的解释 AJAX 的工作原理。

请解释 JSONP 的工作原理，以及它为什么不是真正的 AJAX。

你使用过 JavaScript 模板系统吗？

如有使用过，请谈谈你都使用过哪些库，比如 Mustache.js，Handlebars 等等。
请解释变量声明提升。

请描述下事件冒泡机制。

"attribute" 和 "property" 的区别是什么？

为什么扩展 JavaScript 内置对象不是好的做法？

为什么扩展 JavaScript 内置对象是好的做法？

请指出 document load 和 document ready 两个事件的区别。

== 和 === 有什么不同？

你如何从浏览器的 URL 中获取查询字符串参数。

请解释一下 JavaScript 的同源策略。

请描述一下 JavaScript 的继承模式。

如何实现下列代码：

[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
描述一种 JavaScript 中实现 memoization(避免重复运算)的策略。

什么是三元表达式？“三元” 表示什么意思？

函数的参数元是什么？

什么是 "use strict"; ? 使用它的好处和坏处分别是什么？

[⬆] jQuery 相关问题：

1.解释"chaining"。

通过 jQuery，您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

2.解释"deferreds"。

3.你知道哪些针对 jQuery 的优化方法。

4.请解释 .end() 的用途。

可以一次操作多个元素，而且end( )就是要返回前一个对象，重新再选择一次

你如何给一个事件处理函数命名空间，为什么要这样做？

请说出你可以传递给 jQuery 方法的四种不同值。

选择器（字符串），HTML（字符串），回调函数，HTML元素，对象，数组，元素数组，jQuery对象等。
什么是效果队列？

请指出 .get()，[]，eq() 的区别。

eq返回的是一个jquery对象 [],get返回的是一个html 对象数组
返回的是jQuery对象，就可以继续调用其他方法，返回的是html数组就不能调用jQuery的其他方法

请指出 .bind()，.live() 和 .delegate() 的区别。

请指出 $ 和 $.fn 的区别，或者说出 $.fn 的用途。

jQuery.extend() 的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，如jQuery.init()，而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法，这是很重要的

请优化下列选择器：

$(".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 特性是什么？

[⬆] 其他参考资料：

http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before
http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/
http://css-tricks.com/interview-questions-css/
http://davidshariff.com/quiz/
http://blog.sourcing.io/interview-questions