前端常见面试-进阶篇

上一篇文章，我们对js相关的知识点做了一个具体的介绍，有需要的朋友可自行查看：前端常见面试-js篇。当然对于前端面试来说，还会涉及到一些原理性的东西，具体这篇来重点探讨一下这方面的问题。

1、请讲述一下浏览器从输入一个url到网页展示的整个过程？

具体总结主要为6个步骤：

DNS解析：进行域名解析，找到对应的服务ip
TCP连接 ：进行三次握手，确保可以进行数据传输
发送HTTP请求：发送具体的请求信息
*服务器处理请求并返回HTTP报文：服务器返回详情的内容，具体包括：状态码,响应报头和响应报文
浏览器解析渲染页面：首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上
连接结束：断开TCP连接

2、如何优化网站性能？

答：http 请求方面，减少请求数量，请求体积，对应的做法是，对项目资源进行压缩，控制项目资源的 dns 解析在2到4个域名，提取公告的样式，公共的组件，雪碧图，缓存资源，压缩资源，提取公共资源压缩，提取 css ，js 公共方法不要缩放图片，使用雪碧图，使用字体图表（阿里矢量图库）使用 CDN，抛开无用的 cookie减少重绘重排，CSS属性读写分离，最好不要用js 修改样式，dom 离线更新，渲染前指定图片的大小js 代码层面的优化，减少对字符串的计算，合理使用闭包，首屏的js 资源加载放在最底部

3、promise的理解？

         Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。
         所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。
         有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

Promise缺点

1）无法取消Promise，一旦新建它就会立即执行，无法中途取消。
2）如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
3）当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
4）同步调用，在发起一个函数或方法调用时，没有得到结果之前，该调用就不返回，直到返回结果；

说明：异步调用的概念和同步相对，在一个异步调用发起后，被调用者立即返回给调用者，但调用者不能立刻得到结果，被调用者在实际处理这个调用的请求完成后，通过状态、通知或回调等方式来通知调用者请求处理的结果。
简单地说，同步就是发出一个请求后什么事都不做，一直等待请求返回后才会继续做事；异步就是发出请求后继续去做其他事，这个请求处理完成后会通知你，这时候就可以处理这个回应了。

4、解决跨域的方法？

什么是跨域

只要协议、域名、端口有不同，则视为不同的域。（域名和域名对应的IP也是跨域）

跨域的解决方案

         1) CORS: (Cross-Origin Resource Sharing)基于服务器支持的跨域，服务器设置Access-Control-Allow-Origin响应头，浏览器可允许跨域
         2）服务器代理
         3）设置domain:能从子域设到主域，如a.b.c.com—>b.c.com—>c.com ;具体情况：在页面中用iframe打开了另一个页面（前提：两个页面主域是相同的）;利用frameElement.contentWindow.document.domain设置frame子页面的主域，document.domain设置主页面的主域，之后就能互相获取dom中的数据。缺点是只能用于不同子域间的交互。
         4）img的src：拥有src属性的img标签，每次改变src属性，都会发起http请求，常用于埋点需求
         5）postMessage

var win = window.open("http://target.com");
var win = document.getElementById("targetId").contentWindow;
win.postMessage("data here", "http://target.com/rest");
function handleMessage(event){
  if(event.orgin!="http://test.org:4000")
    return;
  var data = event.data;
  event.source.postMessage("response data here", event.origin);
}
window.addEventListener("message", handleMessage, false);

         6）window.name：即使在页面打开多层iframe后，每个iframe中window.name 属性值都是相同的，以此用作数据传输的工具。
但由于跨域的限制，是无法获取另一个frame中的window.name数据，所以要使用一个同域的代理(proxy.html)：
         7）jsonp：只能获取get请求
         9）nginx代理

5、浏览器的理解？

1）用户界面 －包括地址栏、后退/前进按钮、书签目录等，也就是所看到的除了用来显示所请求页面的主窗口之外的其他部分
2）浏览器引擎 －用来查询及操作渲染引擎的接口
3）渲染引擎 －用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
4）网络－用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
5）UI后端 －用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
6）jS解释器 －用来解释执行JS代码。
7）数据存储 －属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术

