随笔-带导航

普莱斯
4 阅读4分钟

1. 加密

对称加密，加解密的秘钥相同，sm4，aes 非对称加密，公钥私钥，谁都可以用公钥加密，拥有私钥的才能解密,sm2 哈希加密，不需要秘钥，算法处理得到固定长度输出，主要用于验证身份，验证数据完整性, md5

2. 水印

显示方式：canvas，svg，css

插入方式：mutationobserver 通过mutationobserver监听水印dom变化，如果变化，就删除水印重新生成并添加到dom中

3. SPA优缺点

核心优势： 无刷新跳转（流畅用户体验） 前后端分离开发 减轻服务器渲染压力 主要挑战： 首屏加载性能 SEO优化难度 路由管理复杂度

4. SPA首屏加载优化有哪些方案？

路由懒加载 + 组件懒加载 资源预加载/预取 CDN加速静态资源 开启Gzip/Brotli压缩 服务端渲染（SSR）

5. 大文件流式下载

需要用到token来获取文件的时候，一般用接口请求，再用blob转url，再通过a标签下载。但是如果文件大了，接口就会响应很长时间，让接口设置一个临时cookie，直接用a标签下载。

6. 大文件上传

  1. 知道file.size
  2. 合理分配切分大小
  3. 按切分大小进行切分file.slice(start,end)，放入数组chunks存储
  4. 遍历chunks上传
  5. 上传完通知服务端合并
  6. 服务端接收完后合并
  7. 服务端提供文件上传状态
  8. indexdb存储来做断点续传
  9. 关闭页面再进来，先检测有没有未完成的上传任务，
  10. 有的话先调用后台状态，看是否上传完，
  11. 如果上传完，只是没合并，提示上传完成，
  12. 如果没上传完，在indexdb中提取并继续上传，后端也要支持，
  13. 若没文件提示文件已损坏请重新上传

7. 数组扁平化

function flattenArray(arr) {
  return arr.reduce((acc, val) => {
    return acc.concat(Array.isArray(val) ? flattenArray(val) : val);
  }, []);
}

8. 文件打包成exe

  1. pwa, manifest.json,service-worker做缓存，请求拦截，navigator.serviceWorker
  2. nativefier由electron将网页封装成操作系统可执行文件

9. 双token

是什么，为什么

1.认证中心存session记录登录用户，子系统去认证中心查，认证中心控制力强但是压力大 2.token, 子系统自行校验，认证中心压力小 3.双token，token过期时间短，refresh token过期时间长，增强认证中心的控制力和安全性

无感刷新token重试

当在响应中根据状态码知道token过期时, 将请求的地址\方式\参数都存储下来,调用刷新token的接口.调用成功后,将存储下来的接口重试

10. 图片懒加载

intersectionobserver

<img data-src="http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960" class="lazyload">

// 使用Intersection Observer检测元素是否进入视口
const lazyloadImages = document.querySelectorAll('.lazyload');
const observer = new IntersectionObserver(function (entries, observer) {
  entries.forEach(function (entry) {
    console.log('entry', entry)
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});
lazyloadImages.forEach(function (img) {
  observer.observe(img);
});

11.微信网页授权作用域（scope）的种类和用途

微信开放平台提供了多种授权作用域（scope），每种作用域有不同的用途：

?snsapi_base?：用于获取用户的openid，不需要用户授权即可获取，适用于静默授权的场景。 ?snsapi_userinfo?：用于获取用户的详细信息，如头像、昵称等，需要用户手动同意授权。 ?snsapi_login?：适用于网站应用，用户需要通过扫描二维码进行授权，完成登录过程?13。

使用场景和流程

?用户同意授权，获取code?：用户通过扫描二维码完成授权后，微信会返回一个code。 ?通过code换取access_token和openid?：使用获取到的code，通过微信的接口换取access_token和openid。 ?拉取用户信息?：使用获取到的access_token调用相关接口，获取用户的详细信息

微信公众号（公众平台） 和 微信开放平台 是两码事。

公众号（公众平台）获取的scope只包括两种：snsapi_base 和snsapi_userinfo，前者是静默获取，用户无感知；后者是需要用户确认同意的。

但是微信开放平台(open.weixin.qq.com/) 就可以获取snsapi_login这种scope。坑爹的是，公众平台的认证和开放平台的认证是独立的，你如果想获取snsapi_login，还需要重新注册开放平台，交300块钱认证。

如果你只是想实现微信扫二维码登录的话，其实snsapi_base 也足够了，因为它可以获取到用户的openid，你可以之后用来和自己数据库中作比对。

12. 用setTimeout实现setInterval

const myInterval = (fn, time) => {
  let timer = null
  const fn1 = () => {
    fn()
    timer = setTimeout(fn1, time)
  }
  fn1()
  const myClear = () => {
    clearTimeout(timer)
  }
  return {
    timer,
    myClear
  }
}

const {timer, myClear} = myInterval(() => {
  console.log(1)
}, 1000)
setTimeout(() => {
  myClear()
}, 5000)

13. 模块化

<script type="importmap">
  {
  "imports": {
    "three": "./node_modules/three/build/three.module.js",
    "three/addons/": "./node_modules/three/examples/jsm/"
  }
}
</script>
// 配置type="importmap",.html文件也能和项目开发环境一样方式引入threejs
<script type="module">
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
</script>

14. vue2命令式组件

使用**Vue.extend()和new**创建组件构造器，并实例化，把实例挂载到dom上

  1. 创建vue组件。
  2. 新建js文件，引入vue组件，通过extend拷贝vue组件，实例化拷贝的vue组件，将实例通过$mount挂载到dom上，dom要添加到body
  3. 销毁组件，instance.destroy()；document.body.removeChild(instance.destroy()；document.body.removeChild(instance.el)
avatar
文章
阅读
粉丝