杂项

Edwardzh
122 阅读7分钟

  • 变量提升的原因: juejin.cn/post/684490…

    在创建阶段，函数声明存储在环境中，而变量会被设置为 undefined（在 var 的情况下）或保持未初始化（在 let 和 const 的情况下）。
所以这就是为什么可以在声明之前访问 var 定义的变量（尽管是 undefined ），
但如果在声明之前访问 let 和 const 定义的变量就会提示引用错误的原因。这就是所谓的变量提升。

  • 为何 Vue 不用 ES6 的 Class 去实现呢？

    我们往后看这里有很多 xxxMixin 的函数调用，并把 Vue 当参数传入，它们的功能都是给 Vue 的 prototype 上扩展一些方法，
Vue 按功能把这些扩展分散到多个模块中去实现，而不是在一个模块里实现所有，
这种方式是用 Class 难以实现的。这么做的好处是非常方便代码的维护和管理.

  • JS阻塞后续资源下载的根本原因是?

    浏览器在解析过程中，如果遇到请求外部资源时，如图像、JS等。浏览器将下载该资源。
请求过程是异步的，并不会影响HTML文档进行加载，但是当文档加载过程中遇到JS文件，
HTML文档会挂起渲染过程，不仅要等到文档中JS文件加载完毕还要等待解析执行完毕，才会继续HTML的渲染过程。
原因是因为JS有可能修改DOM结构，这就意味着JS执行完成前，后续所有资源的下载是没有必要的，

  • 为什么会有option请求？

在通过设置 CORS 这种方式解决跨域问题时，会在发送请求时出现两种情况，分别为简单请求和复杂请求。

简单请求：

以 Ajax 为例，当满足以下条件时，会触发简单请求
使用下列方法之一：GET，HEAD，POST
Content-Type 的值仅限于下列三者之一：
text/plain，multipart/form-data，application/x-www-form-urlencoded

复杂请求：

对于复杂请求来说，首先会发起一个预检请求，
对于复杂请求来说，首先会发起一个预检请求，该请求是 option 方法的，
通过该请求来知道服务端是否允许跨域请求。

  • 浏览器缓存机制有哪些？

    从缓存位置上来说分为四种，并且各自有优先级，当依次查找缓存且都没有命中的时候，才会去请求网络
Service Worker， Memory Cache， Disk Cache， Push Cache， 网络请求

缓存策略：

 通常浏览器缓存策略分为两种：强缓存和协商缓存，并且缓存策略都是通过设置 HTTP Header 来实现的。

  • 什么是 CI/CD?

    在软件开发中经常会提到持续集成Continuous Integration（CI）和持续交付Continuous Delivery（CD）
CI 和 CD 之间（以及不同 CD 之间）有什么区别？
缩略词 CI / CD 具有几个不同的含义。CI/CD 中的“CI”始终指持续集成，它属于开发人员的自动化流程。
成功的 CI 意味着应用代码的新更改会定期构建、测试并合并到共享存储库中。
该解决方案可以解决在一次开发中有太多应用分支，从而导致相互冲突的问题。

CI/CD 中的“CD”指的是持续交付和/或持续部署，这些相关概念有时会交叉使用。
两者都事关管道后续阶段的自动化，但它们有时也会单独使用，用于说明自动化程度。
持续交付通常是指开发人员对应用的更改会自动进行错误测试并上传到存储库（如 GitHub 或容器注册表），
然后由运维团队将其部署到实时生产环境中。
这旨在解决开发和运维团队之间可见性及沟通较差的问题。因此，持续交付的目的就是确保尽可能减少部署新代码时所需的工作量。

持续部署（另一种“CD”）指的是自动将开发人员的更改从存储库发布到生产环境，以供客户使用。
它主要为了解决因手动流程降低应用交付速度，从而使运维团队超负荷的问题。持续部署以持续交付的优势为根基，实现了管道后续阶段的自动化。

CI/CD 既可能仅指持续集成和持续交付构成的关联环节，也可以指持续集成、持续交付和持续部署这三项构成的关联环节。
更为复杂的是，有时“持续交付”也包含了持续部署流程。
归根结底，纠缠于这些语义其实并无必要，您只需记得 CI/CD 实际上就是一个流程（通常形象地表述为管道），
用于在更大程度上实现应用开发的持续自动化和持续监控。
因案例而异，该术语的具体含义取决于 CI/CD 管道的自动化程度。许多企业最开始先添加 CI，
然后逐步实现交付和部署的自动化（例如作为云原生应用的一部分）。

  • 什么是关键渲染路径? github.com/berwin/Blog…

    浏览器将HTML，CSS，JavaScript转换为屏幕上所呈现的实际像素，
这期间所经历的一系列步骤，叫做关键渲染路径（Critical Rendering Path）。

  • 怎么优化关键渲染路径?

    到目前为止，只有三种因素可以影响关键渲染路径的耗时。而所有的优化方式，
都是在尽可能的针对这三种因素进行优化。这三种因素分别是：
  关键资源的数量
  关键路径的长度
  关键字节的数量

github.com/berwin/Blog…

  加入媒体查询 media的print属性 阻塞css加载的优先级由高级heighest变为lowest
  <link href="style.css" rel="stylesheet" media="print" onload="this.media='all'">
  上面代码先把媒体查询属性设置成print，将这个资源设置成非阻塞的资源。
  然后等这个资源加载完毕后再将媒体查询属性设置成all让它立即对当前页面生效。

  • 为什么避免使用@import?

    这是因为使用@import加载CSS会增加额外的关键路径长度

  • 图像的优化原理?

  • 为什么vue的$nextTick

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // 先使用nextTick注册回调; 为什么没有更新
      this.$nextTick(function () {
        // DOM没有更新
      })
      // 后修改数据
      this.message = 'changed'
    }
  }
})

  • js中的preventDefault与stopPropagation详解

    https://www.cnblogs.com/wolfocme110/p/4001332.html
preventDefault方法: 就是可以阻止它的默认行为的发生而发生其他的事情

  • 什么是设计模式?

    设计模式（Design Pattern）是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。
使用设计模式的目的：为了代码可重用性、让代码更容易被他人理解、保证代码可靠性。
设计模式使代码编写真正工程化；设计模式是软件工程的基石脉络，如同大厦的结构一样
设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性

  • 什么是 内容安全策略CSP（Content-Security-Policy） ?blog.csdn.net/u014465934/… www.ruanyifeng.com/blog/2016/0…

    内容安全策略（CSP），其核心思想十分简单：网站通过发送一个 CSP 头部，
来告诉浏览器什么是被授权执行的与什么是需要被禁止的。
其被誉为专门为解决XSS攻击而生的神器。
CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，
等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。
CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。

  • 二、垃圾回收机制

    垃圾回收机制怎么知道，哪些内存不再需要呢？
最常使用的方法叫做"引用计数"（reference counting）：语言引擎有一张"引用表"，保存了内存里面所有的资源（通常是各种值）的引用次数。
如果一个值的引用次数是0，就表示这个值不再用到了，因此可以将这块内存释放。

  • 三、js的模块化发展;

  • shadow dom 可以锁住body 块;达到监控的目的, 安全

avatar
文章
阅读
粉丝