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);
// 在这个iframe所加载的HTML中绑定一个事件监听器,当事件被触发时,把接收到的token数据写入localStorage
window.addEventListener('message', function (event) {
localStorage.setItem('token', event.data)
}, false);
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