6、async/await的理解？

async/await其实是Promise的语法糖，它能实现的效果都能用then链来实现，这也和我们之前提到的一样，它是为优化then链而开发出来的。从字面上来看，async是“异步”的简写，await译为等待，所以我们很好理解async声明function是异步的，await等待某个操作完成
await等待的是一个Promise对象，或者是其他值（也就是说可以等待任何值），如果等待的是Promise对象，则返回Promise的处理结果；如果是其他值，则返回该值本身。并且await会暂停当前async function的执行，等待Promise的处理完成。若Promise正常处理（fulfillded），其将回调的resolve函数参数作为await表达式的值，继续执行async function；若Promise处理异常（rejected），await表达式会把Promise异常原因抛出；另外如果await操作符后面的表达式不是一个Promise对象，则返回该值本身。

7、https模式下请求头带有cookie需要如何配置？

答：设置cookie的secure属性，当设置为true时，表示创建的 Cookie 会被以安全的形式向服务器传输，也就是只能在 HTTPS 连接中被浏览器传递到服务器端进行会话验证，如果是 HTTP 连接则获取该信息，所以不会被窃取到Cookie 的具体内容。但是这会导致在同一服务器下HTTPS切换到HTTP协议时，HTTP无法访问、修改同名Cookie，所以必须在HTTPS下清除Cookie或者设定Cookie的作用域。

8、请讲述一下http和https的区别？

1）https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2）http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3）http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4）http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

9、请讲述一下dom的重绘和重排？

部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。
由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新。这样的更新被称为重绘。

造成重排或者重绘的场景

1）添加、删除、更新 DOM 节点
2）通过 display: none 隐藏一个 DOM 节点-触发重排和重绘
3）通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，因为没有几何变化
4）移动或者给页面中的 DOM 节点添加动画
5）添加一个样式表，调整样式属性
6）用户行为，例如调整窗口大小，改变字号，或者滚动。

10、请讲述一下ajax的理解和优缺点？

答：ajax是无须进行刷新页面就可以请求后台的数据的一种方法，通过XmlHttpRequest对象来向服务器发送异步请求，从服务器中获取数据，然后通过js进行操作dom，以此来更新页面内容。

1）、具体实现过程

         a、创建一个XmlHttpRequest的对象
         b、设置响应HTTP请求的回调函数
         c、创建一个HTTP请求，指定响应的请求方法、url、参数等
         d、发送HTTP请求
         e、获取服务端返回的数据
         f、使用js操作dom更新页面的内容

2）缺点

         a、对搜索引擎不友好
         b、要实现Ajax下的前后退功能成本较大
         c、跨域问题限制

11、请讲解一下对jsonp的理解？

答：jsonp是一种非官方跨域数据交互协议，它允许在服务器端集成< script >标签返回至客户端，通过javascript回调的形式实现跨域访问。因为同源策略的原因，我们不能使用XMLHttpRequest与外部服务器进行通信，但是< script >可以访问外部资源，所以通过JSON与< script >相结合的办法，可以绕过同源策略从外部服务器直接取得可执行的JavaScript函数。

原理

客户端定义一个函数，比如jsonpCallback，然后创建< script >，src为url + ?jsonp=jsonpCallback这样的形式，之后服务器会生成一个和传递过来jsonpCallback一样名字的参数，并把需要传递的数据当做参数传入，比如jsonpCallback(json)，然后返回给客户端，此时客户端就执行了这个服务器端返回的jsonpCallback(json)回调。

优缺点

优点 - 兼容性好，简单易用，支持浏览器与服务器双向通信
缺点 - 只支持GET请求；存在脚本注入以及跨站请求伪造等安全问题

注意：JSONP不使用XMLHttpRequest对象加载资源，不属于真正意义上的AJAX。

12、如何设计封装一个组件？

