web前端经典面试题

遇到一篇不错的前端经典面试题
转载自https://blog.csdn.net/gyq04551/article/details/55254359

1、请谈谈你对性能优化的认识？

网页内容

减少http请求次数

80%的响应时间花在下载网页内容(images, stylesheets, javascripts,scripts, flash等)。减少请求次数是缩短响应时间的关键！可以通过简化页面设计来减少请求次数，但页面内容较多可以采用以下技巧。

图片显示效果如左图

减少DNS查询次数

DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问响应速度有所影响。下面是我清空本地dns后访问博客园主页dns的查询请求。

缓存Ajax

Ajax可以帮助我们异步的下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如ajax的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高ajax的响应速度。

延迟加载

这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。

Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。

延迟加载

这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。

Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。

2、如何避免XSS？

禁止危险脚本

IE8是第一款内置了XSS脚本拦截保护的浏览器。谷歌的Chrome也会紧随其后推出类似功能。这两款浏览器都会首先查看来自某个Web服务器的脚本是否是恶意的——如果是，就拦截它。在今年4月的黑帽欧洲2010大会上，研究专家David Lindsay和Eduardo Vela Nava却演示了一种可以破除这种拦截的办法，不过谷歌已经修复了Chrome中的这个漏洞。微软则在今年1月（补丁MS10-002）和3月（MS10-018）也已解决了大部分问题，并计划在6月修复第3个漏洞，所以在你读到这篇文章的时候，破除XSS脚本拦截的问题可能已经完全解决了。

Firefox的用户则可以利用免费的NoScrpit附加组件有选择地拦截脚本。比如说，你可以放行一段Flash视频，而同时拦截该网站上的其他脚本组件。IE和Chrome在拦截可疑脚本方面没有这么细的粒度——它们是要么全拦截，要么全不拦截。

NoScrpit也有一个问题，那就是大多数用户并不喜欢放行个别脚本的做法，因为这样会带来不便。不过拦截和放行今后可能会成为你的第二天性。你还可以对某个特定网站上的所有脚本进行认证，无论是为了一次性访问还是今后的所有访问，这样的认证如今在IE 8和chrome中也可以做了，使得防范XSS攻击实现更加可能。

3、平时如何管理项目？

所谓项目，简单地说，就是在既定的资源和要求的约束下，为实现某种目的而相互联系的一次性工作任务。一般来说，项目具有如下的基本特征：

1）明确的目标其结果只可能是一种期望的产品，也可能是一种所希望得到的服务。

2）独特的性质每一个项目都是唯一的。

3）资源成本的约束性每一项目都需要运用各种资源来实施，而资源是有限的。

4）项目实施的一次性项目不能重复。

5）项目的不确定性在项目的具体实施中，外部和内部因素总是会发生一些变化，因此项目也会出现不确定性。

4、请谈谈项目的迭代周期？

软件项目开发，一般都会采用增量、迭代、（或者叫进化、演化、演进）的软件开发模型，众多的软件开发模型大多是以经典的瀑布模型为基础进行改进、变形，改进原则是：增加客户在整个项目周期中的参与度，降低软件开发过程中的风险，增强软件项目的后期可维护性。

不同的软件开发模型，迭代周期长短也不相同，有的是一个月，有的是两周，我们一般都是根据实际情况确定，一个周期完成，将项目成果（可运行的软件）提交给用户（或进行内部评审），通过后就进入下一个迭代开发周期

5、工作中用过什么构建工具？

答：用过gulp。

第一步：安装node和npm,搭建node环境。

第二步：安装gulp

第三步：新建Gulpfile文件，运行gulp

安装依赖，提醒下，如果以上命令提示权限错误，需要添加 sudo 再次尝试。

Gruntfile维护起来那么困难，有几个原因：

配置和运行分离

程序员都知道，变量的声明和使用挨在一起，最方便理解和修改。但Gruntfile里，配置Task和调用它们的地方离得很远，极大地增加了心智负担

