IMWEB 前端面试题汇总

Posted 10manongit

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了IMWEB 前端面试题汇总相关的知识，希望对你有一定的参考价值。

1.什么是盒子模型？

CSS中的思维模型,每一个元素都包含margin,padding,boder,content区域,占一个盒子形状,整体称为盒模型.

2.简述一下src与href的区别?

  • Href 超文本链接,指向网络资源所在位置,如果我们在文档添加<link href="common.css" rel="stylesheet"/>浏览器会下载资源并且不会停止对当前文档的处理。
  • Src source,指向外部资源的位置,如果我们添加<script src ="js.js"></script>浏览器会暂停其他资源的下载和处理,直到该资源加载,编译,执行完毕(图片和框架也是如此),这也就是为什么js脚本要放在底部。
    src用于替换当前元素,href用于在当前文档和引入资源之间建立联系。

3.简述同步和异步的区别?

同步强调顺序性,谁先谁后,异步不存在这种顺序性.
同步:用户能看到页面刷新,请求发送,请求完成, 等请求完成,页面刷新,新内容出现,用户看到新内容.
异步:用户正常操作,浏览器进行后端请求,等请求完成,页面不刷新,用户看到新内容

4.怎样添加、移除、移动、复制、创建和查找节点？

createNode,createElement,createDocumentFragment
removeChild
appendChild insertBefore
cloneNode
getElementById,getElementsByNaem,getElementsBytagName,getElementByClassName

2道思考题

1.站点 Logo 是否因出现在 <h1> 标签中?
H1标签是标题标签,一个页面只能出现1次.H1能提升网站seo排名,当你的logo足够有影响力的时候,可以再logo中放入H1,不然最好不要浪费一个页面唯一的一次机会.
h1不要加在header里面，尤其是logo上。
2.是否应该支持 IE6？
看你的网站的受众是谁,做好平稳退化。

5.一次完整的HTTP事务是怎样的一个过程？

1.域名解析
2.发起tcp的3次握手
TCP 为什么需要3次握手？
举个例子：
假设一个老外在故宫里面迷路了，看到了小明，于是就有下面的对话：
老外： Excuse me，Can you Speak English?
小明： yes 。
老外： OK,I want ...
在问路之前，老外先问小明是否会说英语，小明回答是的，这时老外才开始问路
3.发起http请求(get post)
4.服务器相应http请求,服务器发送给浏览器html源码
5.浏览器解析html源码,并请求html源码中的资源
6.浏览器对整个页面进行渲染,让用户得到最终的页面

6.你所了解到的Web攻击技术?

（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者javascript进行的一种攻击。
（2）SQL注入攻击
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

7.ajax是什么?ajax的交互模型?同步和异步的区别?如何解决跨域问题?

通过异步处理,提升用过体验;
优化了数据传输,减少了浏览器和服务器之间的数据往返,减少带宽占用;
ajax减少了本应由服务器承担的工作,减少了大量用户下的服务器负载;
ajax特点:
可以实现动态不刷新(局部刷新);
ajax缺点:
不支持浏览器back按钮;
对搜索引擎的支持较弱;
不容易调试;
破坏了程序的异常机制;
暴露了与服务器之间的交互细节;

8.什么叫优雅降级和渐进增强？

渐进增强 progressive enhancement： 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别： a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给 b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要 c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

2道思考题

3、前端网页制作怎么克服不同分辨率的问题？

使用媒体查询器,结合响应式布局;

4.是否该继续使用 <b> 和 <i> 两个标签?

当只是想要造成粗体或者斜体时,应该使用css
当带有语义情况下,是对文本进行强调时,可以使用

9.在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

无法直接调用数组方法或期望length属性有什么特殊行为,但仍可以使用遍历数组的方法遍历他们.
Array.prototype.slice.call(fakeArr)

10.浏览器本地存储?

H5之前:
cookies,缺点是在请求头上带数据,且大小最多是4k;
Html5之后:
LocalStorage 用于本地的永久存储,除非主动删除,否者永不过期;
SessionStorage 用于会话级别的临时存储,这些数据只有在同一个窗口下才能访问;当窗口关闭时,数据也会随之销毁;

