前端常见面试-进阶篇

时间 2020-03-05

标签前端常见面试进阶栏目快乐工作繁體版

原文原文链接

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

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

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

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

具体深刻了解，课详细查看：从输入URL到页面加载发生了什么html

二、如何优化网站性能？

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

三、promise的理解？

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

Promise缺点

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

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

四、解决跨域的方法？

什么是跨域

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

跨域的解决方案

         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代理ajax

五、浏览器的理解？

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

六、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对象，则返回该值自己。

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

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

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

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

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

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

形成重排或者重绘的场景

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

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

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

1）、具体实现过程

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

2）缺点

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

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

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

原理

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

优缺点

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

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

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

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

1三、js加载的方式defer/async

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

1四、css动画和js动画的区别？

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

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

xss

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

csrf

csrf 跨站请求伪造，以你的名义，发送恶意请求，经过 cookie 加参数等形式过滤，无法完全杜绝攻击，只能提升攻击门槛

1六、ios滑动卡顿

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