学习前端面试知识（9）

  2024-8-9  打卡第九天  学习视频链接

js延迟加载

• 延迟加载：等页面加载完成后再进行加载
• 提高页面加载速度
• defer属性，同步加载，让脚本与文档同步解析，顺序执行，当文档解析完成再执行defer，执行完再执行脚本，不会阻塞页面渲染，按顺序执行。
• async属性，会使脚本异步加载，不会阻塞页面解析过程，加载完会立马执行js脚本，这个时候如果文档还没有解析完成同样会阻塞，多个async执行顺序不可预测。
• 动态创建dom，对文档的加载事件进行监听，当文档加载完后再动态的创建script标签来引入js脚本
• setTimeout 延迟加载js脚本
• js最后加载

异步编程实现方式

• 回调函数，回调地狱，代码耦合度高，不利于代码维护，就是在一层理再调用一个接口，接口里再调用接口就是回调地狱。
• Promise，链式调用，解决了地狱回调，可能造成语意不够明确
• generator，同步顺序书写函数，控制权转移回来，需要有自动执行函数的机制
• async，其实是Promise和generator的语法糖，自带一个执行器，如果返回的是一个Promise对象，会等待返回变成resolve，因此可以将异步转为同步书写，并且和这个函数可以自动执行

简单说说对pnpm的理解

• 本质还是一个包管理器，跟npm和yarn相似，更加完善。
• 优势：
  •  包安装速度很快
  • 磁盘空间利用高效

怎么理解Promise 

• 一个异步编程的解决方案，一个对象，可以获取异步操作的信息，出现改善了异步编程的困境，避免了回调地狱，降低了代码的耦合性。接受一个函数作为参数，返回Promise实例，如果传入一个值会导致值穿透，就是明明传入了数据，但是输出的还是上一次的内容。
• 一个容器，包含某个未来才会结束的事件，通常是一个异步操作的结果 
• 三个状态：pending（进行中），resolved（已完成），rejected（已拒绝），状态不可逆
• 两个过程：
  •  pending-fulifilled就是Resolve 已完成
  • pending-rejected就是Rejected 已拒绝
• 特点：
  • 对象状态不受外界影响
  • 只有异步操作的结果可以决定状态，其他操作无法改变。Promise是承诺的意思，可以理解一旦状态确定就不能改变
  • 事件已经发生，在添加回调函数还是能打印出结果，但是普通函数事件发生后再监听就监听不到了
• 缺点：
  •  无法取消，一旦构造Promise函数会立即执行，不设置回调函数得不到抛出的错误，无法确定是什么状态

Vuex中的核心重要属性

• state
  • 单一状态树，页面数据从该对象中获取。
  • 单一状态树包含了全部的应用层级状态，作为唯一的数据源，每个应用仅包含一个store实例
  • 单一状态树能直接定位特定的状态片段，调试过程中获得当前应用状态的快照
  • 不可直接对state进行更改，需要通过Mutation
  • Vuex存储状态是响应式的，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态
• Getter
  • 可以认为是store的计算属性，对state加工衍生出来的数据
  • 就像computed计算属性一样，getter会根据它依赖的值而缓存，只有当他的依赖值发生改变才会被重新计算
  • 可以在多个组件中共享getter函数
• Mutation
  •  Vuex中store数据改变的唯一方法就是Mutation
  • 通俗理解，mutation里面装着改变数据的方法集合，处理数据逻辑的方法全放在mutation里，使数据和视图分离
• action
  •  类似mutation，不同的是action提交的是mutation，通过mutating改变state，而不是直接操作
  • action可以包含任何异步操作
• module
  • 由于使用单一树，所有对象会集中到一个较大的对象中，当应用非常复杂的时候，store对象就可能变得异常臃肿
  • 为了解决上述问题，vuex允许将store分割成module，每个模块拥有自己的state,getter,mutation,action，甚至是嵌套子模型

什么是跨域，怎么解决跨域？

• 浏览器从一个域名的网页去请求另一个域名的资源时，域名，端口，协议任一不同，都是跨域 
• CORS（跨资源共享）：W3C规范，允许在服务器设置特定头频字段来允许跨域请求