11.线程与进程的区别?

一个程序至少有一个进程,一个进程至少有一个线程;
多进程拥有独立的内存,多线程共享内存,所以多线程提高了运行效率;
多线程的重要意义在于一个应用程序中,有多个执行程序能够同时执行,但是系统并没有将多线程看成多个独立的应用

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

优化图片,减小其尺寸,尤其是缩略图
减少http请求(合并文件合并图片)
给图片加上width和height,减少计算,可在没加载完成时就留下固定宽高的空白
图片格式的选择(在使用颜色要求不高的地方,使用GIF)
压缩jscss代码
网址后面加上斜杠,对服务器而言,可以减少一个请求计算,直接打开根目录下默认页

2道思考题

5.在链接中应该使用诸如“Click here” 一类的笼统词汇吗？

不应该,应该根据打开链接后的页面详情来描述链接按钮,不然用户只能根据上下文来猜测链接意图.

6.链接是否应该在新窗口打开？

在新窗口打开链接可以让用户不关闭现有页面的情况下,请了解一个未知的页面,以防那个页面不是自己需要的,还丢失了现有页面会话;

13.null和undefined的区别？

Undefined 的值只有一个,就是undefined,当一个申明的变量没有初始化时,它的值就是undefined.
Null 也只有一个值,就是null,用来表示尚未存在的对象,常用来表示函数尝试返回一个不存在的值

14 .new操作符具体干了什么呢?

new共经历了四个过程。

var fn = function () { };
var fnObj = new fn();

1、创建了一个空对象

var?obj =?new?object();

2、设置原型链

obj._proto_ = fn.prototype;

3、让fn的this指向obj，并执行fn的函数体

var result =?fn.call(obj);

4、判断fn的返回值类型，如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。

if (typeof(result) == "object"){ 
fnObj = result;
 } else { 
fnObj = obj;}

15.哪些操作会造成内存泄漏？

内存泄露是指当你不在拥有或者需要它的时候仍然存在;
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

16.对Node的优点和缺点提出了自己的看法？

优点：

  1. 因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
  2. 与Node代理服务器交互的客户端代码是由javascript语言编写的，因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。
    缺点：
  3. Node是一个相对新的开源项目，所以不太稳定，它总是一直在变。
  4. 缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子（第三方库现在已经很丰富了，所以这个缺点可以说不存在了）。

两道思考题

7.时至今日前端canvas还是否有深入学习的必要？

时至今日前端canvas还是否有深入学习的必要？

8.你如何对网站的文件和资源进行优化?

1.尽可能减少http请求次数，将css, js, 图片各自合并
2.使用CDN资源托管，降低通信距离
3.添加Expire/Cache-Control头
4.Gzip压缩文件jscss代码
5.将css放在页面最上面
6.将script放在页面最下面
7.避免在css中使用表达式
8.将css, js都放在外部文件中
9.减少DNS查询
10.最小化css, js，减小文件体积
11.避免重定向
12.移除重复脚本
13.配置实体标签ETag
14.使用AJAX缓存，让网站内容分批加载，局部更新
15.优化网站图片
16.css精灵合并图片

16.对Node的优点和缺点提出了自己的看法？

优点：

  1. 因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求
  2. 客户端和服务器端都使用JavaScript编写
    缺点：
  3. Node是一个相对新的开源项目，所以不太稳定，它总是一直在变。
  4. 缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子（第三方库现在已经很丰富了，所以这个缺点可以说不存在了）。

17.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

详细版：
1、浏览器会开启一个线程来处理这个请求，对URL 分析判断如果是 http 协议就按照 Web 方式来处理;
2、调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
3、通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;
4、进行HTTP协议会话，客户端发送报头(请求报头);
5、进入到web服务器上的 WebServer，如 Apache、Tomcat、Node.js 等服务器;
6、进入部署好的后端应用，如php、Java、JavaScript、Python 等，找到对应的请求处理;
7、处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;
8、浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;
9、文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie;
10、页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等
页面显示完成。

