js知识点的总结

字节跳动小程序面试

Posted by Jow on August 25, 2019

目录

  1. 函数抖动和节流
  2. HTTPS和HTTP
  3. get和post
  4. web页面缓存之Cache-Control问题
  5. HTTP Cookie
  6. html界面的展示

自己果然有点菜,不过意思到之后自己应该知道往哪个地方进行努力,这样你才能够获取成功。

函数抖动和节流

  • 防抖动:将几次操作合并为一此操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。
  • 节流:使得一定时间内只触发一次函数。它和防抖动最大的区别就是,节流函数不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而防抖动只是在最后一次事件后才触发一次函数。原理是通过判断是否到达一定时间来触发函数,若没到规定时间则使用计时器延后,而下一次事件则会重新设定计时器。

HTTPS和HTTP

SSL 是“Secure Sockets Layer”的缩写,中文叫做“安全套接层”。它是在上世纪90年代中期,由网景公司设计的。 SSL协议位于TCP/IP协议与各种应用层协议之间,为数据通讯提供安全支持。SSL协议可分为两层:

  • SSL记录协议(SSL Record Protocol):它建立在可靠的传输协议(如TCP)之上,为高层协议提供数据封装、压缩、加密等基本功能的支持。
  • SSL握手协议(SSL Handshake Protocol):它建立在SSL记录协议之上,用于在实际的数据传输开始前,通讯双方进行身份认证、协商加密算法、交换加密密钥等。

对称秘钥加密和非对称秘钥加密:

  • 对称密钥加密,又称私钥加密,即信息的发送方和接收方用同一个密钥去加密和解密数据。它的最大优势是加/解密速度快,适合于对大数据量进行加密,但密钥管理困难。
  • 非对称密钥加密,又称公钥加密,它需要使用一对密钥来分别完成加密和解密操作,一个公开发布,即公开密钥,另一个由用户自己秘密保存,即私用密钥。信息发送者用公开密钥去加密,而信息接收者则用私用密钥去解密。 从功能角度而言非对称加密比对称加密功能强大,但加密和解密速度却比对称密钥加密慢得多。

SSL/TLS协议基本原理: SSL/TLS协议的基本思路是采用公钥加密法,也就是说,客户端先向服务器端索要公钥,然后用公钥加密信息,服务器收到密文后,用自己的私钥解密,但是这里有两个问题:

  1. 如何保证公钥不被篡改:解决方法:将公钥放在数字证书中,只要证书是可信的,公钥就是可信的。
  2. 公钥加密计算量太大,如何减少耗用的时间:解决方法:每一次对话(session),客户端和服务器端都生成一个”对话密钥”(session key),用它来加密信息。由于”对话密钥”是对称加密,所以运算速度非常快,而服务器公钥只用于加密”对话密钥”本身,这样就减少了加密运算的消耗时间。

因此,SSL/TLS协议的基本过程是这样的:

  1. 客户端向服务器端索要并验证公钥。
  2. 双方协商生成“对话密钥”。
  3. 双方采用“对话密钥”进行加密通信。 HTTPS和HTTP的区别主要如下:
  4. https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。
  5. http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
  6. http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
  7. http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。所以说https和http的区别就是在应用层和TCP/IP层之间多了一层SSL。

HTTP特点:

  1. 支持客户/服务器模式。(C/S模式)
  2. 简单快速:客户向服务器请求服务时,只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度很快。
  3. 灵活:HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
  4. 无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。
  5. 无状态:HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快.

HTTP工作流程:

  1. 建立TCP/IP连接,客户端与服务器通过Socket三次握手进行连接
  2. 客户端向服务端发起HTTP请求(例如:POST/login.html http/1.1)
  3. 客户端发送请求头信息,请求内容,最后会发送一空白行,标示客户端请求完毕
  4. 服务器做出应答,表示对于客户端请求的应答,例如:HTTP/1.1 200 OK
  5. 服务器向客户端发送应答头信息
  6. 服务器向客户端发送请求头信息后,也会发送一空白行,标示应答头信息发送完毕,接着就以Content-type要求的数据格式发送数据给客户端
  7. 服务端关闭TCP连接,如果服务器或者客户端增Connection:keep-alive就表示客户端与服务器端继续保存连接,在下次请求时可以继续使用这次的连接

