说起来，也浪了一年了，金三银四思无邪，又快到了跳槽的旺季。 想想你 #b 的公司和 #b 的老板，还有说不出口的工资，不能再逃避了，勇敢面对吧，结果一定不会辜负你的努力的。 面试题搞起来。题目答案仅供参考。

第一部分：基础篇 HTML、HTTP、web综合问题

1. 前端需要注意哪些SEO

① 合理的 title、 description 、 keywords , 搜索引擎对这三项的权重逐次减小， title 值强调重点即可，重要关键词出现不要超过2次，并且要靠前，不同页面的 title 要有所不同；description 尽量把页面内容高度概括，长度合适，不要过分堆砌关键词，不同页面的 description 也要有所不同；keywords 列举出重要关键词即可

② 语义化的 HTML 代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

③ 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓 取长度有限制，保证重要内容一定会被抓取

④ 重要内容尽量不要用 js 输出：爬虫不会执行js获取内容

⑤ 少使用 iframe：搜索引擎不会抓取 iframe 中的内容

⑥ 非装饰性图片必须加 alt

⑦ 提高网站速度：网站速度是搜索引擎排序的一个重要指标

2. <img> 的 title 和 alt 有什么区别

title属性

① title属性并不是必须的。

② title属性规定元素的额外信息，有视觉效果，当鼠标放到文字或是图片上时有文字显示。

③ title属性并不作为搜索引擎抓取图片的参考，更多倾向于用户体验的考虑。

alt属性

① alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户，以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候，图片的替换文字。

② alt属性值的长度必须少于100个英文字符

③ alt属性是img标签的必须属性，如果没有特别意义的图片，可以写

④ alt属性是搜索引擎判断图片与文字是否相关的重要依据，alt属性添加到img主要的目的才是为了SEO

3.HTTP常见的请求方法及作用

① GET 方法 发送一个请求来取得服务器上的某一项资源

② POST 方法 向 URL 指定的资源提交数据或附加新的数据

③ PUT 方法 跟 POST 方法很像，也是向服务器提交数据。但它们之间有不同，PUT 指定了资源在服务器上的位置，而 POST 没有

④ HEAD 方法 只请求页面的首部

⑤ DELETE 方法 删除服务器上的某资源

⑥ OPTIONS 方法 它用于获取当前 URL 所支持的方法。如果请求成功，会有一个 Allow 的头包含类 似 “GET,POST” 这样的信息

⑦ TRACE 方法 被用于激发一个远程的，应用层的请求消息回路

⑧ CONNECT 方法 把请求连接转换到透明的 TCP/IP 通道

4.从浏览器地址栏输⼊url到显示⻚⾯的步骤（三个版本，自取所需）

基础版本:

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

2） 服务器交给后台处理完成后返回数据，浏览器接收⽂件（ HTML、JS、CSS 、图象等）；

3） 浏览器对加载到的资源（ HTML、JS、CSS 等）进⾏语法解析，建⽴相应的内部数据结构（ 如 HTML 的 DOM ）；

4）载⼊解析到的资源⽂件，渲染⻚⾯，完成。

详细版:

1）在浏览器地址栏输⼊URL

2）浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤

a. 如果资源未缓存，发起新请求

b. 如果已缓存，检验是否⾜够新鲜，⾜够新鲜直接提供给客户端，否则与服务器进⾏验证

c. 检验新鲜通常有两个HTTP头进⾏控制 Expires 和 Cache-Control ：

HTTP1.0提供Expires，值为⼀个绝对时间表示缓存新鲜⽇期

HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最⼤新鲜时间

3） 浏览器解析URL获取协议，主机，端⼝，path

4）浏览器组装⼀个HTTP（GET）请求报⽂

5）浏览器获取主机ip地址，过程如下：

a. 浏览器缓存

b. 本机缓存

c. hosts⽂件

d. 路由器缓存

e. ISP DNS缓存

f. DNS递归查询（可能存在负载均衡导致每次IP不⼀样）

6）打开⼀个socket与⽬标IP地址，端⼝建⽴TCP链接，三次握⼿如下：

a. 客户端发送⼀个TCP的SYN=1，Seq=X的包到服务器端⼝

b. 服务器发回SYN=1， ACK=X+1， Seq=Y的响应包

c. 客户端发送ACK=Y+1， Seq=Z

7） TCP链接建⽴后发送HTTP请求

8） 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使⽤HTTP Host头部判断请求的服务程序

9）服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码

10） 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作

11） 服务器将响应报⽂通过TCP连接发送回浏览器

