A. 前端面试题 如何优化一个网站
减少代码冗余，压缩css与js，尽量使用外部css和js,图片尽量使用精灵技术,减少页面的请求次数，js代码尽量放到页面底部，不用轻易使用iframe，图片尽量使用jpg和gif，不要使用png.
B. 前端面试题，求大佬给个结果
第一题 true false false true
第二题 true 报错 false false true false
之前是为了赶着回答，所以随便答了，后来检查，发现也是对的了。后面说说分析：
第一个问题：
先分析最简单的页面代码function A(){};和function B(){};只是普通的函数A和B。
然后就是A的原型。
a是普通的构造函数。
先给你科普一下基础，我们创建的每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象。这里面的关键字是指针！而原型属性的作用是，让对象A包含一些共享的属性和方法，而这里就是共享了方法，A原型里面的fun。
PS：有时候，面试官还会把a = new A()放在，A.prototype前面，这样就会导致原型指针混乱的问题，但是你这个问题，相对简单，没有这种情况，所以这里我也不说明了。
然后分析，问题的答案：
1、必定是true，因为每个构造函数都有一个constructor属性，且指向A。但是如果在原型对象里面自己去设置constructor属性，这样就会导致，指向Object对象，且属性变为可枚举的，如果你理解了这里，第二个问题就简单了。
2、false。上面已经提过了，如果在A的原型里面设置constructor，指向的对象肯定是Object，不信的话，你可以试试console.log(A.prototye.constructor === Object)，这样一定是true。
3、就是对hasOwnProperty的理解。hasOwnProperty是检测a对象是否含有'constructor'这个属性，他检测的不是原型，而原型仅仅是一个指针，所以是false。
4、没啥好说的，很简单，就是true。
第二个问题
先对题目进行分析，new B()产生一个构造函数 而A的原型指向该构造函数
然后，var b = new A(); b和上面的a差不多 只不过A有点改变。
然后分析，答案：
1、在这里我必须说明一下A.prototye ={ } //无论对象里面是什么或者做了什么事，他一定有一个constructor属性，如果你不主动设置，他一定指向自己，也就是A，不信你自己实验，所以一定是true。
2、我实在没有发现代码中，有类似B.prototype的语句，但是B下面还是有原型属性B.prototype，只是这个属性没有被创建而已。为了确保正确，我查了查，constructor的概念，原来constructor的作用是返回对创建此对象的数组函数的引用。这里涉及了一个关键字，就是创建，所以我肯定这个问题的答案是报错的了。因为这个原型是存在的，但没被创建。而且constructor的概念，提及了一个重要的概念，引用，我不做说明了，自己网络。
3、其实这里只是绕了一个圈，等你绕过来的时候，他就是问A.prototye = new B();这里的问题了，这时候明显指向了B，不信，可以把A改为B 一定是true。而这个问题的答案是false。
4、不要被指针影响了，hasOwnProperty检测的不是原型指针，所以一定是false。
5、没什么好说的，明显为true
6、还是那句原型只是一个指针，b不可能是B的实例，只是A的原型指向了B
综合，本问题，主要考察的是对原型指针的理解，还有对constructor的认识。
C. 前端面试问题
大数据（big data），指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产
大数据技术可以帮助企业准确定位意向客户;通过数据分析我们可以建立城市规划、解决医疗发展难题;传统行业转型互联网也可以利用大数据价值。所以大数回据技术被广泛应用在各行各业，现在越来越多的企业开始重视大数据技术，并招聘大数据人才。
D. Web前端岗位面试题有哪些
其实，不管是什么样的面试形，问的问题都差不多，万变不离其宗，都有规律可寻。其实对所有的面试官而言，只有一个目的：在最短的时间里了解到你最多的信息。想高效率的准备面试，先从这七个大方面着手吧！
一、基本情况
1、请用最简洁的语言描述您从前的工作经历和工作成果。
二、专业背景
您认为此工作岗位应当具备哪些素质？
三、工作模式
您平时习惯于单独工作还是团队工作？
四、价值取向
您对原来的单位和上司的看法如何？
五、资质特性
您如何描述自己的个性？
六、薪资待遇
是否方便告诉我您目前的待遇是多少？
七、背景调查
您是否介意我们通过您原来的单位迚行一些调查？
95%的面试基本上都离不开这些问题，当然还有可能问一些专业问题，我想如果你做过的话应该都不是什么难事，一般面试官都不会过多的问专业方面的问题的。
E. 求《前端程序员面试笔试宝典》
本书是一本前端程序员面试笔试的应试类用书，在内容上，除了讲解如何解答前端程序员面试笔试问题，还引入了相关知识点辅以说明，让读者能够更加容易理解。
本书包括前端程序员面试笔试过程中各类知识点，在题目的广度上，搜集了近3年来多家IT企业针对前端岗位的笔试面试真题。在讲解的深度上，本书由浅入深，庖丁解牛式地分析每一个知识点，并提炼归纳，同时，引入相关知识点，并对其进行深度剖析，让读者不仅能够理解这个知识点，还能在遇到相似问题的时候，也能游刃有余地解决。本书根据知识点进行分类，结构合理，条理清晰，便于读者学习与查阅。
F. 你遇到过哪些比较有水准的前端面试题
我原来面试工作时候，面试官出了一个这样的题，题目是:我儿子叫你的儿子叫爸爸。当时我对于这个问题思考了很久。这个题目答案:是男问女的就是公公，女问女就是婆婆，男问男就是爸爸，女问男就是妈妈。这个题很好的考验了面试者的逻辑思考能力，还有看待事物的全面性，非常不错。
G. web前端面试经常问到的面试题有哪些
Web前端经常被问到的面试题及答案
一、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)
二、Javascript
1.javascript的typeof返回哪些数据类型
Object number function boolean underfind
2.例举3种强制类型转换和2种隐式类型转换?
强制(parseInt,parseFloat,number)
隐式(== – ===)
3.split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串
4.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
5.事件绑定和普通事件有什么区别
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
8.ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的，一个是类似修改密码的
9.call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax请求时，如何解释json数据
使用eval parse 鉴于安全性考虑 使用parse更靠谱
11.b继承a的方法
12.写一个获取非行间样式的函数
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
H. Web前端最全面试宝典- Html篇
HTML
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.行内元素有哪些?块级元素有哪些?
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
5.HTML全局属性(global attribute)有哪些
参考资料：MDN: html global attribute或者W3C HTML global-attributes
accesskey
:设置快捷键，提供快速访问元素如aaa在windows下的firefox中按alt + shift + a
可激活元素
class
:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素
contenteditable
: 指定元素内容是否可编辑
contextmenu
: 自定义鼠标右键弹出菜单内容
data-*
: 为元素增加自定义属性
dir
: 设置元素文本方向
draggable
: 设置元素是否可拖拽
dropzone
: 设置元素拖放类型： , move, link
hidden
: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果
id
: 元素id，文档内唯一
lang
: 元素内容的的语言
spellcheck
: 是否启动拼写和语法检查
style
: 行内css样式
tabindex
: 设置元素可以获得焦点，通过tab可以导航
title
: 元素相关的建议信息
translate
: 元素和子孙节点内容是否需要本地化
6.什么是web语义化,有什么好处
web语义化是指通过HTML标记表示页面包含的信息，包含了HTML标签的语义化和css命名的语义化。 HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构 css命名的语义化是指：为html标签添加有意义的class，id补充未表达的语义，如Microformat通过添加符合规则的class描述信息 为什么需要语义化：
去掉样式后页面呈现清晰的结构
盲人使用读屏器更好地阅读
搜索引擎更好地理解页面，有利于收录
便团队项目的可持续运作及维护
7.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 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation
移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架）：
如何区分：
DOCTYPE声明新增的结构元素、功能元素
8. HTML5 存储类型有什么区别？
HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案：
localStorage - 没有时间限制的数据存储，数据永远不会过期，关闭浏览器也不会丢失
sessionStorage - 针对一个 session 的数据存储，同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
9. HTML5 标准提供了哪些新的API？
1：canvas，不用多说，可以画出很多绚丽的图形，甚至可以直接做出伪3D游戏。
2：媒体控制，也很好理解(直译就是回放功能，假如只用html5.0以下的标签写，以前的音乐播放是不可能实现滚动条的。)
3：离线网页程序，可以把资源文件完全缓存在客户端，并且通过js的一些方法清空缓存
4：文档编辑，应该是更好的支持对文档的编辑。
5：拖动，可以将文件拖动到某些区域上传
6：跨文档请求，websocket，一种更加高效的通讯方式
7：历史管理，可以通过js管理和插入历史记录
8：MIME头自定义
9：客户端数据存储，localstoage sessionstoage
10：地理位置共享
11：本地数据库
12：索引数据库
10.HTML5 应用程序缓存和浏览器缓存有什么区别？
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
11.常用那几种浏览器测试？有哪些内核(Layout Engine)?
(Q1)浏览器：IE，Chrome，FireFox，Safari，Opera。
(Q2)内核：Trident，Gecko，Presto，Webkit。
12.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间；
13.如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等本地存储方式
14.请写出localStorage对象的常用方法。
存储 - localStorage.setItem(key, value) - 如果key存在，更新value
获取 - localStorage.getItem(key) - 如果key不存在，返回null
删除 - localStorage.removeItem(key) - 删除key对应的数据
全部清除 - localStorage.clear() - 清空localStorage中所有数据
遍历 - localStorage.length
遍历 - localStorage.key(index)
15.如何在HTML5中启用应用程序缓存？
<html manifest="fileName.appcache">
每个指定了manifest的页面在用户对其访问时都会被缓存。
.appcache是manifest文件的扩展名
16.html5 离线存储
Html5的一个重要特性就是离线存储，所谓的离线存储就是将一些资源文件保存在本地，这样后续的页面重新加载将使用本地资源文件，在离线情况下可以继续访问web应用，同时通过一定的手法（更新相关文件或者使用相关API），可以更新、删除离线存储等操作。
Html5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的，使用如 <html manifest='offline.manifest'> 来引入一个manifest文件，这个文件的路径可以是相对的，也可以是绝对的，如果你的web应用很多，而且希望能集中管理manifest文件，那么静态文件服务器是个不错的选择。
17.HTML5 Canvas 元素有什么用？
Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作
I. 前端面试题目难吗 如何轻松面对前端面试
从以下五个方面做，可以轻松面对前端面试：
一、基本知识
DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
盒模型——外边距、内边距和边框之间的关系，IE8以下版本的浏览器中的盒模型有什么不同。
块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。
二、少量提问
现在有一个正显示着Yahoo!股票价格的页面。页面上有一个按钮，你可以单击它来刷新价格，但不会重新加载页面。请你描述一下实现这个功能的过程，假设服务器会负责准备好正确的股票价格数据。
这个问题牵扯到一组我想要考察的基本知识点：DOM结构、DOM操作、事件处理、XHR和JSON。如果我要求你对换一种处理股票价格的方式，或者 让你在页面中显示其他信息，就可以把更多的知识点包括进来。对于经验比较丰富应聘者，我也可以自如地扩展要考察的知识范围，最简单像JOSN与XML的区别、安全问题、容量问题等等。
我还希望应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的代码，你就当页面中没有包含任何库。你说你对哪个库了解多少多少，但我不能把关于库的知识作为评判能力的因素，因为库是会随时间变化的。
三、解决问题
做为一名前端工程师，最值得高兴的事莫过于解决同一个问题会有很多种不同的方法，而你要做的就是找出最合适的方法来。我在提问的时候，经常会在应聘者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说，假设你的这个方法由于种种原因被否决了，那么你还能不能给出另一种方法。这样做可以达到 两个目的。
首先，可以测试出他们是否在毫无意义地复述书本中的东西。不能不承认，某些人确实有过目不忘的天赋，听他们在那里滔滔不绝地讲，你会觉得他们什么都明白。可是，只要一跟这些人谈到怎么查找方案无效的原因，以及能否拿出一个新方案来，他们往往就傻眼了。这时候，如果我听到“我不明白这个方案为什么不够 好”之类的反问，心里立刻就明白我的问题已经超出了他们的能力范围，而他们只是想拿自己死记硬背的结论来蒙混过关。
其次，可以测试出他们已经掌握的(还是那句话，“想都不用想”)浏览器技术知识。如果他们对浏览器平台的核心知识有较好的理解，想出解决同一问题的不同方案根本没有那么难。
注意：所有问题都与浏览器技术相关。我不相信出几道抽象的逻辑题，就能够考出某人解决Web技术问题的能力。在我看来，这无异于让素描大师画肖像，没有意义，也得不到任何有价值的信息。
四、有激情
要成为一名优秀的前端工程师，最重要的莫过于对自己做的事要有激情。我们技能都不是从学校中或者从研讨会上学来的，因此前端工程师必须具备自学能力。浏览器技术的变化可谓日新月异，所以也只有不断提升自己的技能才做得到与时俱进。我虽然不能强迫谁必须多看博客、不断学习，但想应聘前端工程师的人恐怕还是必须这么做的。
你怎么知道谁对这种工作有没有激情?实际上非常简单。我只问一个简单的问题：“目前你对什么Web技术最感兴趣?”这个问题永远不会过期，而且也几乎不可能出错……除非你答不上来。就眼下来说，我希望你对这个问题给出的技术中包括WebSocket、HTML、WebGL、客户端数据库，等等。只有 对Web开发充满激情的人，才会坚持不懈地学习新知识、掌握新技能;
五、最后一点
计算机科学或者Web设计方面的知识当然也有用，但那都是基本知识之外的东西。只要基本知识在那儿了，一切就都有了基础，想扩充知识面也不难。可是，如果等到正式上班以后，还得从头学习基本技能，那种难度是不可同日而语的。
J. 有哪些经典的前端开发面试题及答案解析
行元素与块元素的区别；
如何清除浮动；
定位方式当中，absolute与fixed、relative的区别；
事件的兼容问题；
Ajax是什么；
如何优化你的页面；
响应式布局是什么等等。
经典的前端面试题至少有近百道，在这里也没办法全部给你列出来，你可以看看这个（小-程序），里面有好几百道面试真题，也有比较好的答案解析。
