前端进阶

时间：2023-02-20 16:50:01 | 来源：建站知识

时间：2023-02-20 16:50:01 来源：建站知识

前端进阶：对于前端面试来说，还会涉及到一些原理性的东西，具体这篇来重点探讨一下这方面的问题。

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

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

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

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

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 :能从子域设到主域，如http://a.b.c.com—>http://b.c.com—>http://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系统低的情况出现滚动条；尝试溢出解决

还想了解更多的可以去含光丶 - 简书 看我之前发的文章。