前端项目亮点_前端管理端项目怎么写亮点

1、单点登录
实现方式有很多种:父域 Cookie、认证中心、LocalStorage 跨域等.
通过 iframe+postMessage() 方式，将同一份 Token 写入到了多个域下的 LocalStorage 中，前端每次在向后端发送请求之前，都会主动从 LocalStorage 中读取 Token 并在请求中携带，这样就实现了同一份 Token 被多个域所共享
域名分为顶级域名（也称主域名和一级域名）、二级域名、三级域等。
顶级域名：cnblogs.com
二级域名：i.cnblogs.com
三级域名：aa.i.cnblogs.com

// 获取 token
var token = result.data.token;

// 动态创建一个不可见的iframe，在iframe中加载一个跨域HTML
var iframe = document.createElement("iframe");
iframe.src = "http://app1.com/localstorage.html";
document.body.append(iframe);
// 使用postMessage()方法将token传递给iframe
setTimeout(function () {
    iframe.contentWindow.postMessage(token, "http://app1.com");
}, 4000);
setTimeout(function () {
    iframe.remove();
}, 6000);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 在这个iframe所加载的HTML中绑定一个事件监听器，当事件被触发时，把接收到的token数据写入localStorage
window.addEventListener('message', function (event) {
    localStorage.setItem('token', event.data)
}, false);
1
2
3
4

2、权限的多维度控制

3、多组件信息的复杂共享类问题

4、产品安全解决策略

5、数据埋点&性能监控

7、直播类、音视频类、实时通信类、可视化处理…【突出自己的知识体系】

重点讲解的问题：

7、性能优化方面
webpack层面

• 页面内容

  • 减少 HTTP 请求数
  • Dns缓存（由于dns查询完成之前浏览器不能从这个主机下载任何文件，因此网站访问量高时，做好dns缓存工作，能一定程度上提升网站的访问性能）
  • 避免重定向
  • 缓存 Ajax 请求
  • 预加载与懒加载（1、公共模块和必须用到的模块文件预先加载2、其他模块文件采用懒加载）
  • 骨架屏
  • 大数据渲染优化
  • 大文件传输处理
  • 减少 DOM 元素数量
  • 划分内容到不同域名
  • 尽量减少 iframe 使用
  • 避免 404 错误

• 服务器

  • Cdn缓存（利用cdn分发静态资源文件，提升网站静态资源的获取速度，同时也给静态资源做好缓存工作）
  • http缓存（通过http的meta设置expire和cach-control，防止在有效的缓存时间内对资源进行重复下载）
  • 启用 Gzip
  • 配置 Etag
  • 尽早输出缓冲
  • Ajax 请求使用 GET 方法
  • 避免图片 src 为空

• Cookie

  • 减少 Cookie 大小
  • 静态资源使用无 Cookie 域名

• CSS

  • css应放在页面头部加载，以避免dom加载完成了，cssdom还没有解析完成
  • 避免使用css表达式（Expression）
  • 使用 link 替代 @import
  • 避免统配选择器
  • 对于复杂的ui元素，设置position为absolute或者fixed

• JavaScript

  • 把脚本放在页面底部
  • 使用外部 JavaScript 和 CSS
  • 压缩 JavaScript 和 CSS
  • 移除重复脚本
  • 减少 DOM 操作
  • 使用高效的事件处理

• 图片

  • 使用图片懒加载
  • 优化 CSS Sprite
  • 不要在 HTML 中缩放图片
  • 使用体积小、可缓存的 favicon.ico
  • base64代替单一小图片

• 移动端

  • 保持单个文件小于 25 KB
  • 打包内容为分段（multipart）文档

• 页面渲染优化

8、插件组件封装【敏捷化平台构建之一】
公共方法库
插件/组件封装。 二次封装&开源级组件的打造
Vue自定义指令
除了强调结果【例如：之前半个月开发周期，现在只需要7天】，还可以突出自己的原理源码阅读能力

9、也可以讲一些新技术的攻坚
hybrid
可视化
uni-app
ts
node