前端面试题集锦（高级篇）

常见的浏览器内核有哪些？介绍一下你对浏览器内核的理解？

1. Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

• ** Gecko内核**：Mozilla Firefox.
• WebKit内核：Safari、Chrome.
• Presto：OperaPresto

浏览器内核主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

• 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
• **JS引擎 **：解析和执行javascript来实现网页的动态效果。

---

HTTP 状态消息 200 302 304 403 404 500 分别表示什么？

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

• 200：OK 请求已成功，请求所希望的响应头或数据体将随此响应返回。
• 201：Created 请求成功并且服务器创建了新的资源
• 202：Accepted 服务器已接受请求，但尚未处理
• 301：Moved Permanently 请求的网页已永久移动到新位置。
• 302： Found 临时性重定向。请求的资源临时从不同的 URL 响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在 Cache-Control 或 Expires 中进行了指定的情况下，这个响应才是可缓存的。
• 303：See Other 临时性重定向，且总是使用 GET 请求新的 URL
• 304：Not Modified 自从上次请求后，请求的网页未修改过。如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304 响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。
• 400：** Bad Request** 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
• 401：** Unauthorized** 请求未授权。
• 403：Forbidden 禁止访问。服务器已经理解请求，但是拒绝执行它。
• 404：Not Found 找不到如何与 URL 相匹配的资源。请求失败，请求所希望得到的资源未被在服务器上发现。
• 500：Internal Server Error 最常见的服务器端错误。服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。
• 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

---

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

注：这题胜在区分度高，知识点覆盖广，再不懂的人，也能答出几句， 而高手可以根据自己擅长的领域自由发挥，从URL规范、HTTP协议、DNS、CDN、数据库查询、 到浏览器流式解析、CSS规则构建、layout、paint、onload/domready、JS执行、JS API绑定等等；

简洁版(4次“握手”)：

1. 浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
2. 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
3. 浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
4. 载入解析到的资源文件，渲染页面，完成。

详细版：

1. 浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
2. 调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
3. 通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;
4. 进行HTTP协议会话，客户端发送报头(请求报头);
5. 进入到web服务器上的 Web Server，如 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,执行事件绑定等，页面显示完成。

---

优雅降级和渐进增强？

• 优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会针对旧版本的IE进行降级处理了,使之在旧式浏览器上以某种形式降级体验却不至于完全不能用。 如：border-shadow

• 渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新版本浏览器才支持的功能,向页面增加不影响基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。 如：默认使用flash上传，但如果浏览器支持 HTML5 的文件上传功能，则使用HTML5实现更好的体验；

---

WEB应用从服务器主动推送Data到客户端有那些方式？

• html5提供的Websocket

• 不可见的iframe
• WebSocket通过Flash
• XHR长时间连接
• XHR Multipart Streaming