12） 浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重⽤，关闭TCP连接的四次握⼿如下：

a. 主动⽅发送Fin=1， Ack=Z， Seq= X报⽂

b. 被动⽅发送ACK=X+1， Seq=Z报⽂

c. 被动⽅发送Fin=1， ACK=X， Seq=Y报⽂

d. 主动⽅发送ACK=Y， Seq=X报⽂

13） 浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同

14） 如果资源可缓存，进⾏缓存

15） 对响应进⾏解码（例如gzip压缩）

16）根据资源类型决定如何处理（假设资源为HTML⽂档）

17）解析HTML⽂档，构件DOM树，下载资源，构造CSSOM树，执⾏js脚本，这些操作没有严格的先后顺序，以下分别解释

18） 构建DOM树： a. Tokenizing：根据HTML规范将字符流解析为标记

b. Lexing：词法分析将标记转换为对象并定义属性和规则

c. DOM construction：根据HTML标记关系将对象组成DOM树

19） 解析过程中遇到图⽚、样式表、js⽂件，启动下载

20）构建CSSOM树：

a. Tokenizing：字符流转换为标记流

b. Node：根据标记创建节点

c. CSSOM：节点创建CSSOM树

21） 根据DOM树和CSSOM树构建渲染树 : a. 从DOM树的根节点遍历所有可⻅节点，不可⻅节点包括：

1） script , meta 这样本身不可⻅的标签。

2)被css隐藏的节点，如 display: none

b. 对每⼀个可⻅节点，找到恰当的CSSOM规则并应⽤

c. 发布可视节点的内容和计算样式

22） js解析如下： a.浏览器创建Document对象并解析HTML，将解析到的元素和⽂本节点添加到⽂档中，此时document.readystate为loading

b. HTML解析器遇到没有async和defer的script时，将他们添加到⽂档中，然后执⾏⾏内或外部脚本。这些脚本会同步执⾏，并且在脚本下载和执⾏时解析器会暂停。这样就可以⽤document.write()把⽂本插⼊到输⼊流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的⽂档内容

c. 当解析器遇到设置了async属性的script时，开始下载脚本并继续解析⽂档。脚本会在它下载完成后尽快执⾏，但是解析器不会停下来等它下载。异步脚本禁⽌使⽤document.write()，它们可以访问⾃⼰script和之前的⽂档元素

d. 当⽂档完成解析，document.readState变成interactive

e. 所有defer脚本会按照在⽂档出现的顺序执⾏，延迟脚本能访问完整⽂档树，禁⽌使⽤document.write()

f. 浏览器在Document对象上触发DOMContentLoaded事件

g. 此时⽂档完全解析完成，浏览器可能还在等待如图⽚等内容加载，等这些内容完成载⼊并且所有异步脚本完成载⼊和执⾏，document.readState变为complete，window触发load事件

23） 显示⻚⾯（HTML解析过程中会逐步显示⻚⾯）

详细简版：

1） 从浏览器接收 url 到开启⽹络请求线程（这⼀部分可以展开浏览器的机制以及进程与线程之间的关系）

2）开启⽹络线程到发出⼀个完整的 HTTP 请求（这⼀部分涉及到dns查询， TCP/IP 请求， 五层因特⽹协议栈等知识）

3）从服务器接收到请求到对应后台接收到请求（这⼀部分可能涉及到负载均衡，安全拦截以 及后台内部的处理等等）

4）后台和前台的 HTTP 交互（这⼀部分包括 HTTP 头部、响应码、报⽂结构、 cookie 等知识，可以提下静态资源的 cookie 优化，以及编码解码，如 gzip 压缩等）

5） 单独拎出来的缓存问题， HTTP 的缓存（这部分包括http缓存头部， ETag ， catch- control 等 ）

6）浏览器接收到 HTTP 数据包后的解析流程（解析 html -词法分析然后解析成 dom 树、解析 css ⽣成 css 规则树、合并成 render 树，然后 layout 、 painting 渲染、复合图层的合成、 GPU 绘制、外链资源的处理、 loaded 和 DOMContentLoaded 等）

7）CSS 的可视化格式模型（元素的渲染规则，如包含块，控制框， BFC ， IFC 等概念）

8）JS 引擎解析过程（ JS 的解释阶段，预处理阶段，执⾏阶段⽣成执⾏上下⽂， VO ，作⽤域链、回收机制等等）

9） 其它（可以拓展不同的知识模块，如 跨域，web安全， hybrid 模式等等内容）

