简介

前端开发面试知识点大纲：

　　HTML&CSS: 对web标准的理解、浏览器内核的差异、兼容性、hack、css基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。

　　javascript： 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄露、事件机制、异步装载回调、模板引擎、nodejs、JSON、ajax

　　其他：HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯

1.请你谈谈Cookie的弊端

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。

第一：每个特定域名下最多生成20个cookie

1. IE6或更低版本最多20个cookie
2. IE7和之后版本最多可以有50个cookie。
3. firefox最多50个cookie
4. chrome和safari没有做硬性限制

IE和opera会清理近期最少使用的cookie，firefox会随机清理cookie。

cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。

1. IE提供了一种存储可以持久化用户数据，叫做userData，从IE5.0就开始支持。每个数据最多128k，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有处理
2. ，那么会一直存在。

优点：极高的扩展性和可用性

1. 通过良好的编程，控制保存在cookie中的session对象的大小。
2. 通过加密和安全传输技术（SSL），减少cookie被破解的可能性。
3. 只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
4. 控制cookie的 生命周期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点：

1. cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
2. 安全性问题。如果cookie被人拦截，那人就可以取得所有的session信息。即使加密也于事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
3. 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么他起不到任何作用。

2.浏览器本地存储

在较高的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。

html5中的web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地一个会话（session）中的数据，这些数据只有在同一个绘会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别而localStorage用于持久化的本地存储，除非主动删除数据，否则数据永远不会过期的

3.web storage和cookie的区别

web storage的概念和cookie相识，区别是他是为了更大的容量存储而设计的。cookie的大小是受限的，并且每次请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，web storage拥有setItem，getItem，removeItem，clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是cookie也是不可或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而web storage仅仅是为了本地存储数据而生

浏览器的支持除了ie7及以下不支持外，其他标准浏览器都完全支持（ie及ff需要在web服务器里运行），值得一提的是IE总是办好事，例如IE6，IE7中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web Storage。

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

4.说说你对语义化的理解？

1.去掉或者丢掉的时候能够让页面呈现出清晰的结构

2.有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重

3.方便其他设备来解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页

4.便于团队开发和维护，语义化更具可读性，是下一代网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

6.你知道多少种Doctype文档类型？

该标签可声明三种DTD类型，分别表示严格版本，过度版本以及基于框架的HTML文档。

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

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

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

7.HTML与XHTML--二者有什么区别？

区别：

　　1.所有的标记都必须要有一个相应的结束标签

　　2.说有的标签元素和属性的名字都必须使用小写

　　3.所有的XML标记都必须合理嵌套

　　4.所有的属性都必须有引号括起来

　　5.把所有的<和&特殊字符用编码表示

　　6.给所有属性附一个值

　　7.不要在注释内容中使“--”

　　8.图片必须有说明文字

8.常见兼容问题？

1.png24位的图片在ie6浏览器上出现背景，解决方案是做成png8，也可以引用一段脚本处理。

2.浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin：0;padding:0}来统一。

3.IE6双边距bug：块属性标签float后，又有横行的margin情况下，在ie6显示的margin比设置的大。

4.浮动ie产生双倍距离（ie6双边距问题：在ie6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）

5.渐进识别的方式，从总体中逐渐排除局部。

　　首先，巧妙的使用"\9"这一标记，将IE浏览器从所有情况中分离出来。

　　接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

.test {
    background-color: #f1ee18;   /*所有识别*/
    .background-color: #00deff\9;/*IE6、7、8识别*/ 
    +background-color: #00deff;/*IE6、7识别*/ 
    _background-color: #00deff;/*IE6识别*/ 
}

6.IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；firfox下，只能通过使用getAttribute()获取自定义属性。

解决方法：统一使用getAttribute()获取自定义属性。

9.HTML5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加

新特性：

　　拖拽释放(Drag and drop) API

　　语义化更好的内容标签(header ,nav , footer ,aside, article, section)

　　音频、视频API(audio, video)

　　画布(Canvas) API

　　地理(Geolocation) API

　　本地离线存储 localStorage 长期储存数据，浏览器关闭后数据不丢失

　　sessionStorage 的数据在浏览器关闭之后自动删除

　　表单控件，calender、date、time、email、url、search

　　新的技术webworker，websocket，Geolocation

移除元素：

　　纯表现的元素：basefont, big, center, font, s, strike, tt, u;

　　对可用性产生负面影响的元素： frame， frameset， noframes；

支持HTML5新标签：

　　IE6,7,8支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加默认的样式

　　当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!-- [if lt IE 9] >
    <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif] -->

10.iframe的优缺点？

优点：

　　解决加载缓慢的第三方内容如图标和广告等的加载问题

　　Security sandbox

　　并行加载脚本

缺点：

　　iframe会阻塞主页面的Onload时间

　　即使内容为空，加载也需要时间

　　没有语意

11.webSocket如何兼容低浏览器？

Adobe Flash Socket、Active HTMLFile(IE)、基于multipart编码发送XHR、基于长轮询的XHR

12.线程与进程的区别？

一个程序至少有一个进程，一个进程至少有一个线程。

线程的划分尺度小于进程，使得多线程程序的并发性高。

另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大的提高了程序的运行效率。

线程在执行过程中与进程还是有区别的。每个独立的线程都有一个程序的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的区别

进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位。

线程是进程的一个实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位.线程自己基本上不拥有系统资源,只拥有一点在运行中必不可少的资源(如程序计数器,一组寄存器和栈),

但是它可与同属一个进程的其他的线程共享进程所拥有的全部资源.

一个线程可以创建和撤销另一个线程;同一个进程中的多个线程之间可以并发执行.

13.你如何对网站进行优化？

1.文件合并(CSS sprites,多个js，css文件合并等)

2.文件最小化/文件压缩

3.使用CDN托管(Content Delivery Network，即内容分发网络)

4.缓存的使用(多个域名来提供缓存)

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

1.优化图片(gif代替png、dataUrl等)

2.图像格式的选择(gif:提供的颜色较少，可用在一些对颜色要求不高的地方)

3.优化CSS(压缩合并css，如margin-top，margin-left..)

4.网站后加斜杠(如www.cnblogs.com/目录，会判断这个“目录是什么文佳类型，或者是目录”)

5.表明高度和宽度(如果浏览器没有找到这两个参数，他需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断的调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使

图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容，从而加载时间快了，浏览体验也更好了。)

6.减少http请求(合并问价，合并图片)

15.什么是FOUC(无样式内容闪烁)？你如何避免FOUC？

<style type="text/css" media="all">@import "../fouc.css"</style>