简洁版：
浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；

服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。

18.HTTP状态码

当浏览者访问一个网页时，浏览器会向服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。
下面是常见的HTTP状态码：
200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误
更多状态码

19.请解释一下 JavaScript 的同源策略。

同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性。
同源策略是一种安全协议，是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。
这里的同源策略指的是：协议，域名，端口相同。

20.GET和POST的区别，何时使用POST？

  • GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符。当请求无副作用时（如进行搜索），便可使用GET方法。
  • POST：一般用于修改服务器上的资源，对所发送的字符长度没有限制。当请求有副作用时（如添加数据行），则用POST方法。
    GET方式需要使用Request.QueryString来取得变量的值；

而POST方式通过Request.Form来获取变量的值。
也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。
在以下情况中，请使用 POST 请求：

  1. 无法使用缓存文件（更新服务器上的文件或数据库）
  2. 向服务器发送大量数据（POST 没有数据量限制）
  3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

两道思考题

9.ajax请求的时候get 和post方式的区别是什么？

1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来
2.使用Get请求发送数据量小,Post请求发送数据量大
更多详情

10. Web前端密码加密是否有意义？(既然前端代码都是直接可以看到的，那加密是否还有意义？)

Web前端密码加密是否有意义？

21.XHTML和HTML有什么区别?

xhtml1.0的开发实际上是作为html4.01与xml2.0的一个过渡的网页版本而存在的
主要的不同：
1.HTML文档必须要有根元素
2.元素必须被正确的镶套
3.元素标签必须关闭
4.标签必须使用小写

22.什么是语义化的HTML?

语义化的HTML，符合内容的语义化（结构语义化），标签的语义化（代码语义化），能够方便开发者写出更易读、优雅的代码，同时让机器和爬虫更好的解析。
优点：
1.语义化有益于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效因袭，提升网页权重。
2.在没有CSS的时候，能够清晰的看出网页的结构，增加可读性。
3.便于团队维护，语义化的HTML能让开发者清楚明白，提升开发效率。
4.支持多终端的浏览器渲染。

23.常见的浏览器内核有哪些？

1.使用Trident的是internet explorer
2.使用Gecko的是Mozilla Firefox
3.使用WebKit的有苹果的safari，谷歌的chrome
4.使用Presto的是opera

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