5.如何进⾏⽹站性能优化:

A- content ⽅⾯:

减少 HTTP 请求：合并⽂件、 CSS 精灵、 inline Image 减少 DNS 查询：DNS 缓存、将资源分布到恰当数量的主机名 减少 DOM 元素数量

B- Server ⽅ ⾯

使 ⽤ CDN 配置 ETag 对组件使⽤ Gzip 压缩

C- Cookie ⽅ ⾯

减⼩ cookie ⼤⼩

D- css ⽅ ⾯

将样式表放到⻚⾯顶部 不使⽤ CSS 表达式 使⽤ 不使⽤ @import

E- Javascript ⽅ ⾯

将脚本放到⻚⾯底部 将 javascript 和 css 从外部引⼊ 压 缩 javascript 和 css 删除不需要的脚本

减少 DOM 访问

F- 图⽚⽅⾯

优化图⽚：根据实际颜⾊需要选择⾊深、压缩 优 化 css 精 灵 不要在 HTML 中拉伸图⽚

6- HTTP状态码及其含义

1XX ：信息状态码 100 Continue 继续，⼀般在发送 post 请求时，已发送了 http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息

2XX ：成功状态码 200 OK 正常返回信息 201 Created 请求成功并且服务器创建了新的资源 202 Accepted 服务器已接受请求，但尚未处理

3XX ：重定向 301 Moved Permanently 请求的⽹⻚已永久移动到新位置。 302 Found 临时性重定向。 303 See Other 临时性重定向，且总是使⽤ GET 请求新的 URI 。 304 Not Modified ⾃从上次请求后，请求的⽹⻚未修改过。

4XX ：客户端错误 400 Bad Request 服务器⽆法理解请求的格式，客户端不应当尝试再次使⽤相同的内容发起请求。 401 Unauthorized 请求未授权。 403 Forbidden 禁⽌访问。 404 Not Found 找不到如何与 URI 相匹配的资源。

5XX: 服务器错误 500 Internal Server Error 最常⻅的服务器端错误。 503 Service Unavailable 服务器端暂时⽆法处理请求（可能是过载或维护）。

7. 语义化的理解-⽤正确的标签做正确的事情！

HTML 语义化就是让⻚⾯的内容结构化，便于对浏览器、搜索引擎解析；

在没有样式 CSS 情况下也以⼀种⽂档格式显示，并且是容易阅读的；

搜索引擎的爬⾍依赖于标记来确定上下⽂和各个关键字的权重，利于 SEO ；

使阅读源代码的⼈对⽹站更容易将⽹站分块，便于阅读维护理解；

8. 介绍⼀下你对浏览器内核的理解？

主要分成两部分：渲染引擎( layout engineer 或 Rendering Engine )和 JS 引擎

渲染引擎：负责取得⽹⻚的内容（ HTML 、 XML 、图像等等）、整理讯息（例如加⼊CSS 等），以及计算⽹⻚的显示⽅式，然后会输出⾄显示器或打印机。浏览器的内核的不同对于⽹⻚的语法解释会有不同，所以渲染的效果也不相同。所有⽹⻚浏览器、电⼦邮件客户端以及其它需要编辑、显示⽹络内容的应⽤程序都需要内核

JS 引擎则：解析和执⾏ javascript 来实现⽹⻚的动态效果

最开始 渲染引擎 和 JS引擎 并没有区分的很明确，后来JS引擎越来越独⽴，内核就倾向于只指渲染引擎

9. html5有哪些新特性、移除了那些元素？

a- HTML5 现在已经不是 SGML 的⼦集，主要是关于图像，位置，存储，多任务等功能的增加

绘 画 canvas

⽤于媒介回放的 video 和 audio 元素

本地离线存储 localStorage ⻓期存储数据，浏览器关闭后数据不丢失

sessionStorage 的数据在浏览器关闭后⾃动删除

语意化更好的内容元素，⽐如 article 、 footer 、 header 、 nav 、 section

表单控件， calendar 、 date 、 time 、 email 、 url 、 search

新 的 技 术 webworker 、 websocket 、 Geolocation

b- 移除的元素：

纯表现的元素：basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u

对可⽤性产⽣负⾯影响的元素：frame 、 frameset 、 noframes

c- ⽀持 HTML5 新标签：

IE8/IE7/IE6 ⽀持通过 document.createElement ⽅法产⽣的标签 可以利⽤这⼀特性让这些浏览器⽀持 HTML5 新标签

浏览器⽀持新标签后，还需要添加标签默认的样式

