一些技巧，数据支撑等等

小程序总包升级 30M

  1. 是头部小程序，也就是DAU大于一百万
  2. PC适配
  3. 接入lazyCodeLoading特性
    1. 按需注入代码
  4. 70%的流量覆盖页面的体验分不低于 95 分
    1. 性能，比如脚本执行时间，首屏时间，渲染时间，SetData次数，wxml节点数等
    2. 体验，比如开启惯性滚动，避免使用伪类模拟点击，可视区域点击大小等
    3. 最佳实践，比如避免js，网络异常，使用HTTPS，移出不可访问的组件，页面等

重排和重绘的区别

  • 重排reflow：无论用什么方式影响了元素的几何信息（包括位置，尺寸，大小），浏览器都会重新计算元素的所有几何属性，进行渲染，这个就叫重排
  • 重绘repaint：元素的一些color，阴影等发生了变化，这个时候浏览器就需要重新绘制这个元素，就叫重绘

0.1 + 0.2 为何不等于 0.3

  1. js底层做运算的时候，会将数字转化为二进制，，而 0.1 和 0.2 转成二进制后会无限循环，js进行二进制浮点数进行计算的时候，会舍弃后续数字，造成精度丢失。
  2. 第二次精度丢失就是在进行对接运算的时候，阶小的尾数要根据阶差来右移（0 舍 1 入），尾数位移时可能会发生数丢失的情况，影响精度。

浏览器的垃圾回收机制

  1. 标记清除法：标记阶段为所有的活动对象做上一个标记，清除阶段就把没有标记（也就是非活动对象）销毁。
  2. 引用计数法：它把对象是否不再需要简化定义为对象有没有被其他对象引用到它。如果没有引用指向该对象（引用计数为 0），对象就会被垃圾回收机制回收。

GET和POST的区别

  • 从缓存的角度来看，GET请求会被浏览器缓存下来，而POST不会
  • 从编码角度来看，GET请求只能进行URL编码，只能接受ASCII字符，而POST没有限制
  • 从参数角度来看，GET请求是放在URL上，POST是放在body上
  • 从幂等角度来看，GET请求是幂等的，而POST请求则不是

性能优化

除了基本的老生常谈的东西，我这里说一些不太常见，但是比较实用的路子

  1. 在日常开发中，我们引入包的时候，最好引入使用了ESM相关的包，比如lodash-es，而不是lodash，这样有助于我们进行tree shaking
  2. 在使用vue，小程序等框架时，尽量减少watch/observer，computed的使用，通常我们都有替代的方法，比如filter函数，wxs（小程序）等。太多的这类函数会造成不可预估的灾难
  3. 数据管理要避免大，嵌套过深等问题。对象大，嵌套过深都会造成性能下降，页面渲染缓慢，卡顿。比如vue会循环递归data里的每一个值，给每一个都添加一个响应函数。

如何有效定位，解决页面卡顿，白屏时间长，加载缓慢等问题

页面卡顿的原理：一般显示器是60HZ，意味着1s会刷新60次，每次刷新间隔是16.7ms。那么相应地浏览器也会执行16.7ms渲染一次页面，如果有大量js运行，dom非常多的情况，那么浏览器在16.7ms里完不成，就会增加渲染时间，导致 1s 的刷新率不到60次，如果是30次，那么这个时候画面就不那么流畅，如果降到 20，就明显卡顿了。 可以从这几方面入手：

  1. 页面的dom是不是非常大，尤其是滚动页面的时候，dom大量加载
  2. 页面的js执行是不是非常多，比如渲染上万个节点
  3. 可以使用浏览器，开发者工具协助定位问题，排查页面渲染，js执行，内存消耗（可以了解浏览器的performance，里面有很多关键指标）等关键指标
  4. 删掉一些打印日志的信息，因为一些日志信息会保留某些变量的引用，导致占用内存
  5. 采用二分法去定位问题代码，分别注释可疑代码，直至定位到问题代码

Set 和 Map有什么区别

  1. Map是键值对，Set是值的集合，键和值可以是任意值
  2. Map可以通过GET方法获取到值，而Set不行
  3. 都能通过迭代器for...of遍历
  4. Set的值唯一，可以用作数组去重，而Map没有格式限制，可以用来做数据存储

