web前端学习/工作笔记（十六）
- TAM上云访问链路： 访问域名->UDNS(CNAME)->ias->北极星(负载和寻址)->tke
- 搜索页性能优化： 改良的csr，在服务端组装部分数据和html，在不增加服务器负载的情况下，减少在浏览器端的请求，首屏速度更快
- 为什么模块循环依赖不会死循环，CommonJS和ESModule是怎样处理的？
- CommonJS是拷贝引用，可以利用缓存，避免死循环。每一个模块都先加入缓存再执行，每次遇到require都先检查缓存，这样可以避免死循环
- ESModule是拷贝值，借助模块底图，在循环引用时会有一个状态标记，假如入口模块引入a模块，a模块引用b模块，b中引用a模块，在a引入b的时候，b模块在获取中，b中引用a，可以正常运行a模块，运行到引入b的代码时，因为b模块还在获取中，这个引用略掉不执行
CommonJS借助模块缓存，遇到require函数会先检查是否有缓存，已经有的则不会进入执行，在模块缓存中还记录着导出的变量的拷贝值；
ES Module借助模块地图，已经进入过的模块标注为获取中，遇到import语句会去检查这个地图，已经标注为获取中的则不会进入，地图中的每一个节点是一个模块记录，上面有导出变量的内存地址，导入时会做一个连接——即指向同一块内存。- router的三种模式（https://mp.weixin.qq.com/s/5JhY7Vi2aAsg4IKfzfoFNw）:
- hash: vue的默认路由方式使用url的hash值作为路由，使用api: location.replace; location.hash
- history: 比#优雅，使用api: history.pushState()、history.replaceState()、history.go();
- abstract: 支持所有js运行环境，包含node.js服务器端，如果发现没有浏览器的api，路由会自动强制进入这个模式。
- hash和history区别：
- hash路由通过监听hashchange重新渲染页面，history通过监听popstate重新渲染页面。
- hash路由，#后面的部分不会出现在http请求，通过history api，丢掉了丑陋的#，但是history怕刷新，url需要服务端有对应资源，不然容易404, 可以通过connect-history-api-fallback插件解决，把请求定位到索引文件。默认为/index.html
- hash模式较丑，history模式较优雅
- pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL;
- pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中;
- pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串;
- pushState可额外设置title属性供后续使用;
- hash兼容IE8以上，history兼容IE10以上;
- history模式需要后端配合将所有访问都指向index.html，否则用户刷新页面，会导致404错误。
- Script error.：未知跨域脚本执行错误时会抛出，一般做法：script配置crossorigin,服务端header配置Access-Control-Allow-Origin: *
<script src="user.com/index.js" crossorigin ></script>- es6以上版本要不要转码成es6
- 结论： 除了迭代器等语法会变得复杂以外，大部分情况不转码，可以用更少的指令，更利于v8提升性能。
- vue.config.js和webpack.config.js都可配置webpack
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-vue-components/webpack')({ /* options */ }),
],
},
}
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-vue-components/webpack')({ /* options */ }),
],
}- unplugin-vue-components可以自动导入组件,也可以自动导入组件库的组件，不需要声明components和import
Components({
dirs: ['src/components'], // 默认就是识别src/components文件，该文件夹下的所有组件都会自动 import
})本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-10-10，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读