d- 当然也可以直接使⽤成熟的框架、⽐如 html5shim

10. HTML5 的离线储存怎么使⽤，⼯作原理能不能解释⼀下？

在⽤户没有与因特⽹连接时，可以正常访问站点或应⽤， 在⽤户与因特⽹连接时，更新⽤户机器上的缓存⽂件

原理：

HTML5 的离线存储是基于⼀个新建的 .appcache ⽂件的缓存机制(不是存储技术)，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储下来。之后当⽹络在处于离线状态下时，浏览器会通过被离线存储的数据进⾏⻚⾯展示

如何使⽤：

⻚⾯头部像下⾯⼀样加⼊⼀个 manifest 的属性；在 cache.manifest ⽂件的编写离线存储的资源

在离线状态时，操作 window.applicationCache 进⾏需求实现

CACHE MANIFEST #v0.11
CACHE:
  js/app.js css/style.css 

NETWORK:
  resourse/logo.png 

FALLBACK:
  /offline.html

11. 浏览器是怎么对 HTML5 的离线储存资源进⾏管理和加载的呢?

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest ⽂件，如果是第⼀次访问app，那么浏览器就会根据 manifest ⽂件的内容下载相应的资源并且进⾏离线存储。

如果已经访问过app并且资源已经离线存储了，那么浏览器就会使⽤离线的资源加载⻚⾯，然后浏览器会对⽐新的 manifest ⽂件与旧的 manifest ⽂件，

如果⽂件没有发⽣改变，就不做任何操作，

如果⽂件改变了，那么就会重新下载⽂件中的资源并进⾏离线存储。

离线的情况下，浏览器就直接使⽤离线存储的资源。

12. 请描述⼀下 cookies ， sessionStorage 和 localStorage 的区别？

cookie 是⽹站为了标示⽤户身份⽽储存在⽤户本地终端（Client Side）上的数据（通常经过加密）

cookie 数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间 来回传递

sessionStorage 和 localStorage 不会⾃动把数据发给服务器，仅在本地保存

存储⼤⼩：

cookie 数据⼤⼩不能超过4k

sessionStorage 和 localStorage 虽然也有存储⼤⼩的限制，但⽐ cookie ⼤得多，可以达到5M或更⼤

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据

sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除

cookie 设置的 cookie 过期时间之前⼀直有效，即使窗⼝或浏览器关闭

13. iframe有那些缺点？

a- iframe 会阻塞主⻚⾯的 Onload 事件

b- 搜索引擎的检索程序⽆法解读这种⻚⾯，不利于 SEO

c- iframe 和主⻚⾯共享连接池，⽽浏览器对相同域的连接有限制，所以会影响⻚⾯的并⾏加载

d- 使⽤ iframe 之前需要考虑这两个缺点，所以..

如果需要使⽤ iframe ，最好是通过javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题

14. WEB标准以及W3C标准是什么?

标签闭合

标签⼩写

不乱嵌套

使⽤外链 css 和 js

结构、⾏为、表现分离

15. xhtml和html有什么区别?

a- ⼀个是功能上的差别：主要是 XHTML 可兼容各⼤浏览器、⼿机以及 PDA ，并且浏览器也能快速正确地编译⽹⻚

b- 另外是书写习惯的差别：XHTML 元素必须被正确地嵌套，闭合，区分⼤⼩写，⽂档必须拥有根元素

16. Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

⻚⾯被加载的时， link 会同时被加载

@imort ⻚⾯被加载的时， link 会同时被加载，⽽ @import 引⽤的 CSS 会等到⻚⾯被加载完再加载

import 只在 IE5 以上才能识别，⽽ link 是 XHTML 标签，⽆兼容问题

link ⽅式的样式的权重 ⾼于 @import 的权重

严格模式的排版和 JS运作模式是 以该浏览器⽀持的最⾼标准运⾏

在混杂模式中，⻚⾯以宽松的向后兼容的⽅式显示。模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作。

DOCTYPE 不存在或格式不正确会导致⽂档以混杂模式呈现

17. ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元素和块级元素有什么区别？

a- ⾏内元素有：a b span img input select strong

b- 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4… p

c- 空元素：

特点： ⾏内元素不可以设置宽⾼，不独占⼀⾏ 块级元素可以设置宽⾼，独占⼀⾏

18. HTML全局属性(global attribute)有哪些？

class :为元素设置类标识 data-* : 为元素增加⾃定义属性 draggable : 设置元素是否可拖拽 id : 元素 id ，⽂档内唯⼀ lang : 元素内容的的语⾔ style : ⾏内 css 样式 title : 元素相关的建议信息