每个插件做的事太多

每个Task的结果必须写到磁盘文件，另一个Task再读，损害性能倒是小事，更麻烦的是让整个过程变复杂了。就像一个个小作坊，来料加工又返回给客户，这中间的沟通成本、出错机会都大大增加。配置项过多做事多了，配置项自然也多。至少输入和输出的位置得配吧。每个插件的配置规则还不尽相同。用每个插件，都得去学习一番。

6、谈谈你对模块化的理解？

什么是模块化？

• 模块化就是为了减少系统耦合度，提高高内聚，减少资源循环依赖，增强系统框架设计。

• 让开发者便于维护,同时也让逻辑相同的部分可复用

• 模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、

api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。

任何事物都有一个过程，那么模块化的过程通俗点讲就是：

模块化的过程就是：

• 1、拆分

将整个系统按功能,格式,加载顺序,继承关系分割为一个一个单独的部分.

注意:拆分的粒度问题,可复用问题,效率问题.如何这些问题处理的不好，就有可能出现不想要的后果。

将功能或特征相似的部分组合在一起,组成一个资源块.

将每个资源块按找需求,功能场景以及目录约束放到固定的地方以供调用.

模块的历程

模块化的发展也是从草根一步一步走过来的。从最开始到现在成熟方案：

1. namespace

2. sass,less

3. AMD&CMD

4. html模版

5. grunt,gulp,webpack

6. FIS,YUI,KISSY

7、平时都用什么第三方框架？

jQuery、Bootstrap、angularjs、vue、underscore、seajs、RequireJS…

8、请描述一下cookie，sessionStorage和localStorage的区别？

答：cookies兼容所有的浏览器，Html5提供的storage存储方式。

• Document.cookie

• Window.localstorage

• Window.sessionstorage

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

9、如何使用缓存？

可以基于http的头信息控制缓存

ajax请求对早期的IE浏览器默认就是缓存的，可以通过时间戳防止缓存

10、谈谈你对预加载的理解？

Web预加载指的是在网页全加载完成之前，在页面优先显示一些主要内容，以提高用户体验。对于一个较庞大的网站，如果没有使用预加载技术，用户界面就会长时间显示一片空白，直到资源加载完成，页面才会显示内容。

例如，可以通过js预先从服务加载图片资源(动态创建Image，设置src属性)，只要浏览器把图片下载到本地，就会被缓存，再次请求相当的src时就会优先寻找浏览器缓存，提高访问速度。

11、缓存和预加载的区别是什么？

缓存就是把请求过的数据缓存起来，下次请求的时候直接使用缓存内容，提高响应速度

预加载指的是提前把需要的内容加载完成，访问的时候可以明天提高响应效率，比如图片的预加载（可以提前加载一定数量的图片，当用户访问图片的时候一般只看前几张，由于是预加载好的，所以速度比较快）

12、图片如何压缩？

可以使用一些在线的图片压缩工具

优先用 png 而不是 gif

压缩 png

去掉 jpg 的 metadata

压缩 gif 动画

尝试使用 png8

避免使用 AlphaImageLoader

压缩动态生成的图像

使 favicon 更小 可缓存

使用 CSS Sprites

13、压缩文件有哪些方法？

使用Grunt、Sass、ant压缩

14、如何区分静态页面和动态页面？

答：要区分这两个，最简单的方法就是看后缀了，动态网页网址中有两个标志性的符号“?”和“&”（有的可能没有&），这个问号和&就是用来带参数的。现在几乎爱所有的网页都是动态网页。

15、字符串拼接和模板引擎，项目中会如何操作？模板引擎会不会利于SEO优化？

简单的数据渲染，拼接字符串即可，稍微复杂的业务逻辑使用前端模板引擎，过于复杂的页面基本上使用后台渲染的方式；模板引擎会影响SEO优化，为了解决这个问题，需要关注SEO的页面最好采用后台渲染的方式。

16、前台兼容性问题有哪些？