localStorage，sessionStorage，cookies有什么区别

  • localStorage以键值对的形式存储，除非自己删除，否则可以永久存储，上限是 5M
  • sessionStorage当页面关闭后被清除，不能共享，是会话级别的存储方式
  • cookies主要用来存储数据标识，识别用户，每次http请求都会携带Cookie，上限是5kb

在地址栏里输入一个地址回车会发生哪些事情

  1. 解析URL：首先会对 URL 进行解析，分析所需要使用的传输协议和请求的资源的路径。如果输入的 URL 中的协议或者主机名不合法，将会把地址栏中输入的内容传递给搜索引擎。如果没有问题，浏览器会检查 URL 中是否出现了非法字符，如果存在非法字符，则对非法字符进行转义后再进行下一过程。
  2. 缓存判断：浏览器会判断所请求的资源是否在缓存里，如果请求的资源在缓存里并且没有失效，那么就直接使用，否则向服务器发起新的请求。
  3. DNS解析： 下一步首先需要获取的是输入的 URL 中的域名的 IP 地址，首先会判断本地是否有该域名的 IP 地址的缓存，如果有则使用，如果没有则向本地 DNS 服务器发起请求。本地 DNS 服务器也会先检查是否存在缓存，如果没有就会先向根域名服务器发起请求，获得负责的顶级域名服务器的地址后，再向顶级域名服务器请求，然后获得负责的权威域名服务器的地址后，再向权威域名服务器发起请求，最终获得域名的 IP 地址后，本地 DNS 服务器再将这个 IP 地址返回给请求的用户。用户向本地 DNS 服务器发起请求属于递归请求，本地 DNS 服务器向各级域名服务器发起请求属于迭代请求。
  4. 获取MAC地址： 当浏览器得到 IP 地址后，数据传输还需要知道目的主机 MAC 地址，因为应用层下发数据给传输层，TCP 协议会指定源端口号和目的端口号，然后下发给网络层。网络层会将本机地址作为源地址，获取的 IP 地址作为目的地址。然后将下发给数据链路层，数据链路层的发送需要加入通信双方的 MAC 地址，本机的 MAC 地址作为源 MAC 地址，目的 MAC 地址需要分情况处理。通过将 IP 地址与本机的子网掩码相与，可以判断是否与请求主机在同一个子网里，如果在同一个子网里，可以使用 APR 协议获取到目的主机的 MAC 地址，如果不在一个子网里，那么请求应该转发给网关，由它代为转发，此时同样可以通过 ARP 协议来获取网关的 MAC 地址，此时目的主机的 MAC 地址应该为网关的地址。
  5. TCP三次握手： 下面是 TCP 建立连接的三次握手的过程，首先客户端向服务器发送一个 SYN 连接请求报文段和一个随机序号，服务端接收到请求后向客户端发送一个 SYN ACK 报文段，确认连接请求，并且也向客户端发送一个随机序号。客户端接收服务器的确认应答后，进入连接建立的状态，同时向服务器也发送一个ACK确认报文段，服务器端接收到确认后，也进入连接建立状态，此时双方的连接就建立起来了。
  6. HTTPS握手： 如果使用的是 HTTPS 协议，在通信前还存在 TLS 的一个四次握手的过程。首先由客户端向服务器端发送使用的协议的版本号、一个随机数和可以使用的加密方法。服务器端收到后，确认加密的方法，也向客户端发送一个随机数和自己的数字证书。客户端收到后，首先检查数字证书是否有效，如果有效，则再生成一个随机数，并使用证书中的公钥对随机数加密，然后发送给服务器端，并且还会提供一个前面所有内容的 hash 值供服务器端检验。服务器端接收后，使用自己的私钥对数据解密，同时向客户端发送一个前面所有内容的 hash 值供客户端检验。这个时候双方都有了三个随机数，按照之前所约定的加密方法，使用这三个随机数生成一把秘钥，以后双方通信前，就使用这个秘钥对数据进行加密后再传输。
  7. 返回数据： 当页面请求发送到服务器端后，服务器端会返回一个 html 文件作为响应，浏览器接收到响应后，开始对 html 文件进行解析，开始页面的渲染过程。
  8. 页面渲染： 浏览器首先会根据 html 文件构建 dom 树，根据解析到的 css 文件构建 CSSOM 树，如果遇到 script 标签，则判端是否含有 defer 或者 async 属性，要不然 scrIPt 的加载和执行会造成页面的渲染的阻塞。当 dom 树和 CSSOM 树建立好后，根据它们来构建渲染树。渲染树构建好后，会根据渲染树来进行布局。布局完成后，最后使用浏览器的 UI接口对页面进行绘制。这个时候整个页面就显示出来了。
  9. TCP四次挥手： 最后一步是 TCP 断开连接的四次挥手过程。若客户端认为数据发送完成，则它需要向服务端发送连接释放请求。服务端收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，此时表明客户端到服务端的连接已经释放，不再接收客户端发的数据了。但是因为 TCP 连接是双向的，所以服务端仍旧可以发送数据给客户端。服务端如果此时还有没发完的数据会继续发送，完毕后会向客户端发送连接释放请求，然后服务端便进入 LAST-ACK 状态。客户端收到释放请求后，向服务端发送确认应答，此时客户端进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有服务端的重发请求的话，就进入 CLOSED 状态。当服务端收到确认应答后，也便进入 CLOSED 状态。

