常见的前端开发⾯试题（附答案）
转载 ⾃
1.讲讲输⼊完⽹址按下回车，到看到⽹页这个过程中发⽣了什么
a. 域名解析
b. 发起TCP的3次握⼿
c. 建⽴TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页⾯进⾏渲染呈现给⽤户
2.谈谈你对前端性能优化的理解
a. 请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
b. 请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体
c. 缓存利⽤：使⽤CDN，使⽤外部JavaScript和CSS，添加Expires头，减少DNS查，配置ETag，使AjaX可缓存
d. 页⾯结构：将样式表放在顶部，将脚本放在底部，尽早刷新⽂档的输出
e. 代码校验：避免CSS表达式，避免重定向
3.前端 MV*框架的意义
早期前端都是⽐较简单，基本以页⾯为⼯作单元，内容以浏览型为主，也偶尔有简单的表单操作，基本不太需要框架。
随着 AJAX 的出现，Web2.0的兴起，⼈们可以在页⾯上可以做⽐较复杂的事情了，然后前端框架才真正出现了。
如果是页⾯型产品，多数确实不太需要它，因为页⾯中的 JavaScript代码，处理交互的绝对远远超过处理模型的，但是如果是应⽤软件类产品，这就太需要了。
长期做某个⾏业软件的公司，⼀般都会沉淀下来⼀些业务组件，主要体现在数据模型、业务规则和业务流程，这些组件基本都存在于后端，在前端很少有相应的组织。
从协作关系上讲，很多前端开发团队每个成员的职责不是很清晰，有了前端的 MV框架，这个状况会⼤有改观。
之所以感受不到 MV*框架的重要性，是因为Model部分代码较少，View的相对多⼀些。如果主要在操作View和Controller，那当然jQuery 这类库⽐较好⽤了。
4.请简述盒模型
IE6盒⼦模型与W3C盒⼦模型。
⽂档中的每个元素被描绘为矩形盒⼦。盒⼦有四个边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。
CSS3中有个box-sizing属性可以控制盒⼦的计算⽅式，
content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。（W3C盒⼦模型）
border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值。（IE6盒⼦模型）
5.请你谈谈Cookie的弊端
a. 每个特定的域名下最多⽣成的cookie个数有限制
b. IE和Opera 会清理近期最少使⽤的cookie，Firefox会随机清理cookie
c. cookie的最⼤⼤约为4096字节，为了兼容性，⼀般不能超过4095字节
d. 安全性问题。如果cookie被⼈拦截了，那⼈就可以取得所有的session信息。
6.浏览器本地存储
在HTML5中提供了sessionStorage和localStorage。
sessionStorage⽤于本地存储⼀个会话（session）中的数据，这些数据只有在同⼀个会话中的页⾯才能访问并且当会话结束后数据也随之销毁，是会话级别的存储。
localStorage⽤于持久化的本地存储，除⾮主动删除数据，否则数据是永远不会过期的。
7.web storage和cookie的区别
a. Cookie的⼤⼩是受限的
b. 每次你请求⼀个新的页⾯的时候Cookie都会被发送过去，这样⽆形中浪费了带宽
c. cookie还需要指定作⽤域，不可以跨域调⽤
d. Web Storage拥有setItem,getItem等⽅法，cookie需要前端开发者⾃⼰封装setCookie，getCookie
e. Cookie的作⽤是与服务器进⾏交互，作为HTTP规范的⼀部分⽽存在 ，⽽Web Storage仅仅是为了在本地“存储”数据⽽⽣
f. IE7、IE6中的UserData通过简单的代码封装可以统⼀到所有的浏览器都⽀持web storage
8.对BFC规范的理解
BFC全称是Block Formatting Context，即块格式化上下⽂。它是CSS2.1规范定义的，关于CSS渲染定位的⼀个概念。
BFC是页⾯CSS 视觉渲染的⼀部分，⽤于决定块盒⼦的布局及浮动相互影响范围的⼀个区域。
BFC的⼀个最重要的效果是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
利⽤BFC可以闭合浮动，防⽌与浮动元素重叠。
9.线程与进程的区别
a. ⼀个程序⾄少有⼀个进程，⼀个进程⾄少有⼀个线程
b. 线程的划分尺度⼩于进程，使得多线程程序的并发性⾼
c. 进程在执⾏过程中拥有独⽴的内存单元，⽽多个线程共享内存，从⽽极⼤地提⾼了程序的运⾏效率
d. 每个独⽴的线程有⼀个程序运⾏的⼊⼝、顺序执⾏序列和程序的出⼝。但是线程不能够独⽴执⾏，必须依存在应⽤程序中，由应⽤程序提供多个线程执⾏控制
e. 多线程的意义在于⼀个应⽤程序中，有多个执⾏部分可以同时执⾏。但操作系统并没有将多个线程看做多个独⽴的应⽤，来实现进程的调度和管理以及资源分配
10.请说出三种减少页⾯加载时间的⽅法
a. 尽量减少页⾯中重复的HTTP请求数量
b. 服务器开启gzip压缩
c. css样式的定义放置在⽂件头部
d. Javascript脚本放在⽂件末尾
e. 压缩合并Javascript、CSS代码
f. 使⽤多域名负载⽹页内的多个⽂件、图⽚
11.你都使⽤哪些⼯具来测试代码的性能？
JSPerf, Dromaeo
12.你遇到过⽐较难的技术问题是？你是如何解决的？
13.你常使⽤的库有哪些？常⽤的前端开发⼯具？开发过什么应⽤或组件？
14.列举IE与其他浏览器不⼀样的特性？
a. IE的排版引擎是Trident （⼜称为MSHTML）
b. Trident内核曾经⼏乎与W3C标准脱节（2005年）
c. Trident内核的⼤量 Bug等安全性问题没有得到及时解决
d. JS⽅⾯，有很多独⽴的⽅法，例如绑定事件的attachEvent、创建事件的createEventObject等
e. CSS⽅⾯，也有⾃⼰独有的处理⽅式，例如设置透明，低版本IE中使⽤滤镜的⽅式
15.什么叫优雅降级和渐进增强？
渐进增强 progressive enhancement：
针对低版本浏览器进⾏构建页⾯，保证最基本的功能，然后再针对⾼级浏览器进⾏效果、交互等改进和追加功能达到更好的⽤户体验。优雅降级 graceful degradation：
⼀开始就构建完整的功能，然后再针对低版本浏览器进⾏兼容。
区别：
a. 优雅降级是从复杂的现状开始，并试图减少⽤户体验的供给
b. 渐进增强则是从⼀个⾮常基础的，能够起作⽤的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；⽽渐进增强则意味着朝前看，同时保证其根基处于安全地带
16.WEB应⽤从服务器主动推送Data到客户端有那些⽅式？
a. html5 websoket
b. WebSocket 通过 Flash
c. XHR长时间连接
d. XHR Multipart Streaming
e. 不可见的Iframe
f. 标签的长时间连接(可跨域)
17.对前端界⾯⼯程师这个职位是怎么样理解的？
a. 前端是最贴近⽤户的程序员，前端的能⼒就是能让产品从 90分进化到 100 分，甚⾄更好
b. 参与项⽬，快速⾼质量完成实现效果图，精确到1px；
c. 与团队成员，UI设计，产品经理的沟通；
d. 做好的页⾯结构，页⾯重构和⽤户体验；
e. 处理hack，兼容、写出优美的代码格式；
f. 针对服务器的优化、拥抱最新前端技术。
18.你在现在的团队处于什么样的⾓⾊，起到了什么明显的作⽤？
请⾃⾏根据⾃⼰情况做回答，这个没有统⼀标准答案。
19.你的优点是什么？缺点是什么？
请⾃⾏根据⾃⼰情况做回答，这个没有标准答案。
20.如何管理前端团队?
请⾃⾏根据⾃⼰情况做回答，这个没有标准答案。
21.最近在学什么？能谈谈你未来3，5年给⾃⼰的规划吗？
请⾃⾏根据⾃⼰情况做回答，这个没有标准答案。
22.平时如何管理你的项⽬？
a. 先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；
b. 编写习惯必须⼀致（例如都是采⽤继承式的写法，单样式都写成⼀⾏）；
c. 标注样式编写⼈，各模块都及时标注（标注关键样式调⽤的地⽅）；
d. 页⾯进⾏标注（例如 页⾯ 模块 开始和结束）；
e. CSS跟HTML 分⽂件夹并⾏存放，命名都得统⼀（例如style.css）；
f. JS 分⽂件夹存放 命名以该JS功能为准的英⽂翻译。
g. 图⽚采⽤整合的 images.png png8 格式⽂件使⽤ 尽量整合在⼀起使⽤⽅便将来的管理
23.说说最近最流⾏的⼀些东西吧？常去哪些⽹站？
CSDN、SegmentFault、php、MDN、css参考⼿册、iconfont、
underscore、github、Bootstrap、W3Shool、W3Cplus、caniuse
24.请解释⼀下 JavaScript 的同源策略
同源策略指的是：协议，域名，端⼝相同，同源策略是⼀种安全协议。
指⼀段脚本只能读取来⾃同⼀来源的窗⼝和⽂档的属性。
25.AMD和CMD 规范的区别？
AMD 提前执⾏依赖 - 尽早执⾏，requireJS 是它的实现
CMD 按需执⾏依赖 - 懒执⾏，seaJS 是它的实现
26.⽹站重构的理解
重构：在不改变外部⾏为的前提下，简化结构、添加可读性，⽽在⽹站前端保持⼀致的⾏为。
a. 使⽹站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
b. 对于移动平台的优化，针对于SEO进⾏优化
c. 减少代码间的耦合，让代码保持弹性
d. 压缩或合并JS、CSS、image等前端资源
27.浏览器的内核分别是什么?
IE浏览器的内核Trident；
Mozilla的Gecko；
Chrome的Blink（WebKit的分⽀）；
Opera内核原为Presto，现为Blink；
28.请介绍下cache-control
每个资源都可以通过 Cache-Control HTTP 头来定义⾃⼰的缓存策略
Cache-Control 指令控制谁在什么条件下可以缓存响应以及可以缓存多久
Cache-Control 头在 HTTP/1.1 规范中定义，取代了之前⽤来定义响应缓存策略的头（例如 Expires）。
29.前端页⾯有哪三层构成，分别是什么？作⽤是什么？
a. 结构层：由 HTML 或 XHTML 之类的标记语⾔负责创建，仅负责语义的表达。解决了页⾯“内容是什么”的问题。
b. 表⽰层：由CSS负责创建，解决了页⾯“如何显⽰内容”的问题。
c. ⾏为层：由脚本负责。解决了页⾯上“内容应该如何对事件作出反应”的问题。
30.知道的⽹页制作会⽤到的图⽚格式有哪些？
png-8，png-24，jpeg，gif，svg
Webp：⾕歌（google）开发的⼀种旨在加快图⽚加载速度的图⽚格式。图⽚压缩体积⼤约只有JPEG的2/3，并能节省⼤量的服务器带宽资源和数据空间。Facebook Ebay等知名⽹站已经开始测试并使⽤WebP格式。
Apng：全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展，可以实现png格式的动态图⽚效果。04年诞⽣，但⼀直得不到各⼤浏览器⼚商的⽀持，直到⽇前得到 iOS safari 8的⽀持，有望代替GIF成为下⼀代动态图标准。
31.⼀次js请求⼀般情况下有哪些地⽅会有缓存处理？
a. 浏览器端存储
b. 浏览器端⽂件缓存
c. HTTP缓存304
d. 服务器端⽂件类型缓存
e. 表现层&DOM缓存
32.⼀个页⾯上有⼤量的图⽚（⼤型电商⽹站），加载很慢，你有哪些⽅法优化这些图⽚的加载，给⽤户更好的体验[性能优化]。
a. 图⽚懒加载，滚动到相应位置才加载图⽚。
jquery框架面试题
b. 图⽚预加载，如果为幻灯⽚、相册等，将当前展⽰图⽚的前⼀张和后⼀张优先下载。
c. 使⽤CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图⽚为css图⽚的话。
d. 如果图⽚过⼤，可以使⽤特殊编码的图⽚，加载时会先加载⼀张压缩的特别厉害的缩略图，以提⾼⽤户体验。
33.谈谈以前端⾓度出发做好SEO需要考虑什么？
a. 了解搜索引擎如何抓取⽹页和如何索引⽹页
b. meta标签优化
c. 关键词分析
d. 付费给搜索引擎
e. 链接交换和链接⼴泛度（Link Popularity）
f. 合理的标签使⽤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。