答：主要是常用浏览的（前端）API差异，渲染差异，等等

17、你如何对网站的文件和资源进行优化?期待的解决方案包括？

答：文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

18、内存泄漏怎么理解？

答： IE6时代有bug，闭包会造成内存泄漏，这个现在已经无须考虑了。
其次，闭包本身不会造成内存泄漏，但闭包过多很容易导致内存泄漏。
这句话很矛盾，技术上讲，闭包是不会造成内存泄漏的，浏览器的bug除外。但是，闭包会造成对象引用的生命周期脱离当前函数的上下文，因此，如果不仔细考虑闭包函数的生命周期，的确有可能出现意料之外的内存泄漏，当然，从严格意义上讲，这是程序员自己的bug，而不是闭包的错。

19、微格式到底是做啥用？

答：是开放的数据格式，面向的是普通用户，任何用户可以透过简单的程序读取微格式内容。而不是像Flickr、Amazon、Google等提供特定的面向技术人员的API（一般基于XML-PRC、REST，相对复杂）。RSS具有微格式的部分优点，但限制还是比较多的，比如有限的元数据（标题、描述、URL等），不能更好地描述语义，不太容易与已存在的工具结合等。用微格式可以来聚合外部Blog，Flickr，YouTube，MapQuest，甚至MySpace里的内容。

微格式实际就是为现有的(X)HTML元素添加元数据和其他属性，增强语义。

20、懒加载是用滚轮判断高度好还是用插件？

使用插件比较好，插件考虑的问题比较全面，仅仅通过滚轮高度判断很容易导致一些副作用（比如一次性请求多次）

21、如何缓存整个页面，在没有网络的时候可以来回的跳转？

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

如需启用应用程序缓存，请在文档的 标签中包含 manifest 属性。

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

manifest 文件的建议的文件扩展名是：”.appcache”。

manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

实例 - 完整的 Manifest 文件

CACHE MANIFEST

# 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html 22、CDN是啥？ CDN的全称：是Content DeliveryNetwork，即内容分发网络，加速的意思，那么网站CND服务就是网站加速服务。 CDN加速原理：CDN加速将网站的内容缓存在网络边缘（离用户接入网络最近的地方），然后在用户访问网站内容的时候，通过调度系统将用户的请求路由或者引导到离用户接入网络最近或者访问效果最佳的缓存服务器上，有该缓存服务器为用户提供内容服务；相对于直接访问源站，这种方式缩短了用户和内容之间的网络距离，从而达到加速的效果。 CDN的特点： 1、本地加速 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度，并大大提高以上性质站点的稳定性 2、镜像服务 消除了不同运营商之间互联的瓶颈造成的影响，实现了跨运营商的网络加速，保证不同网络中的用户都能得到良好的访问质量。 3、远程加速 远程访问用户根据DNS负载均衡技术 智能自动选择Cache服务器，选择最快的Cache服务器，加快远程访问的速度 4、带宽优化 自动生成服务器的远程Mirror(镜像)cache服务器，远程用户访问时从cache服务器上读取数据，减少远程访问的带宽、分担网络流量、减轻原站点WEB服务器负载等功能。 5、集群抗攻击 广泛分布的CDN节点加上节点之间的智能冗于机制，可以有效地预防黑客入侵以及降低各种D.D.o.S攻击对网站的影响，同时保证较好的服务质量。 23、浏览器一次可以从一个域名下请求多少资源？ 浏览器的并发请求数目限制是针对同一域名的，同一时间针对同一域名下的请求有一定数量限制，不同浏览器这个限制的数目不一样，超过限制数目的请求会被阻塞； 目前的话，所有浏览器的并发数目一般限制在10以内。 24、什么是垃圾回收机制（GC）？ 早期的计算机语言，比如C和C++，需要开发者手动的来跟踪内存，这种机制的优点是内存分配和释放的效率很高。但是它也有着它的缺点，程序员很容易不小心忘记释放内存，从而造成内存的泄露。 新的编程语言，比如JAVA, C#， javascript, 都提供了所谓“垃圾回收的机制”，运行时自身会运行相应的垃圾回收机制。程序员只需要申请内存，而不需要关注内存的释放。垃圾回收器(GC)会在适当的时候将已经终止生命周期的变量的内存给释放掉。GC的优点就在于它大大简化了应用层开发的复杂度，降低了内存泄露的风险。 25、image和canvas在处理图片的时候有什么区别？ image是通过对象的形式描述图片的 canvas通过专门的API将图片绘制在画布上 26、简述移动开发的注意点,如何做好不同手机的适配,你以前的项目是怎么做的? 1、单独做移动端项目，采用百分比布局 2、采用响应式的方式做适配 27、响应式布局的时候，轮播图使用两张不同的图片去适配大屏幕和超小屏幕，还是一张图片进行压缩适配不同终端，说明原因？ 最好使用两张不同大小的图片去适配大屏幕和超小屏幕，这样可以针对不同设备的屏幕大小，来加载响应的图片，减少超小屏幕设备的网络流量消耗，加快响应速度，同时防止图片在大屏幕下分辨率不够导致失真的问题。 28、http和tcp有什么区别？ TPC/IP协议是传输层协议，主要解决数据如何在网络中传输，是一种“经过三次握手”的可靠的传输方式； HTTP协议即超文本传送协议(Hypertext Transfer Protocol )，是应用层协议，是Web联网的基础，也是手机联网常用的协议之一，HTTP协议是建立在TCP协议之上的一种应用。 29、向git中添加一个文件并commit，然后push到remote server,请写出相关命令？ $git add README.md$git commit -m “add README.md” $ git push origin master 30、请把以下HTML文档翻译成MarkDown格式？

