各大公司（BAT等）都会涉及到的前端开发面试题（转载）
-
线程与进程区别
一个程序至少有一个进程,一个进程至少有一个线程.
线程的划分尺度小于进程，使得多线程程序的并发性高。
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
-
请解释一下什么是“语义化的 HTML”
语义化的好处：1：去掉或样式丢失的时候能让页面呈现清晰的结构：
html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.
3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.
4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.
5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
6.便于团队开发和维护
语义化的HTML就是：标题用h1-h6，文字段落用p，列表用ul li，大致如此
-
你如何对网站的文件和资源进行优化？
期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用 CDN 托管
缓存的使用（多个域名来提供缓存）
其他
-
请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）
1.优化图片 2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
3.优化CSS（压缩合并css，如margin-top,margin-left...) 4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。） 5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。
当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。） 6.减少http请求（合并文件，合并图片）。
-
doctype（文档类型）的作用是什么？你知道多少种文档类型？
此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks
（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
-
讨论CSS hacks，条件引用或者其他。
background-color:blue; 各个浏览器都认识，这里给firefox用；background-color:red\9;\9所有的ie浏览器可识别；background-color:yellow\0; \0 是留给ie8的+background-color:pink; + ie7定了；_background-color:orange; _专门留给神奇的ie6；:root #test { background-color:purple\9; } :root是给ie9的，@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。
-
你用过媒体查询，或针对移动端的布局/CSS 吗？
@media screen and (min-width: 400px) and (max-width: 700px) { … }
@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }
媒体查询，就是响应式布局。 响应式布局框架：Bootstrap、PureCSS等
-
解释下原型继承的原理。
当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止。(大多数JavaScript的实现用 __proto__ 属性来表示一个对象的原型链。)
以下代码展示了JS引擎如何查找属性：
function getProperty(obj, prop) {
if (obj.hasOwnProperty(prop))
return obj[prop]
else if (obj.__proto__ !== null)
return getProperty(obj.__proto__, prop)
else
return undefined
}
注：__proto__ 是一个不应在你代码中出现的非正规的用法，这里仅仅用它来解释JavaScript原型继承的工作原理。
-
未完待续
