前端工程师：最贴近用户的程序员，完成产品基本功能，并进一步优化，实现界面交互，提升用户体验，借助nodejs还可实现服务器端的一些事情。前端性能优化可以使产品从90分优化到100分。前端工程师参与项目，快速有效地完成效果图，与团队成员合作，与UI、产品经理等都需要沟通协作，做好页面结构、页面重构及用户体验，处理hack，兼容写出高效简洁的代码，针对服务器端优化，随时补充新技术，拥抱最新技术更新。
1 对web标准的理解
Web标准是一系列标准的组合，包含结构、表现、行为的标准，具体有：web标准要求书写标签必须闭合、标签小写、合理嵌套标签，提高搜索几率；建议使用外联js和css，实现结构、表现和行为的分离，提高页面渲染速度及页面加载速度；样式与标签的分离、更合理地语义化，使内容能被更多用户访问，降低后期维护成本；不需要变动页面内容即可打印版本而不需要复制内容，提高网站易用性。
2 link和@import区别
link：属于XHTML标签；加载页面时同时被加载；无兼容性问题；可以控制dom操作
@import：属于CSS；页面加载完毕再加载；ie5以上可识别；不能控制dom操作
3 html5新特性
canvas、video、audio、article、footer、header、nav、section、date、webworker、websocket、
4 标签语义化
页面内容结构化，比较直观，便于对浏览器、搜索引擎解析，容易阅读。
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
在没有css的情况下也能表现很好的结构（内容结构和代码结构）；有利于用户体验；有利于seo和搜索引擎建立良好的沟通；方便其他设备解析，以有意义的方式渲染页面；便于团队开发和维护，增加可读性。
5 html5离线存储
将一些源代码文件保存在本地，这样后续的页面重新加载将使用本地资源文件，在离线的情况下也可以访问web应用，同时通过一定的方法可以更新、删除离线存储等操作
6 cookie、sessionStorage、localstorage区别
Cookie：为持久保存客户端数据提供了方便，且分担了服务器存储负担，但也有不足，如存储空间小，每个域名下最多有20条cookie，每个cookie长度不超过4kB，否则会被截掉；安全性差，如果cookie被人拦截，将导致所有的session信息泄露，在浏览器和服务器之间来回传递。Cookie作用是与服务器进行交互，作为http规范的一部分存在。
sessionStorage：会话级别的存储，数据在浏览器关闭之后消失，localStorage：持久化的本地存储，长期存储数据，浏览器关闭后数据不丢失；二者存储空间更大，有更多可用接口，有各自独立的存储空间。Web Storage（包括sessionStorage和localStorage）仅仅是为了在本地存储数据而生。
7 display属性值
None:此元素不会显示
Inline：内联元素，前后没有换行符
Inline-block：行内块元素
Block：块级元素，前后有换行符
8 position属性值
Static：元素在正常流中
Relative：相对定位，相对于其正常位置进行定位。还在文档流中。
Absolute：绝对定位，相对于static定位以外的第一个父元素进行定位。Left、top、right、bottom。脱离文档流，不占据空间。
Fixed：固定定位，相对于浏览器窗口进行定位。Left、top、right、bottom。脱离文档流。
9 css3新特性
Border-radius、box-shadow、text-shadow、gradient、transform：rotate（） scale（） translate（） skew（）
10 css初始化
不同浏览器对不同标签的默认属性值是有差距的，如果不对css初始化将导致不同浏览器上的显示效果不一致，因此考虑到浏览器的兼容性问题，需要css初始化。
11 tcp、udp区别
Tcp：面向连接、传输可靠、速度慢、开销大、用于传输大量数据
Udp：面向非连接、传输不可靠、速度快、用于传输少量数据
12 css样式优先级
内联样式 》》 ID选择器 》》 类、伪类和属性选择器 》》 类型选择器和伪元素选择器 》》 通配符选择器（*）、子选择器（>）、相邻同胞选择器（+）
13 浮动及清除浮动
浮动：脱离文档流，不占据文档空间。浮动元素碰到包含它的边框或者浮动元素的边框则停留。
浮动引起的问题：父元素的高度无法被撑开，影响与父元素同级的元素；与浮动元素同级的非浮动元素会紧跟其后；若非第一个元素浮动，该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除浮动： 使用空标签，在所有浮动元素标签后面添加一个空标签，定义css为clear：both； 使用overflow，给包含浮动元素的父元素定义css为overflow：auto；zoom：1； 使用after伪对象，#layout：after{display:block;clear:both;content:” ”;visibility:hidden;height:0;}
14 浏览器内核
Trident内核：IE、360、搜狗浏览器
Gecko内核：firefox、netscape6
Presto内核：Opera7
Webkit内核：Chrome
15 盒子模型
网页中的一个元素被描述成盒子模型，由元素内容、元素内边距、元素边框、元素外边界四部分组成。盒子模型分两种：IE盒子模型（border-box）、W3C盒子模型（content-box）。Css3中的box-sizing可以控制盒子的模型的解析模式，默认为content-box。其中，conten-box盒子模型，padding和border不被包含在定义的width和height之内，元素实际宽度为width+padding+border；而border-box盒子模型padding和border包含在定义的width之内，元素的实际宽度即为width。
16 行内元素、块元素、空元素
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素:br、meta、hr、link、input、img
17 src、href区别
Src：指向外部链接的位置，指向的内容将会嵌入到文档中当前标签所在位置。在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，当浏览器解析到该元素时会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕。
Href：指向网络资源所在位置，建立和当前元素或当前文档之间的链接，用于超链接。
18 css hack
针对不同浏览器写的不同的css，目的是为了浏览器的兼容
19 px、em
共同点：都是长度单位
不同点：px是固定的，指定多少就是多少；em不是固定的，且em会继承父级元素的字体大小。
Ps：浏览器的默认字体高为16px，未经调整的浏览器都符合1em=16px
20 优雅降级、渐进增强
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
渐进增强：针对低版本浏览器进行构建页面，保证基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
21 i、em、b、strong标签，img的alt和title
<i>标签将呈现斜体的文本；<em>把文本定义为斜体强调的内容。
<b>标签定义粗体的文本；<strong>把文本定义为粗体语气更强的强调的内容。
<em>表示强调，strong表示更强烈的强调；em用于局部强调，strong则全局强调；em是有顺序的、阅读到某处才会注意到，而strong强调是一种随意无序的、某个文字或界面突然凸显；
Alt：在不能显示图片的时候，alt用来指定替换文字；title为设置该属性的元素提供建议性的信息。
22 大量图片加载缓慢的处理方法
图片懒加载，滚到相应位置才加载图片；图片预加载，将当前展示图片的前一张和后一张优先下载；使用css sprite；图片过大可以使用特殊的编码方式，加载时先加载一张压缩的特别厉害的缩略图。
23 css中margin、padding
Margin：外边界，元素之外，属于元素跟元素之间的距离，相邻元素的margin可以融合；
Padding：内边距，元素之内，相邻元素的padding不可以融合。
24 label
Label标签定义表单控制间的关系，当用户选择该标签时，浏览器会自动聚焦到和标签相关的表单控件上。
<label>Date:<input type=”text” /></label>
25 css选择器
ID选择器（#myid）、类选择器（.myclassname）、标签选择器（div、h1）、相邻选择器（h1-p）、子选择器（ul>li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover，li：nth-child）、
26 浮动、绝对定位、固定定位将导致脱离文档流。
27 css层叠
Css样式之间可能会有交叉的部分，这就会涉及到样式的优先级问题，样式的权重问题，内联样式》》内部样式》》外部样式》》浏览器用户自定义样式》》浏览器默认样式
ID选择器》》class选择器》》元素选择器
28 display：none； visibility：hidden；
display：none；隐藏对应的元素，在文档布局中不再分配空间，它各边的元素会靠拢，就当它不存在；引发回流和重绘。其内的标签元素全部隐藏。
visibility：hidden；隐藏对应的元素，但是在文档布局中仍然保留原有的空间；无回流和重绘。其元素若添加visibility：visible；则会显示出来。
29 position的fixed和absolute
共同点：改变行内元素的呈现方式，display设置为block；让元素脱离文档流，不再占据空间；默认会覆盖到非定位元素上。
不同点：absolute的根元素是可以设置的，而fixed的根元素固定为浏览器窗口，当滚到页面时，fixed元素与浏览器窗口之间的距离是不变的。
30 doctype文档类型
HTML4.01规定三种：strict、Transitional、Frameset
XHTML1.0规定三种：Strict、Transitional、Frameset
31 h5文档头只需要写<!Doctype>原因
H5不基于SGML（标准通用标记语言），因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（即让浏览器按照他们应该的方式来运行）；而HTML4.01基于SGML，因此需要DTD进行引用，才能告知浏览器文档所使用的文档类型。
32 css可以通过哪些属性定义使得一个dom元素不显示在浏览器可视范围内
Display：none；visibility：hidden；
设置宽高为0，设置透明度为0，设置z-index位置为-1000
33 被点击访问过的hover样式不再出现的问题及解决方法
被点击访问过的超链接样式不再具有hover和active。可以更改css属性的排列顺序：（L-V-H-A）
34 居中
Margin：0 auto；
Position：absolute；left：50%；transfrom：translateX（-50%）；
Position：absolute；left：50%；width：200px；margin-left：-100px；
Position：absolute；top：0；right：0；bottom：0；left：0；margin：auto；
Position：relative；left：50%；width：300px；margin-left：-150px；background-color：pink；
35 cookie、session
Cookie数据存放在客户的服务器上，session数据放在服务器上；cookie没有session安全；session会在一定时间内保存在服务器上，当访问增多时可能导致服务器性能下降，应当使用cookie；单个cookie保存的数据不能超过4k。
36 性能优化问题
代码层面：避免使用css表达式，避免使用高级选择器、通配符选择器
缓存利用：缓存ajax，使用CDN，使用外部js和css以便缓存，添加expires头，服务端配置Etag，减少dns查找
请求数量：合并样式和脚本，使用css精灵，图片懒加载。静态资源延迟加载
请求带宽：压缩文件，开启GZIP
面向内容的优化：减少http请求；减少DNS查找；避免重定向；使用ajax缓存；延迟载入组件；预先载入组件；减少DOM元素数量；切分组件到多个域；最小化iframe数量。
面向servlet：缩小cookie；针对web组件使用域无关性。
减少http请求优点：减少DNS请求所耗费的时间、减少服务器压力、减少http请求头
减少http请求方法：图片映射；css精灵；合并样式和脚本；静态文件资源缓存
37 栈、队列
栈：插入和删除都在一端进行;栈先进后出；
队列：插入删除在两端进行；队列先进先出；
38 栈、堆
栈区：由编译器自动分配释放，存放函数的参数值，局部变量的值；一种先进后出的数据结构；
堆区：一般由程序员分配释放，若程序员不释放，程序结束时可能由OS回收；堆可以看成一棵树；
39 闭包
使用闭包目的：为了设计私有变量和方法。
优点：可以避免全局变量的污染。
缺点：闭包会常占内存，增大内存使用量，使用不当很容易造成内存泄露。
特性：函数嵌套函数；函数内部可以引用外部的参数和变量；参数和变量不会被垃圾回收机制回收。
40 JavaScript中每一个构造函数都有一个prototype属性，指向另一个对象，这个对象的所有属性和方法，都会被构造函数的实例继承。这意味着，我们可以把那些不变的属性和方法直接定义在prototype对象上。
41 HTTPS、http
http是超文本传输协议，用来在网络上传输超文本的传送协议，信息是明文传输；而HTTPS是具有安全性的ssl加密传输协议，安全超文本传输协议，对数据进行压缩和解压操作并返回网络上传回的结果。
http端口号是80，而HTTPS端口号是443.
http是面向无连接的，无状态的，不安全的；而HTTPS由ssl+http协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
http是由http://开头，而HTTPS则以https://开头。
OSI模型中，http工作在应用层，HTTPS工作在传输层。
http无需证书；而HTTPS需要CA机构颁发的ssl证书。
42 GET、POST
GET一般用于信息获取，使用URL传递参数，，对所发送信息的数量有限制，一般在2000个字符；而POST一般用于修改服务器上的资源，对所发送的信息没有限制。
Get需要使用Request.QueryString获取变量的值，而POST方式通过Request.Form获取变量的值。即get通过地址栏来传值，而POST通过提交表单来传值。
Ps：以下情况请使用POST》无法使用缓存文件；向服务器发送大量数据；发送包含未知字符的用户输入时候（POST比get更稳定可靠）
43 事件
可以被JavaScript侦测到的行为称为事件。
事件处理机制：IE是时间冒泡；Firefox是事件捕获和事件冒泡。
阻止冒泡：ev.stopPropagation(); 旧IE方法：ev.cancelBubble=true;||ev.stopPropagation();
44 重构
在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。即在不改变UI的前提下对网站进行优化，在扩展的同时保持一致的UI。
重构方法：表格布局改为div+css；网站前端兼容于现代浏览器；对于移动平台的优化；针对SEO优化（搜索引擎优化）；减少代码间的耦合；让代码保持弹性；规范编码；设计可扩展的API；压缩js、css、image等前端资源；使用cdn加速资源加载；http服务器的文件缓存；
45 http状态码
100 继续；200 ok； 201 请求成功且服务器创建了新的资源；202 服务器已接受请求但尚未处理；301 请求的网页永久移动到新的位置；302 临时重定向；303 临时重定向且总是使用get请求新的URI； 304 自从上次请求后，请求的网页未修改过；400 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求；401 请求未授权； 403 禁止访问； 404 找不到与URI匹配的资源； 500 最常见的服务器端错误； 503 服务器端暂时无法处理请求；
46 删除一个cookie
首先，将时间设为当前时间往前一点：
Var date=new Date();
Date.setDate(date.getDate()-1);
setDate()方法用于设置一个月的一天
然后，expires的设置：
Document.cookie=’user=’+encodeURIComponent(‘name’)+’;expires=’+new Date(0)
47 document.write()
document.write()方法可以用在两个方面：页面载入过程中用实时脚本创建页面内容，以及用延时脚本创建本窗口或新窗口的内容。
document.write()只能重绘整个页面，而innerHTML可以重绘页面的一部分。
48 git fetch、git pull
git fetch：从远程获取最新版本到本地，不会自动merge
git pull：从远程获取最新版本并merge到本地
49 事件代理
又名事件委托，是JavaScript中常用绑定事件的技巧，即把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是dom元素的事件冒泡。使用事件代理可以提高性能。
50 attribute、property
Attribute：dom元素在文档中作为html标签拥有的属性
Property：dom元素在js中作为对象拥有的属性
51 网络七层模型（从下到上）
物理层：通过媒介传输比特，确定机械及电气规范；（比特Bit）
数据链路层：将比特组装成帧和点到点的传递；（帧Frame）
网络层：负责数据包从源到宿的传递和网际互联；（包Packet）
传输层：提供端到端的可靠报文传递和错误恢复；（段Segment）
会话层：建立、管理和终止会话；（会话协议数据单元SPDU）
表示层：对数据进行翻译、加密和压缩；（表示协议数据单元PPDU）
应用层：允许访问OSI环境的手段；（应用协议数据单元APDU）
52 dom操作
创建新节点：
createDocumentFragment（）//创建一个dom片段
createElement（）//创建一个具体的元素
createTextNode（）//创建一个文本节点
添加、移除、替换、插入
appendChild（）、removeChild（）、replaceChild（）、insertBefore（）
查找
getElementById（）、getElementsByTagName（）、getElementsByName（）
53 null、undefined
Null表示无的对象，转化为数值时为0；undefined是一个表示无的原始值，转化为数值时为NaN。当声明的变量还未被初始化时，变量的默认值为undefined。Null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。Undefined表示缺少值，表示此处应该有一个值，只是还没有定义。（变量被声明了，但还没赋值；调用函数时应该提供的参数没有提供，该参数属于undefined；对象没有赋值的属性，则属性的值为undefined；函数没有返回值时，默认返回undefined。）null表示没有对象，即在此处不该有值。（ 作为函数的参数表示该函数的参数不是对象；作为对象原型链的终点。）
54 new操作符具体做了什么
首先，创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型；然后属性和方法被加入到this引用的对象中；接着，新创建的对象由this所引用，且最后隐式地返回this。
55 内存泄露
内存泄漏：指任何对象在你不再拥有或需要它之后仍然存在。垃圾回收器会定期扫描对象，并计算引用了每个对象的其他对象的数量，如果一个对象的引用数量为0，或该对象的唯一引用是循环的，则该对象的内存即可回收。
setTimeout的第一个参数使用字符串而非函数时会引发内存泄露；闭包、控制台日志、循环都可能引起内存泄露。
56 JavaScript对象的创建方式
工厂模式：
构造函数模式：
原型模式：
混合构造函数和原型模式：
动态原型模式：
寄生构造函数模式：
稳妥构造函数模式：
57 JavaScript继承方法
原型链继承：
借用构造函数继承：
组合继承（原型+构造函数）：
原型式继承：
寄生式继承：
寄生组合式继承：
58 同源策略
协议、域名、端口相同，是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。
59 原型、原型链
60
未完待续。。。。。。
原文：http://www.cnblogs.com/haimengqingyuan/p/6390216.html