新增的元素：

  • 语义化更好的内容标签（header,nav,footer,aside,article,section）
  • 拖拽释放(Drag and drop) API
  • 音频、视频(audio,video)API
  • 画布(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新标签，浏览器支持新标签后，还需要添加标签默认的样式。
  • 使用html5shim框架：
    <!--[if lt IE 9]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

两道思考题

11.前端开发中有什么经典的轮子值得自己去实现一遍？

12.在你的日常开发中遇到过哪些常用布局是无法用纯 CSS 实现的？

25.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

共同点：都是保存在浏览器端，且同源的。
区别：

  • cookies最多储存4096字节,一般不超过4095字节,有时间限制,不能永久储存;cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
    而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
  • sessionStorage 是会话窗口级别的储存,只有同一个会话中的页面才能访问,一旦关闭页面数据也就随之销毁;
  • localSorage 在HTML5中替换了globalStorage,只要不删除,可以永久存储;

26.谈谈This对象的理解。

  • new绑定:
    （1）创建（或者说构造）一个全新的对象；

（2）这个新对象会被执行[[原型]]连接；
（3）这个新对象会绑定到函数调用的this；
（4）如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。

  • call apply 显示绑定
  • 隐式绑定--调用位置是否有上下文对象，或者说被某个对象拥有或者包含
  • 默认绑定--函数调用类型：独立函数调用，this指向全局对象。
    read more

27.谈一谈JavaScript作用域链?

JavaScript 需要查找变量 X 的时候（这个过程称为变量解析），它首先会从作用域链中的链尾也就是当前作用域进行查找是否有 X 属性，如果没有找到就顺着作用域链继续查找，直到查找到链头，也就是全局作用域链，仍未找到该变量的话，就认为这段代码的作用域链上不存在 x 变量，并抛出一个引用错误（ReferenceError）的异常。

JavaScript中所有的量都是存在于某一个作用域中的

除了全局作用域, 每一个作用域都是存在於某个作用域中的
在试图访问一个变量时JS引擎会从当前作用域开始向上查找直到Global全局作用域停止
read more

28.如何理解JavaScript原型链?

每个对象都会在其内部初始化一个属性，就是 prototype( 原型 ) ，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去 prototype 里找这个属性，这个 prototype 又会有自己的 prototype(原型也是object) ，于是就这样一直找下去，若整个原型链未找到则返回 undefined。
这也就是我们平时所说的原型链的概念。
原型链的作用是用于对象继承，函数 A 的原型属性 (prototype property) 是一个对象，当这个函数被用作构造函数来创建实例时，该函数的原型属性将被作为原型赋值给所有对象实例，比如我们新建一个数组，数组的方法便从数组的原型上继承而来。

技术图片

两道思考题

13.对前端工程师这个职位你是怎么样理解的？

与用户打交道最近的地方,负责用户所能看到的一切的构建,在满足基本功能的同时,添加炫酷的特效,排版等,提升用户体验感,加强产品粘性。

  1. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90 分进化到 100 分，甚至更好
  2. 参与项目，快速高质量完成实现效果图，精确到 1px；
  3. 与团队成员，UI 设计，产品经理的沟通；
  4. 做好的页面结构，页面重构和用户体验；
  5. 处理 hack，兼容、写出优美的代码格式；
  6. 针对服务器的优化、拥抱最新前端技术。

14.平时如何管理你的项目？

  1. 先期团队必须确定好全局样式（globe.css），编码模式 (utf-8) 等；
  2. 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
  3. 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
  4. 页面进行标注（例如 页面 模块 开始和结束）；
  5. CSS 跟 HTML 分文件夹并行存放，命名都得统一（例如 style.css）；
  6. JS 分文件夹存放 命名以该 JS 功能为准的英文翻译。
  7. 图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

29..JavaScript如何实现继承？

js中一切都是对象

  1. 原型链
    利用原型让一个引用类型继承另一个引用类型的属性和方法;
  2. 借用构造函数
    在子类型构造函数内部调用超类型构造函数.使用call()和apply()在新建对象上执行构造函数

3.组合继承
结合原型链和借用构造函数各家优点

  1. 原型式继承
    借助原型可以基于已有的对象创建新对象，同时还不必须因此创建自定义的类型
  2. 寄生式继承
    创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真正是它做了所有工作一样返回对象
  3. 寄生组合式继承
    通过借用函数来继承属性，通过原型链的混成形式来继承方法

参考链接

30.清除浮动有哪些方式？比较好的方式是哪一种？

方法一:

<div style="clear:both;"></div>

优点:代码简单，W3C推荐的做法
缺点:增加了无意义的空标签
方法二: （貌似不支持IE）使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容：

#outer:after{  
   content:".";  
   height:0;  
   visibility:hidden;  
   display:block;  
   clear:both;  
}

方法三:
设置overflow为hidden或者auto
优点: 不需要添加额外的标记。
缺点: 会影响浏览器的表现，而这种表现是不确定的，你最好是能在多个浏览器上测试你的页面；
另外，在IE6中单纯地设置overflow为hidden或者auto并不能有效清除浮动（闭合浮动元素），还要指定一个高度：

#outer {
overflow:auto;?
width:100%;
}

31.box-sizing常用的属性有哪些？分别有什么作用？

值 描述
content-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框
border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
inherit 规定应从父元素继承 box-sizing 属性的值

box-sizing

32.Doctype作用？标准模式与兼容模式各有什么区别?

位置：<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。
作用：告知浏览器的解析器用什么文档标准解析这个文档。

       DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

