标签：至少1个，最多5个
问题 #1: 事件委托
事件委托，也叫事件委派，事件代理。
当构建应用程序时，有时需要将事件监听器绑定到页面上的某些元素上，以便在用户与元素交互时执行某些操作。
假设我们现在有一个无序列表：
&ul id="todo-app"&
&li class="item"&Walk the dog&/li&
&li class="item"&Pay bills&/li&
&li class="item"&Make dinner&/li&
&li class="item"&Code for one hour&/li&
我们需要在&li&上绑定点击事件，我们可能会这样操作：
app = document.getElementById('todo-app');
let items = app.getElementsByClassName('item');
// 将事件侦听器绑定到每个列表项
for (let item of items) {
item.addEventListener('click', function() {
alert('you clicked on item: ' + item.innerHTML);
虽然这样可以实现功能，但问题是要单独将事件侦听器绑定到每个列表项。这是4个元素，没什么大问题，但如果列表中有10,000个事项，怎么办？这个函数将会创建10,000个独立的事件监听器，并将每个事件监听器绑定到 DOM 。这样代码执行的效率非常低下。
更高效的解决方案是将一个事件侦听器实际绑定到父容器&ul&上，然后在实际单击时可以访问每个确切元素。这被称为事件委托，并且它比每个元素单独绑定事件的处理程序更高效。
那么上面的代码可以改变为：
let app = document.getElementById('todo-app');
// 事件侦听器绑定到整个容器上
app.addEventListener('click', function(e) {
if (e.target && e.target.nodeName === 'LI') {
let item = e.
alert('you clicked on item: ' + item.innerHTML);
问题 #2: 在循环内使用闭包（Closures）
闭包的本质是一个内部函数访问其作用域之外的变量。闭包可以用于实现诸如 私有变量 和 创建工厂函数之类的东西。
在面试中我们可能会见到一段这样的代码：
for (var i = 0; i & 4; i++) {
setTimeout(function() {
console.log(i);
运行上面的代码控制台会在1秒后打印4个4，而不是0，1，2，3。
其原因是因为setTimeout函数创建了一个可以访问其外部作用域的函数（也就是我们经常说的闭包），每个循环都包含了索引i。
1秒后，该函数被执行并且打印出i的值，其在循环结束时为4，因为它的循环周期经历了0，1，2，3，4，并且循环最终在4时停止。
下面列举两种方案解决这个问题：
for (var i = 0; i & 4; i++) {
// 通过传递变量 i
// 在每个函数中都可以获取到正确的索引
setTimeout(function(j) {
return function() {
console.log(j);
}(i), 1000);
for (let i = 0; i & 4; i++) {
// 使用ES6的let语法，它会创建一个新的绑定
// 每个方法都是被单独调用的
setTimeout(function() {
console.log(i);
问题 #3: 函数防抖（Debouncing）
有一些浏览器事件可以在很短的时间内快速启动多次，例如页面滚动事件。如果将事件侦听器绑定到窗口滚动事件上，并且用户快速滚动页面，事件很可能会在短时间多次触发。这可能会导致一些严重的性能问题。
因此，在侦听滚动，窗口调整大小，或键盘按下的事件时，请务必使用函数防抖动(Debouncing)或函数节流（Throttling）来提升页面速度和性能。
函数防抖(Debouncing)是解决这个问题的一种方式，通过限制需要经过的时间，直到再次调用函数。一个实现函数防抖的方法是：把多个函数放在一个函数里调用，隔一定时间执行一次。
这里有一个使用原生JavaScript实现的例子，用到了作用域、闭包、this和定时事件：
function debounce(fn, delay) {
// 持久化一个定时器 timer
let timer =
// 闭包函数可以访问 timer
return function() {
// 通过 'this' 和 'arguments' 获得函数的作用域和参数
let self =
let args =
// 如果事件被触发，清除 timer 并重新开始计时
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(self, args);
}, delay);
// 当用户滚动时调用函数foo()
function foo() {
console.log('You are scrolling!');
// 在事件触发的两秒后，包裹在debounce()中的函数才会被触发
window.addEventListener('scroll', debounce(foo, 2000));
函数节流是另一个类似函数防抖的技巧，除了使用等待一段时间再调用函数的方法，函数节流还限制固定时间内只能调用一次。所以，如果一个事件在100毫秒内发生10次，函数节流会每2秒调用一次函数，而不是100毫秒内全部调用。
0 收藏&&|&&13
你可能感兴趣的文章
1 收藏，1.8k
2 收藏，973
8 收藏，4.7k
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
我要该，理由是：您所在位置： &
&nbsp&&nbsp&nbsp&&nbsp
web前端面试题及答案.doc 8页
本文档一共被下载：
次 ,您可全文免费在线阅读后下载本文档。
下载提示
1.本站不保证该用户上传的文档完整性，不预览、不比对内容而直接下载产生的反悔问题本站不予受理。
2.该文档所得收入(下载+内容+预览三)归上传者、原创者。
3.登录后可充值，立即自动返金币，充值渠道很便利
需要金币：150 &&
web前端面试题及答案
你可能关注的文档：
··········
··········
WEB标准以及W3C标准是什么？
标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离。
1.1div中img怎么水平和垂直居中？
Div{width:200 height:200text-align: font-size:0; overflow:line-height:200 _line-height:178/*兼容IE6*/ }
Img{ vertical-align:}
1.2 HTML中没有单位的属性是？
z-index:1; zoom:1; font-weight:200;
1.3 form表单中input标签的readonly 和disabled属性有何区别？
readonly=“readonly”是只读，不可以修改， disabled=“disabled”是禁用，整个文本框是显示灰色状态
form 中method是数据传递的方式，action是与后台数据库提交的
xhtml和html有什么区别
XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素。
3.行内元素有哪些？块级元素有哪些？
行内元素: a b img
em br i span input select
块级元素：div p h1-h6 form ul dl ol table
4.行内元素和块级元素有什么区别？
行内元素不可以设置宽高，不独占一行;
块级元素可以设置宽高，独占一行。
5.我想让行内元素跟上面的元素距离10px，加margin-top和padding-top可以吗？
margin-top,padding-top无效
6.CSS的盒模型由什么组成？
内容（width,height），border ,margin，padding
6.1 简述div+css布局的优势？
（1）符合w3c标准；（2）兼容性好；（3）有利于搜索引擎很友好；（4）样式的调整更加方便；（5）css简洁的代码，能使样式和结构分离；
7.说说display属性有哪些？可以做什么？
display:block行内元素转换为块级元素
display:inline块级元素转换为行内元素
display:inline-block转为内联元素
display:box(css3新增的弹性布局属性)
8.CSS 选择符有哪些？
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul & li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = &external&]）
9.伪类选择器（a: hover, li: nth - child）
9.哪些css属性可以继承？
可继承： font-size font-family color,（字体属性和列表属性）
不可继承 ：border padding
10.css优先级算法如何计算？
!important &
id & class & 标签
!important 比 内联优先级高
优先级就近原则，样式定义最近者为准;
以最后载入的样式为准;
11.text-align:center和line-height有什么区别？
text-align是水平对齐，line-height是行间。
12.前端页面由哪三层构成，分别是什么？作用是什么？
结构层 Html(页面结构内容，骨架) 表示层 CSS（网页的样式和外观） 行为层 js（实现网页的交互，动画效果）
13.标签上title与alt属性的区别是什么？
Alt是图片属性，让搜索引擎认识你的图片。当图片不显示的时候显示。
title是网站标题，是seo中最重要的属性。
14.使用css 精灵有什么优缺点？
优： Css 精灵 把一堆小的图片整合到一张大的图片上，减轻HTTP的请求数量（HTTP连接数对网站的加载性能有重要影响）。能够提升网站性能
缺：可维护性方面，如要改变局部一张小图，就要很繁琐，而且算图片的位置也很麻烦；
15.什么是语义化的HTML？
标签使用的合理性，对于搜索引擎的抓取有好处。
16.b标签和strong标签,i标签和em标签的区别？
后者有语义，前者则无。
正在加载中，请稍后...2015前端面试题(含答案)_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
2015前端面试题(含答案)
阅读已结束，下载文档到电脑
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩25页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢(CC大神01)
(黑马课程)
(summerlove)
第三方登录：咨询电话：1|||
常问的Web前端面试题目及答案
时间： 11:53:33
&&& 点击：
& 以下是所收集的一些关于面试中经常会遇到的经典面试题以及自己面试过程中无法解决的问题，通过对知识的整理以及经验的总结，重新巩固自身的前端基础知识，如有错误或更好的答案，欢迎指正。
& & & & & HTML/CSS部分
什么是盒子模型？
& & 在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
行内、块级、空元素有那些？
& & 行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
& & 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
& & 空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
CSS实现垂直水平居中
一道经典的问题，实现方法有很多种，以下是其中一种实现：
HTML结构：
&div class=&wrapper&&
& & &&div class=&content&&&/div&
.wrapper{position:}
background-color:#6699FF;
height:200
position: & & & &//父元素需要相对定位
left: 50%;
margin-top:-100 & //二分之一的height，width
margin-left: -100
简述一下src与href的区别
& & href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
& & src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
什么是CSS Hack?
& & 一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
& & IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：
// 1、条件Hack
&!--[if IE]&
.test{color:}
& &/style&
&![endif]--&
// 2、属性Hack
color:#090\9; /* For IE8+ */
*color:#f00; &/* For IE7 and earlier */
_color:#ff0; &/* For IE6 and earlier */
// 3、选择符Hack
* html .test{color:#090;} & & & /* For IE6 and earlier */
* + html .test{color:#ff0;} & & /* For IE7 */
简述同步和异步的区别
& & 同步是阻塞模式，异步是非阻塞模式。
& & 同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
& & 异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
px和em的区别
& & px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
& & 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
什么叫优雅降级和渐进增强？
& & 渐进增强 progressive enhancement：
& & 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
& & 优雅降级 graceful degradation：
& & 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
& & 区别：
& & a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
& & b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
& & c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
浏览器的内核分别是什么?
& & IE: trident内核
& & Firefox：gecko内核
& & Safari：webkit内核
& & Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
& & Chrome：Blink(基于webkit，Google与Opera Software共同开发)
& & & & & JavaScript部分
怎样添加、移除、移动、创建和查找节点？
& & 1）创建新节点
& & createDocumentFragment() //创建一个DOM片段
& & createElement() //创建一个具体的元素
& & createTextNode() //创建一个文本节点
& & 2）添加、移除、替换、插入
& & appendChild() //添加
& & removeChild() //移除
& & replaceChild() //替换
& & insertBefore() //插入
& & 3）查找
& & getElementsByTagName() //通过标签名称
& & getElementsByName() //通过元素的Name属性的值
& & getElementById() //通过元素Id，唯一性
实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制。
&* 对象克隆
&* 支持基本数据类型及对象
&* 递归方法
function clone(obj) {
& & switch (typeof obj) {
& & & & case &undefined&:
& & & & & &
& & & & case &string&:
& & & & & & o = obj + &&;
& & & & & &
& & & & case &number&:
& & & & & & o = obj - 0;
& & & & & &
& & & & case &boolean&:
& & & & & & o =
& & & & & &
& & & & case &object&: // object 分为两种情况 对象（Object）或数组（Array）
& & & & & & if (obj === null) {
& & & & & & & & o =
& & & & & & } else {
& & & & & & & & if (Object.prototype.toString.call(obj).slice(8, -1) === &Array&) {
& & & & & & & & & & o = [];
& & & & & & & & & & for (var i = 0; i & obj. i++) {
& & & & & & & & & & & & o.push(clone(obj[i]));
& & & & & & & & & & }
& & & & & & & & } else {
& & & & & & & & & & o = {};
& & & & & & & & & & for (var k in obj) {
& & & & & & & & & & & & o[k] = clone(obj[k]);
& & & & & & & & & & }
& & & & & & & & }
& & & & & & }
& & & & & &
& & & & default:
& & & & & & o =
& & & & & &
如何消除一个数组里面重复的元素？
// 方法一：
var arr1 =[1,2,2,2,3,3,3,4,5,6],
& & arr2 = [];
for(var i = 0,len = arr1. i& i++){
& & if(arr2.indexOf(arr1[i]) & 0){
& & & & arr2.push(arr1[i]);
document.write(arr2); // 1,2,3,4,5,6
在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
& & 伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
function log(){
& & & var args = Array.prototype.slice.call(arguments); &
//为了使用unshift数组方法，将argument转化为真正的数组
& & & args.unshift('(app)');
& & & console.log.apply(console, args);
Javascript中callee和caller的作用？
& & caller是返回一个对函数的引用，该函数调用了当前函数；
& & callee是返回正在被执行的function函数，也就是所指定的function对象的正文。
请描述一下cookies，sessionStorage和localStorage的区别
& & sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
& & web storage和cookie的区别
& & Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
& & 除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地&存储&数据而生。
手写数组快速排序
& & 关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序
& & &快速排序&的思想很简单，整个排序过程只需要三步：
& & （1）在数据集之中，选择一个元素作为&基准&（pivot）。
& & （2）所有小于&基准&的元素，都移到&基准&的左边；所有大于&基准&的元素，都移到&基准&的右边。
& & （3）对&基准&左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。
统计字符串&aaaabbbccccddfgh&中字母个数或统计最多字母数。
var str = &aaaabbbccccddfgh&;
var obj &= {};
for(var i=0;i&str.i++){
& & var v = str.charAt(i);
& & if(obj[v] && obj[v].value == v){
& & & & obj[v].count = ++ obj[v].
& & }else{
& & & & obj[v] = {};
& & & & obj[v].count = 1;
& & & & obj[v].value =
for(key in obj){
& & document.write(obj[key].value +'='+obj[key].count+' '); // a=4 &b=3 &c=4 &d=2 &f=1 &g=1 &h=1&
10、写一个function，清除字符串前后的空格。（兼容所有浏览器）
function trim(str) {
& & if (str && typeof str === &string&) {
& & & & return str.replace(/(^\s*)|(\s*)$/g,&&); //去除前后空白符
& & & & & 其他
一次完整的HTTP事务是怎样的一个过程？
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
2、对前端工程师这个职位你是怎么样理解的？
a. 是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
b. 参与项目，快速高质量完成实现效果图，精确到1px；
c. 与团队成员，UI设计，产品经理的沟通；
d. 做好的页面结构，页面重构和用户体验；
e. 处理hack，兼容、写出优美的代码格式；
f. 针对服务器的优化、拥抱最新前端技术。
最新开班信息
开班时间17-04-10
开班时间17-04-24
开班时间17-02-06
开班时间17-02-13
开班时间17-02-06
开班时间16-11-11
　　这次web前端培训于我来说，是一次人生中的重大转折...
【学员故事】牛石，毕业于天津商业学院，是一个事事会...
岁月是最好的导师，不一样的追求成就不一样的人生。当...
有时候我们经常会下决心做某事，甚至会突然冒出某些奇...
刚开始来尚学堂咨询，老师跟我说了很多在尚学堂学完后...
尚学堂优势