前端面试题 -- 综合

前言

这篇文章总结一些前端面试过程中常常遇到的 HTTP、浏览器、SEO 等方面的问题，若是有须要了解其余面试问题的小伙伴， 请点击 这里，查看 HTML+CSS+JavaScript 等方面的问题。总结问题，分享给有须要的小伙伴,欢迎star关注

若是文章中有出现纰漏、错误之处，还请看到的小伙伴留言指正，先行谢过

如下 ↓

HTTP相关

1. HTTP有什么特色

• 简单快速：客户向服务器请求服务时，只需传送请求方法和路径
• 灵活：HTTP容许传输任意类型的数据对象。正在传输的类型由 Content-Type 加以标记
• 无链接：无链接的含义是限制每次链接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开链接 (深刻-持久链接、管线化)
• 无状态：HTTP协议是无状态协议( Cookie 的出现)

2. http和https协议有什么区别

http: 是互联网上应用最为普遍的一种网络协议，是一个客户端和服务器端请求和应答的标准（ TCP），用于从 WWW服务器传输超文本到本地浏览器的传输协议，它可使浏览器更加高效，使网络传输减小

https: 是以安全为目标的HTTP通道，简单讲是 HTTP 的安全版，即 HTTP 下加入 SSL 层，HTTPS 的安全基础是 SSL ，所以加密的详细内容就须要 SSL

• http 是超文本传输协议，信息是明文传输，https 则是具备安全性的 ssl 加密传输协议
• http 和 https 使用的是彻底不一样的链接方式，用的端口也不同，前者是 80 ，后者是 443
• http 的链接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 http 协议安全

参考 http与https的区别

3. http状态码有那些？分别表明是什么意思

经常使用 http 状态码：

• 200 OK 服务器成功处理了请求
• 301/302 Moved Permanently（重定向）请求的URL已移走
• 404 Not Found (页面丢失)未找到资源
• 403 服务器拒绝请求
• 408 （请求超时） 服务器等候请求时发生超时
• 501 Internal Server Error 服务器遇到一个错误，使其没法对请求提供服务
• 502 （错误网关） 服务器做为网关或代理，从上游服务器收到无效响应
• 504 （网关超时） 服务器做为网关或代理，可是没有及时从上游服务器收到请求

更多 参考 这里

4. 什么是HTTP持久化和管线化

出现背景： HTTP 最初的版本中，每进行一次 HTTP 通讯，就要断开一次 TCP 链接（无链接）

为解决上述问题，HTTP/1.1 增长了持久链接（HTTP Persistent Connections ）的方法，其特色是，只要一方未明确提出断开链接，则另外一方保持 TCP 链接状态

管线化是指将多个 HTTP 请求整批发送，在发送过程当中不用等待对方响应

管线化是在持久链接的基础上实现的，管线化的实现，可以同时并行发送多个请求，而不须要一个接一个的等待响应

5. Http报文

HTTP 报文是面向文本的，报文中的每个字段都是一些 ASCII 码串，各个字段的长度是不肯定的。 HTTP 有两类报文： 请求报文和响应报文

HTTP的这两种报文都由三部分组成：开始行、首部行、实体主体

参考 这里

6. 从输入URL到页面加载全过程

参考 这里

7. 为何利用多个域名来存储网站资源会更有效

• CDN 缓存更方便
• 突破浏览器并发限制
• 节约 cookie 带宽
• 节约主域名的链接数，优化页面响应速度
• 防止没必要要的安全问题

浏览器相关

1. 浏览器是由什么组成的

从原理构成上分为七个模块，分别是 User Interface（用户界面）、 Browser engine（浏览器引擎） 、 Rendering engine（渲染引擎） 、 Networking（网络） 、 JavaScript Interpreter（js解释器） 、 UI Backend（UI后端） 、 Date Persistence（数据持久化存储）

其中，最重要的是渲染引擎（内核）和 JavaScript 解释器（ JavaScript引擎）

浏览器内核主要负责 HTML 、CSS 的解析，页面布局、渲染与复合层合成; JavaScript 引擎负责 JavaScript 代码的解释与执行

2. 浏览器缓存机制

浏览器的缓存机制也就是咱们说的 HTTP 缓存机制，其机制是根据 HTTP 报文的缓存标识进行的

参考 这里

3. 浏览器渲染机制

参考 这里

4. 几个很实用的BOM属性对象方法

location 对象：主要存储 url 相关信息

history 对象：浏览历史信息相关

history.go() // 前进或后退指定的页面数 history.go(num);
history.back() // 后退一页
history.forward() // 前进一页

navigator 对象：浏览器信息相关

navigator.userAgent  //返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.cookieEnabled // 返回浏览器是否支持(启用)cookie

其余

1. 谈谈你对SEO的理解

SEO：搜索引擎优化，其目的是为了使网站可以更好的被搜索引擎抓取，提升在搜索引擎内的天然排名，从而带来更多的免费流量，获取收益

SEO主要有两种方法，站内优化和站外优化

前端SEO优化

2. 前端怎么控制管理路由

路由就是浏览器地址栏中的 url 与所见网页的对应关系

前端路由的实现方式：

基于 hash（ ocation.hash+hashchange事件）

展现层面也就是切换 # 后面的内容，呈现给用户不一样的页面。如今愈来愈多的单页面应用，基本都是基于 hash 实现

特性：

• url 中 hash 值的变化并不会从新加载页面
• hash 值的改变，都会在浏览器的访问历史中增长一个记录，也就是能经过浏览器的回退、前进按钮控制 hash 的切换
• 咱们能够经过 hashchange 事件，监听到 hash 值的变化，从而响应不一样路径的逻辑处理

基于 istory 新 API（ history.pushState()+popState 事件）

window.history.pushState(null, null, "http://www.google.com");

这两个 API 的相同之处是都会操做浏览器的历史记录，而不会引发页面的刷新。不一样之处在于，pushState 会增长一条新的历史记录，而 replaceState 则会替换当前的历史记录

详见History API -MDN

3. 防抖和节流的区别

防抖：任务频繁触发的状况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行

节流：指定时间间隔内只会执行一次任务

推荐 这里

4. 页面重构怎么操做

页面重构就是根据原有页面内容和结构的基础上，经过 div+css 写出符合 web 标准的页面结构。

具体实现要达到如下三点：

• 功能不全页面的重构：页面功能符合用户体验、用户交互结构完整，可经过标准验证，
• 代码重构：代码质量、SEO 优化、页面性能、更好的语义化、浏览器兼容、CSS 优化
• 充分考虑到页面在站点中的“做用和重要性”，并对其进行有针对性的优化

后记

这篇文章收集的问题虽然很少，可是每一部分单独拎出来均可以写一篇深刻理解，因此仍是很须要耐心才能够看完的

这段时间收集了不少前端面试的相关问题，发现有些东西仍是很须要深刻理解的，有时候仅仅停留在 ‘会用’ 的阶段仍是远远不够的。因此，后面有时间也会聊一聊本身尝试的东西，发现的问题，有兴趣一块儿探索的小伙伴能够关注哦

期待同行 GitHub完整版面试题

以上