前端常见面试题（附答案）

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. IE七、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.net、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. 图片懒加载，滚动到相应位置才加载图片。

b. 图片预加载，若是为幻灯片、相册等，将当前展现图片的前一张和后一张优先下载。

c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，若是图片为css图片的话。

d. 若是图片过大，可使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提升用户体验。

33.谈谈之前端角度出发作好SEO须要考虑什么？

a. 了解搜索引擎如何抓取网页和如何索引网页

b. meta标签优化

c. 关键词分析

d. 付费给搜索引擎

e. 连接交换和连接普遍度（Link Popularity）

f. 合理的标签使用