##2017.10.30收集
面试技巧
1) 一般而言，小公司做笔试题；大公司面谈项目经验；做地图的一定考算法
2) 面试官喜欢什么样的人
ü 技术好、自信、谦虚、善于沟通、表达。
ü 喜欢追究原理
5.2 面试内容
1.2.1简历上的项目
ü 介绍下你的项目吧？
1) 第一步：介绍你项目是干嘛的
2) 第二步：介绍下你负责的是哪块
3) 第三步：介绍下里面都有什么功能，你是怎么实现的，怎么分层的？
1.2.2非技术=处事方法+表达+态度+忠诚度
ü 请你做一下自我介绍
ü 你在找工作时，最重要的考虑因素是什么？
ü 你对我们公司了解多少？你为什么想来我们公司工作？
ü 请谈谈你的优点和缺点？
ü 你为什么离开上一家公司？
ü 工作中曾面临的最大困难是什么？如何解决的？
ü 你的职业目标是什么？（短期和长期）
ü 你是应届生，缺乏经验，如何胜任这份工作？
ü 你对加班的看法？
ü 你对薪资的要求？
ü 你最擅长的技术方向是什么？谈谈你之前做的项目？
ü 你有什么问题要问我？(参考下面思路)
n 我们公司有哪些项目要做了？
n 项目中使用什么技术来开发？
n 我们公司上班时间是怎样的？
n 前端开发目前有多少人在做？
5.3 面试技巧
Ø 1靠的是技术 2靠技巧 3玩的是心理
Ø 怎么回答问题
Ø 知道的问题正面回答，用案例去展示
Ø 不知道的问题说解决思路
Ø 原理性的知识，必须背下来，代码不需要会写，没人要求写原理、底层的代码(这是一个空子，可以钻)
Ø 面试始终保持平静，冷静，镇静，面试再刁难也要保持端坐，面带一丝微笑
Ø 对喜欢的公司最好能表现出对加入目标公司的渴望，对技术的追求
Ø 不能说不知道，可以说：之前了解过，做过这种练习，但没有拿到项目中来用。如果你回答了不知道，那面试官直接就否定你了
Ø 面试官给你出题时，回答问题要思考一段时间，提出思路(这样表现出你是善于思考，交流，有思路)。间接性的试探答案，要的就是这种交互性，注意交流很重要
Ø 加分的地方：对简历上的项目很熟悉，技术点都有所研究，包括封装，细节实现，以及自己编写的小工具
Ø 回答问题后，可再加一些个人看法～比如：json用过吗？怎么用？回答时，可把jsonp也叙述一下
Ø 不想去的公司（小公司，刚刚组建开发团队……）也尽量去面试，为的是积累经验。不同公司会问不同类型的问题，经历多了，你会发现面试很爽，尤其是秒杀他们的时候。
Ø 主管和你谈话～是探测你这个人是否可用……，回答问题要表现良好的一面，一般会问～你将来怎么规划的？回答：三年达到技术总监的水平。技术总监需要做到什么？1.技术过硬2.沟通交流，带领团队……
Ø 你在工作中遇到了哪些难题？？ 一定要提前准备两道，忽悠他！
Ø 为什么离开上家公司？业务单一，太闲了，项目太少，想要更大的提升空间，这时对方肯定会想～你喜欢忙一些是吧，我们这里好多项目让你忙个够。你最好也表现出来～你要努力提升自己，不断超越的念头。
Ø 要有底线别把自己的底线出卖了，要有底气。面试官可能一个劲的谈你的弱点，打击你的心里，这时千万不要乱了阵脚，不要把底线出卖了。既然面试官一直和你聊，那就证明你在他眼中是有价值的。薪资方面该怎么要就怎么要。
Ø 你给自己评个等级，初，中，高，你最次也要说中级，好一点说中级偏上。
Ø 谈薪资：这一步你能多拿1000-2000元，你想：对方都和你谈薪资了，证明你这个人有可用价值。 Eg.对方说给你8K，你完全能再多要1-2K，公司不差那点钱，只要你能给公司带来N多K的利益。
Ø 态度很重要：没人查个人背景(这点不用太担心，大不了重新找)；上班后勤勉工作，最好不要泡在QQ上，不懂赶紧问，别拖延时间，转正期也是适应期多，花点时间在工作上，工作态度非常非常重要
Ø 不见得你会这项技术就录用你，也不见得你不会某项技术就不录用你。面试中要注意和面试官交流，在交流中让对方感触到你基础不错，你有潜力，你逻辑思维不错。以上这些你做到了，如果不是那家公司只招一个某个专项技术的人，那你百分之八九十会被录用的。
5.4 面试中需要注意的问题
Ø 音量大小
Ø 语速控制
Ø 不说“我想想”，“好像是”，“可能”，“应该”，“估计”。。。等不肯定的语汇
Ø 用讲故事的方式主导面试官司的思维
Ø 面试的基本流程
1) 自我介绍
姓名、年龄、哪年毕业、哪年哪月入职第一家公司第一个项目开始介绍。。。
为何离职？介绍到最后一个项目的时候开始拿出来演示
2) 技术面试
用项目中的实例来回答面试官的问题
3) 谈薪
上家公司的薪资是多少？期望薪资是多少？
常见排序算法的时间复杂度,空间复杂度
移动端性能优化
▪ 尽量使用css3动画，开启硬件加速。
▪ 适当使用touch事件代替click事件。
▪ 避免使用css3渐变阴影效果。
▪ 可以用transform: translateZ(0)来开启硬件加速。
▪ 不滥用Float。Float在渲染时计算量比较大，尽量减少使用
▪ 不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
▪ 合理使用requestAnimationFrame动画代替setTimeout
▪ CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
▪ PC端的在移动端同样适用，相关阅读：如何做到一秒渲染一个移动页面
1：为何选择前端这个方向和对前端的理解
为什么：
第一的话就是对前端很感兴趣，之前也接触过其他的语言，但是直到接触到前端才发现真的有兴趣做下去，兴趣是一个人最好的老师，
第二的话前端很有前途，像现在nodejs，rn，微信小程序这类工具和框架可以让前端进行后端和移动开发，所以我觉得前端的前途会更多一点。
理解：
首先前端工程师最核心的技能还是：Html、CSS、JS。前端负责的是用户可以看到的部分，所以也是最接近用户的工程师。同时在产品研发流程中前端要同时与产品、设计、后端等很多人合作。
对自己未来的规划是怎样的
对于刚毕业的人来说，前两年是很重要的，先打好基础，多提升js能力。三至四年在提升JS能力的同时，开始要往多方面发展，前端工程师远远不仅是JS而已。制作一个性能高、交互好、视觉美的页面，需要从前端框架选型、架构设计、构建工具，到后端通信机制、设计与交互、网络和浏览器优化等各方面的知识。一专多长才是前端工程师的终极目标。
（内容2）——————
稍微比较全的面试题，还在总结中！
HTML+CSS
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；
2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的html文档
加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug
4.行内元素有哪些？块级元素有哪些？CSS的盒模型？
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding
5.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
区别 ：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可
6.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高
7.前端页面有哪三层构成，分别是什么？作用是什么？
结构层 Html 表示层 CSS 行为层 js
8.css的基本语句构成是？
选择器{属性1:值1;属性2:值2;……}
9.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)
10.写出几种IE6 BUG的解决方法
1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
11.标签上title与alt属性的区别是什么？
Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息
12.描述css reset的作用和用途。
Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一
13.解释css sprites，如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
14.浏览器标准模式和怪异模式之间的区别是什么？
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式
15.你如何对网站的文件和资源进行优化？期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
16.什么是语义化的HTML？
直观的认识标签 对于搜索引擎的抓取有好处
17.清除浮动的几种方式，各自的优缺点
浮动的表现，元素排成了一行
元素内容超出了容器边框，高度坍塌
1.在浮动元素后给空标签清除浮动 clear:both（理论上能清除任何浮动，弊端是增加无意义的标签），或者用afert伪元素+clear:both组合法清除浮动(用于非IE浏览器)
2.给浮动元素添加样式float:none
3.通过使父标签浮动也可以清理子类浮动，将空间撑开。例如让父标签生成BFC（IE8+），display:block、overflow:auto/hidden、zoom:1（触发haslayout(IE6/IE7) 兼容IE）
zoom:1的作用： 触发IE下的hasLayout。zoom是IE浏览器专有属性，可以设置或检索对象的缩放比例。 当设置了zoom的值之后，所设置的元素就会扩大或缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。
4.父元素设置适合的height
浮动有什么用？
浮动是让某个div元素脱离标准流，漂浮在标准流之上，常用来文字环绕或布局效果。
浮动过程原理就一句话：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。
浮动怎样产生的呢？
一般浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。
浮动产生负作用
1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2、边框不能撑开
如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置了值但无效，不能正确显示
Javascript
1.javascript的typeof返回哪些数据类型
Object number function boolean underfind string
2.例举3种强制类型转换和2种隐式类型转换？
强制（parseInt,parseFloat,number）
隐式（== - ===）
3.split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串
4.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
5.事件绑定和普通事件有什么区别
普通添加事件的方法：
var btn = document.getElementById("hello");
btn.onclick = function(){
alert(1);
}
btn.onclick = function(){
alert(2);
}
执行上面的代码只会alert 2
事件绑定方式添加事件：
var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
alert(1);
},false);
btn.addEventListener("click",function(){
alert(2);
},false);
执行上面的代码会先alert 1 再 alert 2
普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。
6.IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
7.IE和标准下有哪些兼容性的写法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
列举IE 与其他浏览器不一样的特性？
-
IE支持
currentStyle，FIrefox使用getComputStyle -
IE 使用
innerText，Firefox使用textContent -
滤镜方面：IE:
filter:alpha(opacity= num)；Firefox：-moz-opacity:num -
事件方面：IE：
attachEvent：火狐是addEventListener -
鼠标位置：IE是
event.clientX；火狐是event.pageX -
IE使用
event.srcElement；Firefox使用event.target -
IE中消除list的原点仅需margin:0即可达到最终效果；FIrefox需要设置
margin:0;padding:0以及list-style:none -
CSS圆角：ie7以下不支持圆角
8.ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的，一个是类似修改密码的
9.call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
两者在作用上是相同的，但在参数上有区别的。
对于第一个参数意义都一样，但对第二个参数：
apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。
如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])
同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入
10.ajax请求时，如何解析json数据
使用eval、JSON.parse 鉴于安全性考虑 使用parse更靠谱
13.事件委托是什么
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
//利用冒泡的原理，把事件加到父级上，触发执行效果。
//1.可以大量节省内存占用，减少事件注册。
//2.可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。
var ul = document.querySelector('ul');
var list = document.querySelectorAll('ul li');
ul.addEventListener('click', function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElemnt;
for(var i = 0, len = list.length; i < len; i++){
if(list[i] == target){
alert(i + "----" + target.innerHTML);
}
}
});
14.闭包是什么，有什么特性，对页面有什么影响，应用场景
闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包常见方式,就是在一个函数内部创建另一个函数.
应用场景 设置私有变量和方法
不适合场景：返回闭包的函数是个非常大的函数
闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
受JavaScript链式作用域结构的影响，父级变量中无法访问到子级的变量值，为了解决这个问题，才使用闭包这个概念
15.如何阻止事件冒泡和默认事件
canceBubble、return false
16.添加 删除 替换 插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
17.解释jsonp的原理，以及为什么不是真正的ajax
动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作
18.javascript的本地对象，内置对象和宿主对象
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等
19.document load 和document ready的区别
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)
20.”==”和“===”的不同
前者会自动转换类型
后者不会
21.javascript的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
::before 和:before有什么区别？
相同点
都可以用来表示伪类对象，用来设置对象前的内容
:befor和::before写法是等效的
不同点
:befor是Css2的写法，::before是Css3的写法
:before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好
加分项
伪类对象要配合content属性一起使用
伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
伪类对象的特效通常要使用:hover伪类样式来激活
.test:hover::before { /* 这时animation和transition才生效 */ }
（内容3）——————
http://bbs.blueidea.com/thread-3107428-1-1.html以下都是网上整理出来的JS面试题，答案仅供参考。
4，IE与FF脚本兼容性问题
obj.addEventListener(sEv, fn, false);
obj.attachEvent('on'+sEv,fn);
detachevet
removeEventListener
DOMContentLoaded
onreadystatechange complete
DOMMouseScroll FF
onmousewheel 非FF
event.wheelDelta 上滚120 下-120
event.detail 上滚-3 下3
obj.getCurrentStyle[attr]
getComputedStyle(obj,false)[attr]
XMLHttpRequest
ActiveXObject('Mircorsoft.XMLHttp')
FF本地能设置读取cookie 其他不行
event ev
事件源
srcElement||target
toElement||relatedTarget
obj.setCapture();只有ie认
obj.releaseCapture();
5，规避javascript多人开发函数重名问题
命名空间
封闭空间
js模块化mvc（数据层、表现层、控制层）
seajs
变量转换成对象的属性
对象化
6，javascript面向对象中继承实现
function Person(name){
this.name = name;
}
Person.prototype.showName = function(){
alert(this.name);
}
function Worker(name, job){
Person.apply(this,arguments)
this.job = job;
}
for(var i in Person.prototype){
Worker.prototype = Person.prototype;
}
new Worker('sl', 'coders').showName();
js继承方式及其优缺点
原型链继承的缺点
一是字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。
借用构造函数（类式继承）
借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。所以我们需要原型链+借用构造函数的模式，这种模式称为组合继承
组合式继承
组合式继承是比较常用的一种继承方法，其背后的思路是 使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。
7，FF下面实现outerHTML
var oDiv = document.createElement('div');
var oDiv1 = document.getElementById('div1');
var oWarp = document.getElementById('warp');
oWarp.insertBefore(oDiv, oDiv1);
oDiv.appendChild(oDiv1);
var sOut = oDiv.innerHTML;
oWarp.insertBefore(oDiv1, oDiv);
oWarp.removeChild(oDiv);
alert(sOut);
8，编写一个方法 求一个字符串的字节长度
假设一个中文占两个字节
var str = '22两是';
alert(getStrlen(str))
function getStrlen(str){
var json = {len:0};
var re = /[\u4e00-\u9fa5]/;
for (var i = 0; i < str.length; i++) {
if(re.test(str.charAt(i))){
json['len']++;
}
};
return json['len']+str.length;
}
10，写出3个使用this的典型应用
事件： 如onclick this->发生事件的对象
构造函数 this->new 出来的object
call/apply 改变this
12，JavaScript中如何检测一个变量是一个String类型？请写出函数实现
typeof(obj) == 'string'
obj.constructor == String;
网站设计八步骤 https://zhidao.baidu.com/question/12980607.html
一、确定网站主题
二、搜集材料
三、规划网站
四、选择合适的制作工具
五、制作网页
六、上传测试
七、推广宣传
八、维护更新
内容分析：分清展现在网络中内容的层次和逻辑关系
结构设计：写出合理的html结构代码
布局设计：使用html+css进行布局
样式设计：首先要使用reset.css
交互设计：鼠标特效
行为设计：js代码，ajax页面行为和从服务器获取数据
最后：测试兼容性，优化性能；
2.1你能描述一下你制作网站 制作网站的基本流程吗？
步骤http://jingyan.baidu.com/article/c275f6bac69f28e33d7567ef.html
a.网站内容的设计;
b.域名的申请注册;
c.网站空间地址;
d.网站的运营维护;
e.网站的推广;
3.你能描述一下渐进增强和优雅降级之间的不同吗?
什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
4. 请解释一下什么是语义化的HTML。
内容使用特定标签，通过标签就能大概了解整体页面的布局分布
6. 你如何对网站的文件和资源进行优化？
这道题考察 雅虎军规 1.尽可能减少http请求次数，将css, js, 图片各自合并 2.使用CDN，降低通信距离 3.添加Expire/Cache-Control头 4.启用Gzip压缩文件 5.将css放在页面最上面 6.将script放在页面最下面 7.避免在css中使用表达式 8.将css, js都放在外部文件中 9.减少DNS查询 10.最小化css, js，减小文件体积 11.避免重定向 12.移除重复脚本 13.配置实体标签ETag 14.使用AJAX缓存，让网站内容分批加载，局部更新
什么是Etag？
当发送一个服务器请求时，浏览器首先会进行缓存过期判断。浏览器根据缓存过期时间判断缓存文件是否过期。
情景一：若没有过期，则不向服务器发送请求，直接使用缓存中的结果，此时我们在浏览器控制台中可以看到 200 OK(from cache) ，此时的情况就是完全使用缓存，浏览器和服务器没有任何交互的。
情景二：若已过期，则向服务器发送请求，此时请求中会带上①中设置的文件修改时间，和Etag
然后，进行资源更新判断。服务器根据浏览器传过来的文件修改时间，判断自浏览器上一次请求之后，文件是不是没有被修改过；根据Etag，判断文件内容自上一次请求之后，有没有发生变化
情形一：若两种判断的结论都是文件没有被修改过，则服务器就不给浏览器发index.html的内容了，直接告诉它，文件没有被修改过，你用你那边的缓存吧—— 304 Not Modified，此时浏览器就会从本地缓存中获取index.html的内容。此时的情况叫协议缓存，浏览器和服务器之间有一次请求交互。
情形二：若修改时间和文件内容判断有任意一个没有通过，则服务器会受理此次请求，之后的操作同①
① 只有get请求会被缓存，post请求不会
Expires和Cache-Control
Expires要求客户端和服务端的时钟严格同步。HTTP1.1引入Cache-Control来克服Expires头的限制。如果max-age和Expires同时出现，则max-age有更高的优先级。
Cache-Control: no-cache, private, max-age=0
ETag: abcde
Expires: Thu, 15 Apr 2014 20:00:00 GMT
Pragma: private
Last-Modified: $now // RFC1123 format
ETag应用:
Etag由服务器端生成，客户端通过If-Match或者说If-None-Match这个条件判断请求来验证资源是否修改。常见的是使用If-None-Match。请求一个文件的流程可能如下：
====第一次请求===
1.客户端发起 HTTP GET 请求一个文件；
2.服务器处理请求，返回文件内容和一堆Header，当然包括Etag(例如"2e681a-6-5d044840")(假设服务器支持Etag生成和已经开启了Etag).状态码200
====第二次请求===
客户端发起 HTTP GET 请求一个文件，注意这个时候客户端同时发送一个If-None-Match头，这个头的内容就是第一次请求时服务器返回的Etag：2e681a-6-5d0448402.服务器判断发送过来的Etag和计算出来的Etag匹配，因此If-None-Match为False，不返回200，返回304，客户端继续使用本地缓存；流程很简单，问题是，如果服务器又设置了Cache-Control:max-age和Expires呢，怎么办
答案是同时使用，也就是说在完全匹配If-Modified-Since和If-None-Match即检查完修改时间和Etag之后，
服务器才能返回304.(不要陷入到底使用谁的问题怪圈)
为什么使用Etag请求头?
Etag 主要为了解决 Last-Modified 无法解决的一些问题。
栈和队列的区别?
栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。
队列先进先出，栈先进后出。
栈只允许在表尾一端进行插入和删除，而队列只允许在表尾一端进行插入，在表头一端进行删除
栈和堆的区别？
栈区（stack）— 由编译器自动分配释放 ，存放函数的参数值，局部变量的值等。
堆区（heap） — 一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收。
堆（数据结构）：堆可以被看成是一棵树，如：堆排序；
栈（数据结构）：一种先进后出的数据结构。
7. 为什么利用多个域名来存储网站资源会更有效？
确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他域名访问网站
8.请说出三种减低页面加载时间的方法
a、压缩css、js文件
b、合并js、css文件，减少http请求
c、外部js、css文件放在最底下
d、减少dom操作，尽可能用变量替代不必要的dom操作
e、css sprite也算一种，多域名也算一种吧。
9.什么是FOUC？你如何来避免FOUC？
由于css引入使用了@import 或者存在多个style标签以及css文件在页面底部引入使得css文件加载在html之后导致页面闪烁、花屏
用link加载css文件，放在head标签里面
10.文档类型的作用是什么？你知道多少种文档类型？
影响浏览器对html代码的编译渲染
html2.0、xHtml、html5
11.浏览器标准模式和怪异模式之间的区别是什么？
盒模型解释不同
1.你使用过那些Javascript库？
jquery seajs yui
2.哈希表
具有散列（映射）特性的数据模型
3.闭包
子函数能被外部调用到，则该作用连上的所有变量都会被保存下来。
4.请解释什么是Javascript的模块模式，并举出实用实例。
js模块化mvc（数据层、表现层、控制层）
seajs
命名空间
5.你如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？
对内：模块模式
对外：继承
用过哪些设计模式？
工厂模式：
主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。
工厂模式解决了重复实例化的问题 ，但还有一个问题,那就是识别问题，因为根本无法 搞清楚他们到底是哪个对象的实例。
function createObject(name,age,profession){
//集中实例化的函数
var obj = new Object();
obj.name = name;
obj.age = age;
obj.profession = profession;
obj.move = function () {
return this.name + ' at ' + this.age + ' engaged in ' + this.profession;
};
return obj;
}
var test1 = createObject('trigkit4',22,'programmer');//第一个实例
var test2 = createObject('mike',25,'engineer');//第二个实例构造函数模式
使用构造函数的方法 ，即解决了重复实例化的问题 ，又解决了对象识别的问题，该模式与工厂模式的不同之处在于：
1.构造函数方法没有显示的创建对象 (new Object());
2.直接将属性和方法赋值给 this 对象;
3.没有 renturn 语句。
9.你如何优化自己的代码？
代码重用
避免全局变量（命名空间，封闭空间，模块化mvc..）
拆分函数避免函数过于臃肿
注释
10.你能解释一下JavaScript中的继承是如何工作的吗？
子构造函数中执行父构造函数，并用call\apply改变this
克隆父构造函数原型上的方法
11.useragent是什么
User Agent中文名为用户代理，简称 UA，它是一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。
一些网站常常通过判断 UA 来给不同的操作系统、不同的浏览器发送不同的页面，因此可能造成某些页面无法在某个浏览器中正常显示，但通过伪装 UA 可以绕过检测。
浏览器的 UA 字串标准格式为： 浏览器标识 (操作系统标识; 加密等级标识; 浏览器语言) 渲染引擎标识 版本信息
12.请尽可能详尽的解释AJAX的工作原理。
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState === 4 & xmlHttp.status === 200){
}
}
//使用promise封装
function getJSON(url) {
return new Promise(function(resolve, reject) {
var XHR = new XMLHttpRequest();
XHR.open('GET', url, true);
XHR.send();
XHR.onreadystatechange = function() {
if (XHR.readyState == 4) {
if (XHR.status 200) {
try {
var response = JSON.parse(XHR.responseText);
resolve(response);
} catch (e) {
reject(e);
}
} else {
reject(new Error(XHR.statusText));
}
}
}
})
}
getJSON(url).then(res => console.log(res));
当前状态readystate
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
常用状态码status
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改）
ajax的缺点
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。
在IE浏览器下，如果请求的方法是GET，并且请求的URL不变，那么这个请求的结果就会被缓存。解决这个问题的办法可以通过在URL末尾添加上随机的时间戳参数('t'= + new Date().getTime())
讲讲304缓存的原理
服务器首先产生ETag，服务器可在稍后使用它来判断页面是否已经被修改。本质上，客户端通过将该记号传回服务器要求服务器验证其（客户端）缓存。
304是HTTP状态码，服务器用来标识这个文件没修改，不返回内容，浏览器在接收到个状态码后，会使用浏览器已缓存的文件
客户端请求一个页面（A）。 服务器返回页面A，并在给A加上一个ETag。 客户端展现该页面，并将页面连同ETag一起缓存。 客户再次请求页面A，并将上次请求时服务器返回的ETag一起传递给服务器。 服务器检查该ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304（未修改——Not Modified）和一个空的响应体。
19: 说说你还知道的其他状态码，状态码的存在解决了什么问题
302/307 临时重定向
301 永久重定向
借助状态码,用户可以知道服务器端是正常处理了请求,还是出现了什么错误
38: 简单介绍一下promise，他解决了什么问题
Promise，就是一个对象，用来传递异步操作的消息。有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。
有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。
45： XSS和CSRF攻击
xss：比如在一个论坛发帖中发布一段恶意的JavaScript代码就是脚本注入，如果这个代码内容有请求外部服务器，那么就叫做XSS
写一个脚本将cookie发送到外部服务器这就是xss攻击但是没有发生csrf
防范：对输入内容做格式检查 输出的内容进行过滤或者转译
CSRF：又称XSRF，冒充用户发起请求（在用户不知情的情况下）,完成一些违背用户意愿的请求 如恶意发帖，删帖
比如在论坛发了一个删帖的api链接 用户点击链接后把自己文章给删了 这里就是csrf攻击没有发生xss
防范：验证码 token 来源检测
web开发中会话跟踪的方法有哪些
- cookie
- session
- url重写
- 隐藏input
- ip地址
21: 说说content-box和border-box，为什么看起来content-box更合理，但是还是经常使用border-box
content-box 是W3C的标准盒模型 元素宽度=内容宽度+padding+border
border-box 是ie的怪异盒模型 他的元素宽度等于内容宽度 内容宽度包含了padding和border
比如有时候在元素基础上添加内距padding或border会将布局撑破 但是使用border-box就可以轻松完成
常见web安全及防护原理
sql注入原理
就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。
总的来说有以下几点：
1.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。
2.永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
3.永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
4.不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。
XSS原理及防范
Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。比如：攻击者在论坛中放一个
看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，
当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。
XSS防范方法
首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击。
首先，避免直接在cookie 中泄露用户隐私，例如email、密码等等。
其次，通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值，不可能拿来重放。
如果网站不需要再浏览器端对cookie 进行操作，可以在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。
尽量采用POST 而非GET 提交表单
XSS与CSRF有什么区别吗？
XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。
要完成一次CSRF攻击，受害者必须依次完成两个步骤：
1.登录受信任网站A，并在本地生成Cookie。
2.在不登出A的情况下，访问危险网站B。
CSRF的防御
▪ 服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。
▪ 通过验证码的方法
HTTP和HTTPS
HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。
默认HTTP的端口号为80，HTTPS的端口号为443。
为什么HTTPS安全
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性
（内容4）——————
前端应聘者看过来，近一个星期面试总结
各个浏览器中css表现的差异性(浏览器兼容问题)：
(http://www.douban.com/group/topic/4629864/)
(http://blog.csdn.net/chuyuqing/article/details/37561313)
(http://www.iefans.net/ie-9-css-bug/)
1,各浏览器下，margin与padding显示差异
解决办法:CSS reset
2,block+float+水平margin,IE6里的间距比超过设置的间距(横向布局)
解决办法:diaplay:inline
(不用担心内联元素无宽高，因为float会让inline元素haslayout,让inline元素表现的和inline-block元素一样有宽高和垂直内外边距)
[我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题]
3,inline+(display:block)+float+水平margin,IE6里的间距比超过设置的间距
说明:该情况与上面的差不多,只是此处的元素一开始是内联元素,加了display:block的CSS属性.因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe
解决办法:display:inline;display:table;
4,IE6对margin:0 auto;不会正确的进行解析
解决办法：
在父元素中使用text-align:center,在元件中使用text-align:left
5,无法设置微高(一般小于10px)：
说明:当设置元素高度小于10px时，IE6和IE7不受控制，超出设置的高度
产生原因:IE不允许原件的高度小于字体的高度
解决办法1:设置字体大小:font-size:0;
解决办法2:给超出高度的标签设置overflow:hidden
解决办法3:设置行高line-height小于你设置的高度
6,子元件撑破父元件
原因:父元件设置了overflow:auto属性,子元件会从父元件中撑破出来
解决办法:父元件中设置position:relative;
7,IE无法解析min-height和min-width
解决办法1:
selector{
min-height:150px;
height:auto !important;
height:150px;
}
解决办法2：
selector{
min-height:150px;
height:150px;
}
heml>body selector{
height:auto;
}
8,使用ul li时,li与li之间会空行
解决办法1:设置li selector{height:**px;}
解决办法2:li selector{float:left;clear:left;}
解决办法3:li{display:inline}
css sprite是什么,有什么优缺点
概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
优点：
- 减少HTTP请求数，极大地提高页面加载速度
- 增加图片信息重复度，提高压缩比，减少图片大小
- 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
缺点：
- 图片合并麻烦
- 维护麻烦，修改一个图片可能需要从新布局整个图片，样式
css hack原理及常用hack
原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。常见的hack有1）属性hack。2）选择器hack。3）IE条件注释
CSS hack:
+:IE6,IE7
_:IE6
\9:IE6,IE7,IE8
\0:IE8,IE9
\9\0:IE9
!important:All(IE6是有条件的支持)
常用的CSS reset:
(http://blog.bingo929.com/css-reset-collection.html)
margin:0;
padding:0;
border:0;
...
实现三个DIV等分排布在一行（考察border-box）
1.设置border-box width33.3%
2.flexbox flex：1
设置width的flex元素，flex属性值是多少
flex属性是flex-grow, flex-shrink 和 flex-basis的简写
flex-grow属性定义项目的放大比例，默认为0
flex-shrink属性定义了项目的缩小比例，默认为1
flex-basis属性定义了项目的固定空间
怎么实现从一个DIV左上角到右下角的移动，有哪些方法，都怎么实现
改变left值为window宽度-div宽度 top值为window高度-div高度
jquery的animate方法
css3的transition
盒子模型
1）盒子模型有两种，W3C和IE盒子模型
（1）W3C定义的盒子模型包括margin、border、padding、content ，元素的width=content的宽度
（2）IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度，元素的width=content+padding+border
2）个人理解和心得，要记住在面试时，我们和面试官是平等的，而且面试官也非常欣赏喜欢交谈的人，在面试的时候能够去表达自己的想法，往往会给面试官留下非常好的印象。例如上面的盒子模型，示范如下：
我个人认为W3C定义盒子模型与IE定义的盒子模型，IE定义的比较合理，元素的宽度应该包含border（边框）和padding（填充），这个和我们现实生活的盒子是一样的，W3C也认识到自己的问题了，所以在CSS3中新增了一个样式box-sizing，包含两个属性content-box 和 border-box。
（1） content-box 元素的width=content+padding+border
.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }
（2） border-box 元素的width=width（用样式指定的宽度）
.test1{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }
加分项回答（自己比较独到理解）
1.对于行级元素，margin-top和margin-bottom对于上下元素无效，margin-left和margin-right有效
2.对于相邻的块级元素margin-bottom和margin-top 取值方式
1） 都是正数： 取最大值
距离=Math.max(margin-bottom,margin-top)
2） 都是负数： 取最小值
距离=Math.min(margin-bottom,margin-top)
3）上面是正数，下面是负数或者 上面是负数，下面是正数： 正负相加
距离=margin-bottom+margin-top
对于盒子的选择：
需要依靠最上面的Doctype来看,如果没有声明Doctype,则按照浏览器会根据自己的行为去理解网页;声明后各浏览器会按照W3C标准去解释你的盒子,网页就能在各个浏览器中显示一致了
JS的数据类型(http://blog.sina.com.cn/s/blog_6fd4b3c10101d0va.html)
基本数据类型(5)：string，number，null，undefined，boolean
引用类型：object，array，function；
数据类型 typeof
string string
number number
boolean boolean
undefined undefined
null object
object object
array object
function function
(NaN) (number)
(Error) (Function)
区分基本数据类型：typeof;
区分引用数据类型：instanceof（instanceof还可以检测到具体的是什么实例，可以检测是否是正则表达式）
eg:[1,2,3,4] instanceof Array; //true
\d{3} instanceof RegExp; //true
区分各数据类型：
Object.prototype.toString.call(val).slice(8,-1)；
eg:Object.prototype.toString.call([1,2,3]).slice(8,-1); //Array
obj instanceof typeName;
eg:[1,2,3] instanceof Array; //true
obj.constructor.toString().indexof(typeName);
eg:[1,2,3].constructor.toString().indexof("Array");
//9(只要值不为-1,即为typeName类型)
会不会SEO(搜索引擎优化)
1,站内优化
使得网站在搜索引擎上的友好度和站内用户的良好体验度上升
让网站在搜索引擎的排名靠前并且得到很好的客户转换率
2,站外优化
通过SEO手段帮助网站和网站所属企业进行品牌推广
前端需要注意哪些SEO
- 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
- 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
- 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
- 重要内容不要用js输出：爬虫不会执行js获取内容
- 少用iframe：搜索引擎不会抓取iframe中的内容
- 非装饰性图片必须加alt
- 提高网站速度：网站速度是搜索引擎排序的一个重要指标
html5新特性？
1，webStorage(sessionStorage,localStorage);
2，onmessage,postmessage解决跨域问题;
3，新的文档类型 (New Doctype)：
之前的声明文档类型：在H5中失效，H5只需要用
即可完成文档声明
4，新增一系列语义化标签：header,footer,figure+figcaption,article,nav等
5，新增属性 ：
占位符 (placeholder：
在HTML4或XHTML中，你需要用JavaScript来给文本框添加占位符。
比如，你可以提前设置好一些信息，当用户开始输入时，文本框中的文字就消失。而在HTML5中,新的“placeholder”就简化了这个问题；
input新增属性：required(必填项);pattern(正则限定输入)；
6,audio(音频)与video(视频);
7,
标识中的语句可以调用页面上其它地方定义的任何函数(或者从.js文件中导入的函数)
这种绑定方式意味着您必须为每一个元素和每一个事件创建一个
并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。
callback({"name":"hax","gender":"Male"})