HTTPS特点:

  1. 优点:相比于http,https可以提供更加优质保密的信息,保证了用户数据的安全性,此外https同时也一定程度上保护了服务端,使用恶意攻击和伪装数据的成本大大提高。
  2. 缺点:缺点也同样很明显,第一https的技术门槛较高,多数个人或者私人网站难以支撑,CA机构颁发的证书都是需要年费的,此外对接Https协议也需要额外的技术支持;其二,目前来说大多数网站并不关心数据的安全性和保密性,其https最大的优点对它来说并不适用;其三,https加重了服务端的负担,相比于http其需要更多的资源来支撑,同时也降低了用户的访问速度;第四,目前来说Http网站仍然大规模使用,在浏览器侧也没有特别大的差别,很多用户不关心的话根本不感知。

HTTPS工作流程:

  1. 客户使用https的URL访问Web服务器,要求与Web服务器建立SSL连接。
  2. Web服务器收到客户端请求后,会将网站的证书信息(证书中包含公钥)传送一份给客户端。
  3. 客户端的浏览器与Web服务器开始协商SSL连接的安全等级,也就是信息加密的等级。
  4. 客户端的浏览器根据双方同意的安全等级,建立会话密钥,然后利用网站的公钥将会话密钥加密,并传送给网站。
  5. Web服务器利用自己的私钥解密出会话密钥。
  6. Web服务器利用会话密钥加密与客户端之间的通信。

在https中,客户端和服务器之间的通信都是加密过得:使用的对称加密方式,在建立连接的时候使用的是非对称加密方式,为什么在传输数据的过程中使用对称加密,因为非对称加密算法比较复杂,加密解密都比价消耗资源,所在在传输数据的时候使用非对称加密。使用对称加密算法时,密钥交换是个大难题,所以Diffie和Hellman提出了著名的Diffie-Hellman密钥交换算法。

get和post

  1. GET请求通过URL(请求行)提交数据,在URL中可以看到所传参数。POST通过“请求体”传递数据,参数不会在url中显示
  2. GET请求提交的数据有长度限制,POST请求没有限制。
  3. GET请求返回的内容可以被浏览器缓存起来。而每次提交的POST,浏览器在你按 下F5的时候会跳出确认框,浏览器不会缓存POST请求返回的内容。
  4. GET对数据进行查询,POST主要对数据进行增删改!简单说,GET是只读,POST是写。

在http中get和post都是不安全的,因为都是可以被破解的,但是在https中因为数据的传输过程中都是加密的,所以是安全的。

web页面缓存之Cache-Control问题

Cache-Control是HTTP协议的一部分,是在请求和响应中必须服从的指令,通常用于提高页面加载,阻止页面缓存对请求和响应造成不利的干扰。

HTTP中expires为绝对过期时间,过期时间过期了,说明缓存已过期,max-age定义了请求返回数据中最大使用使用期。

定义了max-age之后,缓存的内容不一定每次都与服务器来进行验证,但是在过期时间到期之后。一定会与服务器验证。

HTTP条件方法可以实现高效的再验证,向服务发送 “ 条件GET ” 目前最常用的为 If-Modified-Since:Date If-None-Math:ETag(实体标签,版本标识)。

If-Modified-Since 表示在指定日期之后资源被更新,就返回新的请求,如果指定日期未更新就返回304直接读取缓存。

If-None-Math 有的文档有可能周期性的被重写,通过ETag 来确保文档是否改变,改变返回请求状态为200的新资源,未改变返回状态码304直接读取缓存。