区别：
标准模式 排版 和JS运作模式都是以该浏览器支持的最高标准运行。
兼容模式 页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
简单的说，就是尽可能的显示能显示的东西给用户看。

两道思考题

15.如何视觉隐藏网页内容，只让它们在屏幕阅读器中可用？

  • display:none
    缺点：

搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略；
屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。

  • visibility: hidden
    缺点：隐藏的内容会占据他所应该占据物理空间
  • overflow:hidden一个比较合理的方法
.texthidden {
display:block;/*统一转化为块级元素*/ 
overflow: hidden; 
width: 0;
height: 0; 
}

将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的。

16.你觉得WebAssembly为什么比asm.js快？

WebAssembly 为什么比 asm.js 快？

33.HTML5 为什么只需要写 <!DOCTYPE HTML>？

HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。
而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。
其中，SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。

34.页面导入样式时，使用link和@import有什么区别？

link:
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />
@import:
<style type="text/css" media="screen"> @import url("CSS文件"); </style>
区别:

  1. link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；
    @import只能加载CSS。
  2. link在页面载入时同时加载；
    @import在网页完全载入以后加载。
  3. link是XHTML标签，无兼容问题；
    @import是在CSS2.1提出的，低版本的浏览器不支持。
  4. link支持使用Javascript控制DOM去改变样式；
    而@import不支持。

35.介绍一下你对浏览器内核的理解？

主要分成：渲染引擎和JS引擎。
渲染引擎：负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等)，以及计算网页的显示方式，后会输出至显示器或打印机。
JS引擎则：解析和执行javascript来实现网页的动态效果。
通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
不同的浏览器内核对网页编写语法的解释也有不同

36.IE和DOM事件流的区别?

1.事件流的区别

  • IE采用冒泡型事件
  • Netscape使用捕获型事件
  • DOM使用先捕获后冒泡型事件
    示例：
<body> 
<div> 
<button>点击这里</button> 
</div> 
</body>

冒泡型事件模型： button->div->body (IE事件流)
捕获型事件模型： body->div->button (Netscape事件流)
DOM事件模型： body->div->button->button->div->body (先捕获后冒泡)
2.事件侦听函数的区别
IE使用:
[Object].attachEvent("name_of_event_handler", fnHandler); //绑定函数
[Object].detachEvent("name_of_event_handler", fnHandler); //移除绑定
DOM使用：
[Object].addEventListener("name_of_event", fnHandler, bCapture); //绑定函数
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除绑定
bCapture参数用于设置事件绑定的阶段，true为捕获阶段，false为冒泡阶段。

两道思考题

17.前端安全方面有没有了解？CSRF 如何攻防？

XSS攻击：它允许恶意web用户将代码植入到提供给其它用户使用的页面中
防范：将前端输出数据全部进行转义，例如将script标签的进行转义，则浏览器便不会认为其是一个标签，但是显示的时候，还是会按照正常的方式去显示。
CSRF攻击
CSRF（Cross-site request forgery跨站请求伪造，也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。
其实就是网站中的一些提交行为，被黑客利用，你在访问黑客的网站的时候，进行的操作，会被操作到其他网站上(如：你所使用的网络银行的网站)。
举个例子：http://blog.csdn.net/fengyinchao/article/details/52303118
通常我们会为了省事儿，把一些应当提交的数据，做成get请求。殊不知，这不仅仅是违反了http的标准而已，也同样会被黑客所利用。
所以，我们日常的开发，还是要遵循提交业务，严格按照post请求去做的。更不要使用jsonp去做提交型的接口，这样非常的危险。
使用了post请求来处理关键业务的，还是有办法可以破解的
解决方法：?最简单的办法就是加验证码
另一种方式，就是在用访问的页面中，都种下验证用的token，用户所有的提交都必须带上本次页面中生成的token，这种方式的本质和使用验证码没什么两样，但是这种方式，整个页面每一次的session，使用同一个token就行，很多post操作，开发者就可以自动带上当前页面的token。如果token校验不通过，则证明此次提交并非从本站发送来，则终止提交过程。如果token确实为本网站生成的话，则可以通过。
常见攻击

