前端优化

接口如何防刷

防刷一般分两种：

• 总调用次数受限制。这个一般是在后端做限制，单位时间内最多可调用次数。
• 同一客户端次数限制。这个前端的一般使用是给接口调用加锁，在返回结果或者一定时间之后解锁

方法

• 网关控制流量洪峰，对在一个时间段内出现流量异常，可以拒绝请求
• 源ip请求个数限制。对请求来源的ip请求个数做限制
• http请求头信息校验；（例如host，User-Agent，Referer）
• 对用户唯一身份 uid 进行限制和校验。例如基本的长度，组合方式，甚至有效性进行判断。或者 uid 具有一定的时效性
• 前后端协议采用二进制方式进行交互或者协议采用签名机制
• 人机验证，验证码，短信验证码，滑动图片形式，12306 形式

首屏优化

• 路由拆分 路由懒加载
• SSR
  • 渲染页面过程简单，性能好
  • nuxtjs
  • nextjs
• APP 预取
  • h5 在 app webview 中展示 可使用 app 预取
  • 用户访问列表页时,app 预加载文章首屏内容
  • 用户进入 h5 页，直接从 app 中获取内容，瞬间加载首屏
• 分页
• 图片懒加载
• Hybrid
  • 提前将资源加载到 app 内部
  • 在 app webview 中使用 file:.//加载页面文件
  • ajax 获取内容并展示
• 配合实际情况做骨架屏和 loading 效果的展示

后端返回 10 万条数据如何处理

• 技术方案不合理
• js 可以处理
• 渲染到 dom 会非常卡顿
• 自定义 nodejs 中间层
• 虚拟列表

H5 加载很慢

• performance
• lighthouse
• 优化 http 缓存策略

项目难点 如何解决

• bit 组件
• 编辑器

什么时候用 SPA 什么时候用 MPA

前端统计 SDK

hybrid 模板如何更新的