web前端学习/工作笔记（十六）

81. TAM上云访问链路： 访问域名->UDNS(CNAME)->ias->北极星(负载和寻址)->tke

82. 搜索页性能优化：
    改良的csr，在服务端组装部分数据和html，在不增加服务器负载的情况下，减少在浏览器端的请求，首屏速度更快

83. 为什么模块循环依赖不会死循环，CommonJS和ESModule是怎样处理的？

• CommonJS是拷贝引用，可以利用缓存，避免死循环。每一个模块都先加入缓存再执行，每次遇到require都先检查缓存，这样可以避免死循环
• ESModule是拷贝值，借助模块底图，在循环引用时会有一个状态标记，假如入口模块引入a模块，a模块引用b模块，b中引用a模块，在a引入b的时候，b模块在获取中，b中引用a，可以正常运行a模块，运行到引入b的代码时，因为b模块还在获取中，这个引用略掉不执行

CommonJS借助模块缓存，遇到require函数会先检查是否有缓存，已经有的则不会进入执行，在模块缓存中还记录着导出的变量的拷贝值；
ES Module借助模块地图，已经进入过的模块标注为获取中，遇到import语句会去检查这个地图，已经标注为获取中的则不会进入，地图中的每一个节点是一个模块记录，上面有导出变量的内存地址，导入时会做一个连接——即指向同一块内存。

84. 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错误。

85. Script error.：未知跨域脚本执行错误时会抛出，一般做法：script配置crossorigin,服务端header配置Access-Control-Allow-Origin: *

86. es6以上版本要不要转码成es6

• 结论： 除了迭代器等语法会变得复杂以外，大部分情况不转码，可以用更少的指令，更利于v8提升性能。

89. 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 */ }),
  ],
}

90. unplugin-vue-components可以自动导入组件,也可以自动导入组件库的组件，不需要声明components和import

Components({
      dirs: ['src/components'], // 默认就是识别src/components文件，该文件夹下的所有组件都会自动 import
    })