Header

Hello world!

### Header Hello world 1. Number One 2. Number Two 35、设计模式有哪些？列举你在前端开发工作中自己应用到或者了解到其他框架所用到的设计模式？ 单例、工厂、观察者、适配器、代理模式 36、请描述你熟悉的语言的垃圾回收(GC)机制，他们对循环引用是如何处理的？如何查找内存泄漏(MemoryLeak)? JavaScript的垃圾回收机制主要是根据数据是否还存在引用，没有引用的数据空间可能在某个时间被回收；在java中垃圾回收机制采用对象遍历来解决循环引用；windows的任务管理器就可以查看到内存泄露 31、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 答：Ie(Ie内核) 火狐（Gecko）谷歌（webkit） opear(Presto) 32、写出几种IE6 BUG的解决方法？ 答：1.双边距BUG float引起的使用display 2.3像素问题使用float引起的使用dislpay:inline-3px 3.超链接hover 点击后失效使用正确的书写顺序 link visitedhover active 4.Iez-index问题给父级添加position:relative 5.Png 透明使用js代码改 6.Min-height最小高度！Important 解决’ 7.select在ie6下遮盖使用iframe嵌套 8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08line-height:1px） 33、图片优化 项目中图片处理相关的优化，项目中用到的优化方案，图片大小达到多少的时候选择处理？ 答：1、首先了解在web开发中常见的图片有那些格式。 JPG 通常使用的背景图片，照片图片，商品图片等等。这一类型的图片都属于大尺寸图片或较大尺寸图片一般使用的是这种格式。 PNG 这种格式的又分为两种一种PNG-8，一种 PNG-24。 PNG-8格式不支持半透明，也是IE6兼容的图片存储方式。 PNG-24图片质量要求较高的半透明或全透明背景，保存成PNG-24更合适（为了兼容IE可以试用js插件pngfix）一般是背景图标中使用的多。 GIF 这种格式显而易见的是在需要gif动画的时候使用了。 2．优化方案 l 样式代替图片 例如：半透明、圆角、阴影、高光、渐变等。这些效果主流的浏览器都能够完美支持，而对于那些低端浏览器，我们并不会完全抛弃他们，“渐进增强”则是一个很好的解决方案。 l 精灵图 CSS Sprites，将同类型的图标或按钮等背景图合到一张大图中，减少页面请求。 l 字体图标 Icon Font，将图标做成字体文件。优点是图标支持多个尺寸，兼容所有浏览器，减少页面请求等。美中不足的是只支持纯色的icon。SVG，对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！ l Base64 将图片转化为base64编码格式，资源内嵌于CSS或HTML中，不必单独请求。 Base64格式 data:[][;charset=][;base64], Base64 在CSS中的使用 .demoImg{ background-image: url(“data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAA L….”); } Base64 在HTML中的使用 #left { color: white !important; } #container #left { color: red; } #left { color: green !important; } .container #left { color: blue; } 则在如下html中