Web缓存如何工作:

  1. 响应头明确说明,偶不想被缓存,则不会被缓存;
  2. 如果请求信息是需要认证或者安全加密的(如, HTTPS),相应内容也不会被缓存;
  3. 缓存如果有以下表现,则认为是fresh新鲜的(无需检查源服务器,直接发送给客户端):含有完整的过期时间和寿命控制头信息,并且内容仍在保鲜期内,或者缓存最近已展现,并且在不久前修改。则内容缓存直取,绕过源服务器。
  4. 若内容陈旧,则会要求源服务器做验证 validate ,或者告诉缓存其拷贝副本是否是OK的。
  5. 特定情况下——例如,断网了,之前有过的响应缓存直取而不检查源服务器。

HTTP Cookie(也叫Web Cookie或浏览器Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常,它用于告知服务端两个请求是否来自同一浏览器,如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。

Cookie主要用于以下三个方面:

  1. 会话状态管理(如用户登录状态、购物车、游戏分数或其它需要记录的信息)
  2. 个性化设置(如用户自定义设置、主题等)
  3. 浏览器行为跟踪(如跟踪分析用户行为等)

当服务器收到HTTP请求时,服务器可以在响应头里面添加一个Set-Cookie选项。浏览器收到响应后通常会保存下Cookie,之后对该服务器每一次请求中都通过Cookie请求头部将Cookie信息发送给服务器。另外,Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。现在,对该服务器发起的每一次新请求,浏览器都会将之前保存的Cookie信息通过Cookie请求头部再发送给服务器。

  1. 会话期Cookie:会话期Cookie是最简单的Cookie:浏览器关闭之后它会被自动删除,也就是说它仅在会话期内有效。会话期Cookie不需要指定过期时间(Expires)或者有效期(Max-Age)。需要注意的是,有些浏览器提供了会话恢复功能,这种情况下即使关闭了浏览器,会话期Cookie也会被保留下来,就好像浏览器从来没有关闭一样。
  2. 持久性Cookie:关闭浏览器便失效的会话期Cookie不同,持久性Cookie可以指定一个特定的过期时间(Expires)或有效期(Max-Age)。

为避免跨域脚本 (XSS) 攻击,通过JavaScript的 Document.cookie API无法访问带有 HttpOnly 标记的Cookie,它们只应该发送给服务端。如果包含服务端 Session 信息的 Cookie 不想被客户端 JavaScript 脚本调用,那么就应该为其设置 HttpOnly 标记。 一般一个cookie的大小是4k左右,但是也有限制cookie个数的,在20个或者50。

html界面的展示

浏览器加载和渲染html的顺序:

  1. IE下载的顺序是从上到下,渲染(就是把请求的内容显示到浏览器屏幕上)的顺序也是从上到下,下载和渲染是同时进行的。
  2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。
  3. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。
  4. 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。
  5. JS、CSS中如有重定义,后定义函数将覆盖前定义函数。

HTML页面加载和解析流程:

  1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件。
  2. 浏览器开始载入html代码,发现<head>标签内有一个标签引用外部CSS文件。
  3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件。
  4. 浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了。
  5. 浏览器在代码中发现一个标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码。
  6. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码。
  7. 浏览器发现了一个包含一行Javascript代码的
  8. Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个
  9. 终于等到了</html>的到来,浏览器泪流满面……
  10. 等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径。
  11. 浏览器召集了在座的各位<div><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面

解析渲染该过程主要分为以下步骤:

  1. 解析HTML
  2. 构建DOM树,dom的;两种元素:样式(link、style)与脚本文件(script),由于浏览器采用自上而下的方式解析,在遇到这两种元素时都会阻塞浏览器的解析,直到外部资源加载并解析或执行完毕后才会继续向下解析html。
  3. DOM树与CSS样式进行附着构造呈现树(RenderTree)
  4. 布局
  5. 绘制:1.背景颜色;2.背景图片;3.边框;4.子呈现树节点;5.轮廓。