答：组件封装的目的是为了重用，提高开发效率和代码质量低耦合，单一职责，可复用性，可维护性前端组件化设计思路

13、js加载的方式defer/async

答：渲染引擎遇到 script 标签会停下来，等到执行完脚本，继续向下渲染defer 是“渲染完再执行”，async 是“下载完就执行”，defer 如果有多个脚本，会按照在页面中出现的顺序加载，多个async 脚本不能保证加载顺序加载

14、css动画和js动画的区别？

答：js 动画代码相对复杂一些动画运行时，对动画的控制程度上，js 能够让动画，暂停，取消，终止，css动画不能添加事件动画性能看，js 动画多了一个js 解析的过程，性能不如 css 动画好

15、XSS与CSRF两种跨站攻击区别？

xss

xss跨站脚本攻击，主要是前端层面的，用户在输入层面插入攻击脚本，改变页面的显示，或则窃取网站 cookie，预防方法：不相信用户的所有操作，对用户输入进行一个转义，不允许 js 对 cookie 的读写

csrf

csrf 跨站请求伪造，以你的名义，发送恶意请求，通过 cookie 加参数等形式过滤，没法彻底杜绝攻击，只能提高攻击门槛

16、ios滑动卡顿

-webkit-overflow-scrolling:touch 可能会在IOS系统低的情况出现滚动条；尝试溢出解决

17、http请求常见状态码

主要包括：1*，2*，3*，4*以及5*，具体如下：

1*（临时响应）

         表示临时响应并需要请求者继续执行操作的状态代码。
         100（继续）:请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。
         101（切换协议）:请求者已要求服务器切换协议，服务器已确认并准备切换。

2*（成功）

         表示成功处理了请求的状态代码
         200（成功）: 服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
         201（已创建）: 请求成功并且服务器创建了新的资源。
         202（已接受）: 服务器已接受请求，但尚未处理。
         203（非授权信息）: 服务器已成功处理了请求，但返回的信息可能来自另一来源。
         204（无内容）: 服务器成功处理了请求，但没有返回任何内容。
         205（重置内容）:服务器成功处理了请求，但没有返回任何内容。
         206（部分内容）: 服务器成功处理了部分 GET 请求。

3*（重定向）

         表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向
         300（多种选择）: 针对请求，服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。
         301（永久移动）: 请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
         302（临时移动）: 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
         303（查看其他位置）:请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
         304（未修改）:自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
         305（使用代理）:请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。
         307（临时重定向）: 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4*（请求错误）

         表示请求可能出错，妨碍了服务器的处理
         400（错误请求）:服务器不理解请求的语法。
         401（未授权）:请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。
         403（禁止）:服务器拒绝请求。
         404（未找到）:服务器找不到请求的网页。
         405（方法禁用）:禁用请求中指定的方法。
         406（不接受）:无法使用请求的内容特性响应请求的网页。
         407（需要代理授权）:此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
         408（请求超时）: 服务器等候请求时发生超时。
         409（冲突）: 服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。
1         410（已删除）: 如果请求的资源已永久删除，服务器就会返回此响应。
         411（需要有效长度）:服务器不接受不含有效内容长度标头字段的请求。
         412（未满足前提条件）:服务器未满足请求者在请求中设置的其中一个前提条件。
         413（请求实体过大）:服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
         414（请求的 URI 过长）:请求的 URI（通常为网址）过长，服务器无法处理。
         415（不支持的媒体类型）:请求的格式不受请求页面的支持。
         416（请求范围不符合要求）:如果页面无法提供请求的范围，则服务器会返回此状态代码。
         417（未满足期望值）:服务器未满足”期望”请求标头字段的要求。

5*

         示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错
         500（服务器内部错误）: 服务器遇到错误，无法完成请求。
         501（尚未实施）:服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。
         502（错误网关）:服务器作为网关或代理，从上游服务器收到无效响应。
         503（服务不可用）:服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。
         504（网关超时）: 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
         505（HTTP 版本不受支持）:服务器不支持请求中所用的 HTTP 协议版本。