简单说说HTTP和HTTPS的区别

  1. HTTPS协议需要CA证书,费用较高;而HTTP协议不需要
  2. HTTP协议是超文本传输协议,信息是明文传输的,HTTPS则是具有安全性的SSL加密传输协议
  3. 使用不同的连接方式,端口也不同,HTTP协议端口是 80,HTTPS协议端口是 443
  4. HTTP协议连接很简单,是无状态的;HTTPS协议是具有SSL和HTTP协议构建的可进行加密传输、身份认证的网络协议,比HTTP更加安全

常见的httpcode码

1xx：指示消息,表示请求已接收，继续处理 2xx：成功,表示请求已被成功接收，处理

  1. 200 OK：客户端请求成功
  2. 204 No Content：无内容。服务器成功处理，但未返回内容。一般用在只是客户端向服务器发送信息，而服务器不用向客户端返回什么信息的情况。不会刷新页面。
  3. 206 Partial Content：服务器已经完成了部分GET请求（客户端进行了范围请求）。响应报文中包含Content-Range指定范围的实体内容

3xx 重定向

  1. 301 Moved Permanently：永久重定向，表示请求的资源已经永久的搬到了其他位置。
  2. 302 Found：此响应代码表示所请求资源的URI已 暂时 更改。未来可能会对URI进行进一步的改变。因此，客户机应该在将来的请求中使用这个相同的URI。
  3. 303 See Other：临时重定向，应使用GET定向获取请求资源。303 功能与 302 一样，区别只是 303 明确客户端应该使用GET访问
  4. 304 Not Modified：表示资源未修改，使用缓存
  5. 307 Temporary Redirect：临时重定向，和 302 有着相同含义。POST不会变成GET

4xx：客户端错误

  1. 400 Bad Request：客户端请求有语法错误，服务器无法理解。
  2. 401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。
  3. 403 Forbidden：服务器收到请求，但是拒绝提供服务
  4. 404 Not Found：请求资源不存在。比如，输入了错误的URL
  5. 415 Unsupported media type：不支持的媒体类型

5xx：服务器端错误，服务器未能实现合法的请求。

  1. 500 Internal Server Error：服务器发生不可预期的错误。
  2. 502 Bad GateWay：此错误响应表明服务器作为网关需要得到一个处理这个请求的响应，但是得到一个错误的响应。
  3. 503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常，
  4. 504 GateWay Timeout：当服务器充当网关且无法及时获得响应时，会给出此错误响应。

原型和原型链

function Foo() {}

const foo = new Foo();
Foo.proto === Function.prototype; // true
foo.proto === Foo.prototype; // true
Foo.prototype.proto === Object.prototype; // true
Foo.prototype.proto.proto === null; // true

CSRF攻击原理和防护

CSRF全称是跨站请求伪造，利用网站对用户的信任，挟持用户当前已经登录的web程序，去执行并非用户本意的操作。 流程

  1. 用户登录，浏览并信任 A 网站，通过验证后产生 Cookie。
  2. 攻击者通过添加图片，链接等方式诱导用户访问 B 网站
  3. 用户访问B网站，浏览器会携带 A 网站产生的Cookie
  4. 这样 A 网站就响应了用户请求，因为网站无法分清，请求来自哪里，这样 B 网站就达到了模拟用户操作的目的

防护

  1. 只使用JSON Api
  2. 验证http的Referer字段
  3. 在请求中添加token验证

results matching ""

    No results matching ""