left

#left最终color属性值为？绿色 10、下面这段代码想要循环延时输出结果0 1 2 3 4，请问输出结果是否正确，如果不正确说明为什么，并修改循环内的代码使其输出正确的结果。 for (var i = 0; i #classA{color:yellow}; p.classB(color:red);

123

//p#classA{color：black} 19、关于正则表达式声明6位数字的邮编，一下代码正确的是(C) A.var reg = /\d6/; B.var reg = \d{6}\; C.var reg = /\d{6}/; D.var reg = new RegExp (“\d{6}”); 20、关于JavaScript里xml处理，一下说明正确的(A) A.xml是种可扩展标记语言，格式更规范，是作为未来html的替代 //貌似XML是被替代的 B.Xml一般用于传输和存储数据，是对html的补充，两者的目的不同 C.在JavaScript里解析和处理xml数据时，因为浏览器的不同，其做法也不同 D.在IE浏览器里处理xml，首先需要创建ActiveXObject对象 21、请选择对javascript理解有误的(B) A.javascript是网景公司开发的一种基于事件和驱动网页脚本语言 B.JScript是javascript的简称 //微软自己的浏览器才支持 C.FireFox和IE存在大量兼容性问题的主要原因在于他们对javascript的支持不同 D.AJAX技术一定要使用javascript技术 22、在Jquery中下面哪一个是用来追加到指定元素的末尾(B) A.inserAfter() B.Append() C.appendTo() D.After() 23、在javascript中定义变量var a=”35”,var b = “7”运算a % b 的结果为(C) A.357 B.57 C.0 D.5 24、下面哪个属于javascript的字符型C A.False B.你好 C.“123” D.Null 25、下面哪个属于javascript的布尔值(C) A.1.2 B.”true” C.false D.null 26、请选择结果为真的表达式(C) A.null instanceof Object B.Null === undefined; C.null == undefined D.NaN == NaN 27、下列运算方式不属于逻辑运算的是(D) A.!a B.a&&b C.a||b D.a>b 28、声明一个对象，给它加上name属性和show方法显示其name值，以下代码中正确的是(D) A.var obj = [name : “zhangsan” ,show: function(){alert(name);}]; B.Var obj = {name : “zhangsan”,show: “alert(this.name)”}; C.Var obj = {name : “zhangsan”,show: function () {alert(name);}}; D.Var obj = {name : “zhangsan”,show: function () {alert(this.name);}} 29、以下过于Array数组对象的说法不正确的是(C) A.对数组里数据的排序可以用sort函数，如果排序效果非预期，可以给sort函数加一个排序函数的参数 B.reverse用于对数组数据的倒序排列 C.向数组的最后位置加一个新元素，可以用pop方法 //push吧 D.unshift方法用于向数组删除一个元素 30、要将页面的状态显示”已经选中该文本”，下列JavaScript语句正确的是(A) A.window.status = “已经选中该文本” B.Document.status = “已经选中该文本” C.Window.screen = “已经选中该文本” D.Document.screen = “已经选中该文本” 31、点击页面的按钮，使之打开一个新窗口，加载一个页面，以下JavaScript代码中可执行的是(D) A. B. C. D. 32、下面的JavaScript语句中，实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空(B) A.for(var i = 0; i