web前端学习/工作笔记(十六)

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

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

  3. 为什么模块循环依赖不会死循环,CommonJS和ESModule是怎样处理的?

  • CommonJS是拷贝引用,可以利用缓存,避免死循环。每一个模块都先加入缓存再执行,每次遇到require都先检查缓存,这样可以避免死循环
  • ESModule是拷贝值,借助模块底图,在循环引用时会有一个状态标记,假如入口模块引入a模块,a模块引用b模块,b中引用a模块,在a引入b的时候,b模块在获取中,b中引用a,可以正常运行a模块,运行到引入b的代码时,因为b模块还在获取中,这个引用略掉不执行
CommonJS借助模块缓存,遇到require函数会先检查是否有缓存,已经有的则不会进入执行,在模块缓存中还记录着导出的变量的拷贝值;
ES Module借助模块地图,已经进入过的模块标注为获取中,遇到import语句会去检查这个地图,已经标注为获取中的则不会进入,地图中的每一个节点是一个模块记录,上面有导出变量的内存地址,导入时会做一个连接——即指向同一块内存。
  1. 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错误。
  1. Script error.:未知跨域脚本执行错误时会抛出,一般做法:script配置crossorigin,服务端header配置Access-Control-Allow-Origin: *

  1. es6以上版本要不要转码成es6
  • 结论: 除了迭代器等语法会变得复杂以外,大部分情况不转码,可以用更少的指令,更利于v8提升性能。
  1. 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 */ }),
  ],
}
  1. unplugin-vue-components可以自动导入组件,也可以自动导入组件库的组件,不需要声明components和import
Components({
      dirs: ['src/components'], // 默认就是识别src/components文件,该文件夹下的所有组件都会自动 import
    })

你可能感兴趣的:(web全栈,web前端,循环依赖,vue免依赖,网站篡改,路由模式)