18.说说你对 SVG 理解?

SVG可缩放矢量图形是基于可扩展标记语言 XML，用于描述二维矢量图形的一种图形格式。
SVG 是一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。
SVG 严格遵从 XML 语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。
特点：
(1)任意放缩???用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。?
(2)文本独立???SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。?
(3)较小文件???总体来讲，SVG文件比那些 GIF 和 JPEG 格式的文件要小很多，因而下载也很快。?
(4)超强显示效果???SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。?
(5)超级颜色控制???SVG图像提供一个 1600 万种颜色的调色板，支持 ICC 颜色描述文件标准、 RGB 、线 X 填充、渐变和蒙版。?

37.哪些地方会出现css阻塞，哪些地方会出现js阻塞？

js阻塞
在下载js时,会暂停其他内容的,直到js下载解析执行完毕后,再开始继续并行下载其他资源并呈现显示;

  • 嵌入js 会阻止所有内容的呈现;
  • 外部js 只会阻止js之后的内容;外部样式不会阻塞外部脚本的加载，但会阻塞外部脚本的执行。

css阻塞
当CSS后面跟着嵌入的JS的时候，该CSS就会出现阻塞后面资源下载的情况。
而当把嵌入JS放到CSS前面，就不会出现阻塞的情况了。

根本原因：因为浏览器会维持html中css和js的顺序，样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载，所以就会出现上面CSS阻塞下载的情况。

嵌入JS应该放在什么位置：

  1. 放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。
  2. 如果嵌入JS放在head中，请把嵌入JS放在CSS头部。
  3. 使用defer（只支持IE）
  4. 不要在嵌入的JS中调用运行时间较长的函数，如果一定要用，可以用setTimeout来调用

38.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

选择器：
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)

不可继承的：display、margin、border、padding、background、height、width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

优先级算法：
1.优先级就近原则，同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important > id > class > tag
4.important 比 内联优先级高，但内联比 id 要高

39.在JavaScript我们会遇到闭包，请你们根据自己的理解分析一下什么是闭包？闭包有什么好处？使用闭包要注意什么？

闭包：
函数嵌套函数，内部函数可以引用外部函数的参数和变量，变量和参数不会被垃圾回收机制所回收。也就是说只要发生了函数调用,就会生成闭包。
好处：

  1. 希望一个变量长期驻村在内存中；
  2. 外部无法引用内部的变量，避免全局变量污染；
    3.私有成员的存在。

需要注意:

  1. 在使用闭包时,变量都被保存在内存中,如果滥用闭包,会造成性能问题,IE中会内存泄露;解决办法是在退出函数时,将不用的变量全部删除;
  2. 注意闭包中this的值

40.如何阻止事件冒泡和默认事件（程序）

阻止冒泡
IE中 cancelBubble
非IE中 stoppropagation

//?阻止事件冒泡??
function stopBubble(e) {  
  if(e && e.stopPropagation){  
      e.stopPropagation();  
  } else {  
    window.event.cancelBubble = true;  
  }  
};  
//?阻止浏览器的默认事件??
function?stopDefault(e){??
??if(e?&&?e.preventDefault)?{??
????e.preventDefault();??
??}?else?{??
????window.event.returnValue?=?false;??
??}??
??return?false;??
};??

两道思考题

19.谈谈垃圾回收机制方式及内存管理

js垃圾回收的机制

  1. 标记清除
    当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为："离开环境"。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。
  2. 引用计数
    基本原理就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。

引用计数有很大的问题，因为可能有些对象的引用计数永远不可能为0，所以js都是用标记清除的方式。
MDN内存管理

20.开发过程中遇到的内存泄露情况，如何解决的？

以上是关于IMWEB 前端面试题汇总的主要内容，如果未能解决你的问题，请参考以下文章

2022前端面试题汇总（持续更新中~）

小猿圈web前端面试题汇总

前端面试题汇总

前端面试题汇总

前端面试题node.js汇总

Web前端笔试面试题汇总（转自github）