19. Canvas和SVG有什么区别？

svg 绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点，能够⽅便的绑定事件或⽤来修改。

canvas 输出的是⼀整幅画布

svg 输出的图形是⽮量图形，后期可以修改参数来⾃由放⼤缩⼩，不会失真和锯⻮。 canvas 输出标量画布，就像⼀张图⽚⼀样，放⼤会失真或者锯⻮。

20. HTML5 为什么只需要写

HTML5 不基于 SGML ，因此不需要对 DTD 进⾏引⽤，但是需要 doctype 来规范浏览器的⾏为

⽽ HTML4.01 基于 SGML ,所以需要对 DTD 进⾏引⽤，才能告知浏览器⽂档所使⽤的⽂档类型

21. 如何在⻚⾯上实现⼀个圆形的可点击区域？

a- svg

b- border-radius

c- 纯 js 实现 需要求⼀个点在不在圆上简单算法、获取⿏标坐标等等

22. ⽹⻚验证码是⼲嘛的，是为了解决什么安全问题

区分⽤户是计算机还是⼈的公共全⾃动程序。

可以防⽌恶意破解密码、刷票、论坛灌⽔

有效防⽌⿊客对某⼀个特定注册⽤户⽤特定程序暴⼒破解⽅式进⾏不断的登陆尝试

23. viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
// width设置viewport宽度，为⼀个正整数，或字符串‘device-width’
// device-width 设 备 宽 度
// height设置viewport⾼度，⼀般设置了宽度，会⾃动解析出⾼度，可以不⽤设置
// initial-scale默认缩放⽐例（初始缩放⽐例），为⼀个数字，可以带⼩数
// minimum-scale允许⽤户最⼩缩放⽐例，为⼀个数字，可以带⼩数
// maximum-scale允许⽤户最⼤缩放⽐例，为⼀个数字，可以带⼩数
// user-scalable是否允许⼿动缩放

延伸提问:

怎样处理 移动端 1px 被 渲染成 2px 问题?

1)局部处理

mate 标签中的 viewport 属性 ， initial-scale 设置为 1;

rem 按照设计稿标准⾛，外加利⽤ transfrome 的 scale(0.5) 缩⼩⼀倍即可；

2)全局处理

mate 标签中的 viewport 属性 ， initial-scale 设置为 0.5

rem 按照设计稿标准⾛即可

24. 渲染优化

1）禁⽌使⽤ iframe （阻塞⽗⽂档 onload 事件）

iframe 会阻塞主⻚⾯的 Onload 事件

搜索引擎的检索程序⽆法解读这种⻚⾯，不利于SEO

iframe 和主⻚⾯共享连接池，⽽浏览器对相同域的连接有限制，所以会影响⻚⾯的并⾏加载使⽤ iframe 之前需要考虑这两个缺点。 如果需要使⽤ iframe ，最好是通过javascript动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题

2）禁⽌使⽤ gif 图⽚实现 loading 效果（降低 CPU 消耗，提升渲染性能）

3） 使⽤ CSS3 代码代替 JS 动画（尽可能避免重绘重排以及回流）

4）对于⼀些⼩图标，可以使⽤base64位编码，以减少⽹络请求。但不建议⼤图使⽤，⽐较耗费 CPU ⼩图标优势在于:

1-减少 HTTP 请求

2-避免⽂件跨域

3-修改及时⽣效

5）⻚⾯头部的 <style></style> <script></script> 会阻塞⻚⾯；

（因为 Renderer进程中 JS 线程和渲染线程是互斥的）

6） ⻚⾯中空的 href 和 src 会阻塞⻚⾯其他资源的加载 (阻塞下载进程)

7） 使用 ⽹⻚ gzip ， CDN 托管， data 缓存 ，图⽚服务器

8）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端⽤变量保存AJAX请求结果，每次操作本地变量，不⽤请求，减少请求次数

9）⽤ innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能

10）当需要设置的样式很多时设置 className ⽽不是直接操作 style

11）少⽤全局变量、缓存 DOM 节点查找的结果，减少 IO 读取操作

12）图⽚预加载，将样式表放在顶部，将脚本放在底部 加上时间戳

13）对普通的⽹站有⼀个统⼀的思路，就是尽量向前端优化、减少数据库操作、减少磁盘 IO

------------请叫我分割线----------

题目有点多了，凑合看吧。

希望能缓解你找工作的慌张。下次继续~