05 2020 档案
摘要：通过这个图片，我们可以很清楚的看到，HTTP2和HTTP3的传输层是完全不同的协议，HTTP3的传输层是UDP协议。我们知道UDP协议是个不可靠的协议，而TCP协议是可靠协议，怎样保证可靠的呢？ QUIC协议 在UDP协议之上，新增了QUIC协议。由于TCP协议相对于UDP协议控制比较复杂耗时，因此
阅读全文
摘要：小程序加载过程 1 公共库注入；2 资源准备（基础UI创建，代码包下载）；3 业务代码注入和渲染；4 渲染首屏；5 异步请求； 优化方案 控制代码包大小 1 将图片等资源文件放到CND中；2 提取公共样式，共组件提取，代码复用；3 压缩代码，清理无用的代码； 分包加载提高渲染效率 异步请求优化 1
阅读全文
摘要：标准流 < 浮动 < 定位 定位的元素可以使用z-index设置层级，不设置默认为0 层级为0的盒子，也比标准流和浮动高； 层级为负数的盒子，比标准流和浮动低； 层级一样，后面的盒子比前面的层级高； 浮动或者标准流的盒子，后面的盒子比前面的层级高； 提高层级的常用方法： position:relat
阅读全文
摘要：“高内聚”是指将在逻辑上可以归类为一个单元的代码封装在一起，尽量保障一块代码集合主要解决一个需求，在前端开发中，最常见的便是将一个逻辑单元的代码使用IIFE函数进行封装。 可以说，保障代码高内聚即在一定程度上满足了代码“低耦合”的要求，因为低耦合即是要求一个逻辑单元的代码块在改动时，不会造成其他逻辑
阅读全文
摘要：1 初始化参数：解析webpack配置参数，合并shell传入和webpack.config.js文件配置的参数，形成最后的配置结果； 2 开始编译：上一步得到的参数初始化compiler对象，注册所有配置的插件，插件监听webpack构建生命周期的事件节点，做出相应的反应，执行对象的 run 方法
阅读全文
摘要：HTTP2使用的是二进制传送，HTTP1.X是文本（字符串）传送 HTTP1.X使用的是明文的文本传送，而HTTP2使用的是二进制传送，二进制传送的单位是帧和流。 帧组成了流，同时流还有流ID标示 HTTP2支持多路复用 同域名下所有通信都在单个连接上完成； 单个连接可以承载任意数量的双向数据流；
阅读全文
摘要：父组件传递一个对象给子组件，在子组件中直接修改这个接受到的对象里面的值，不改变对象的引用地址，在父子组件中值都可以修改，控制台会报错； 如上，如果子组件改变这个对象的引用地址，子组件中可以修改，父组件中不能修改，控制台会报错； 如果传递的值是普通类型，子组件中可以修改，父组件中不能修改，控制台会报错
阅读全文
摘要：对象序列化是指将对象的状态转换为字符串； 序列化(Serialization)是将对象的状态信息转换为可以存储或传输的形式的过程（百度百科）； 为什么会有对象序列化？ var obj = {x:1, y:2}; 当这句代码运行时，对象obj的内容会存储在一块内存中，而obj本身存储的只是这块内存的地
阅读全文
摘要：我们写的JavaScript代码直接交给浏览器或者Node执行时，底层的CPU是不认识的，也没法执行。CPU只认识自己的指令集，指令集对应的是汇编代码。 JavaScirpt引擎可以将JS代码编译为不同CPU(Intel, ARM以及MIPS等)对应的汇编代码 虽然浏览器非常多，但是主流的JavaS
阅读全文
摘要：通过new Vue() 创建vue实例，vue的生命周期便拉开了序幕 beforeCreate 首先会执行beforeCreate钩子函数。此时的vue实例只是一个空壳，还未挂载DOM元素，无法访问到data和真实的dom，一般不做操作。 vue实例挂载元素$el和数据对象data都为undefin
阅读全文
摘要：在Vue组件之间共享代码，Vue 2 使用mixin，vue3提供了更好的解决方案 - Composition API 。 mixin代码重用 将公共属性提取到一个单独的文件MyMixin.js： export default { data: () => ({ mySharedDataPropert
阅读全文
摘要：原型链继承 // 父类 function Animal(name){ this.name = name; } Animal.prototype.age = 10; // 子类 function Cat(){} // 主要 子类继承父类的原型 Cat.prototype = new Animal();
阅读全文
摘要：先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。 这样做能防止页面一次性向服务器发送大量请
阅读全文
摘要：HTTP 协议支持GZIP 压缩机制，也称协议压缩。 HTTP GZIP压缩是由WEB服务器和浏览器共同遵守的协议，目前主流的服务器和浏览器都支持GZIP压缩技术。 协议压缩就是依据HTTP协议进行压缩，不需要程序员进行压缩，解压编码，而是把压缩过程交给WEB服务器，将解压过程交给客户端。 如果客户
阅读全文
摘要：分别从左向右，从右向左遍历最短的字符串，遍历时截取最短字符串的每一个子串，看长字符串中是否包含这个子串，包含的话把长度push到数组中 function getM(str1, str2){ var len = str1.length >= str2.length ? str2.length : st
阅读全文
摘要：浏览器默认是不允许在HTTPS里面引用HTTP资源的 解决办法，https页面里加载的url以双斜杠“//”开头，这种写法有特殊的用途，它会判断当前的页面协议是http 还是 https 来决定请求 url 的协议，防止浏览器报错，如： <script type="text/javascript"
阅读全文
摘要：1 集中式和分布式 集中式是指只有一个远程版本库，而分布式有本地和远程版本库。 方便性：SVN是集中式版本控制系统，版本库是集中放在中央服务器的，拉代码的时候需要联网从中央服务器哪里得到最新的版本，提交代码也同样。集中式版本控制系统是必须联网才能工作；Git是分布式版本控制系统，它没有中央服务器的，
阅读全文
摘要：HTTP 协议是以 ASCII 码传输，建立在 TCP/IP 协议之上的应用层规范。 http协议的特点 1 无连接 无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。 HTTP 的设计者有意利用这种特点将协议设计为请求时
阅读全文
摘要：webpack能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中。 webpack其中非常重要的一环就是，能够对加载的资源文件，进行一些处理。比如把less、sass文件编译成css文件，负责这个处理过程的，就是webpack的loader。 如： vue-lo
阅读全文
摘要：应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中，store接收reducer作为参数，store通过API(如dispatch)来接受action来调用reduce；惟一改变 state 的办法是触发 action (描述如何处理state的对象)；为了实现根据 ac
阅读全文
摘要：1.静态文件服务器部署在cdn节点，具体url写入html文件中；2.处理业务逻辑和记录用户状态等操作作为动态服务器的主要功能，这样的功能算作动态服务器； 可以简单的理解，静态动态是相对于内容而言，如果每次请求同一个地址，不管参数如何（即参数不起作用），得到的内容都是相同的，那么这个资源就是静态的，
阅读全文
摘要：使用vue-router来实现的单页应用，访问http://cnode.lsqy.tech，进入首页，点击按钮跳入另一个路由，一切都是很正常的，但当这时刷新页面，发现就会出现404了。出现这样的错误Cannot GET /message/，因为默认浏览器会认为你是在请求服务端的路由，服务端那边没有对
阅读全文
摘要：require.ensure() webpack 在编译时，会静态地解析代码中的 require.ensure()，同时将模块添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 按需加载。语法如下： require.ensure(dependencies: String[
阅读全文
摘要：1 尽可能的减少watcher的数量，当监听数据是一个对象的时候，最好具体到监听对象的属性； 2 内容比较多的时候可以用懒加载、分页、滚动加载或者tab方式，减少每次渲染的数量； 3 结合v-if，异步显示dom结构，减少不必要组件的加载； 4 给列表渲染加上唯一的key值，避免重复创建和大规模的重
阅读全文
摘要：React Native 框架在 React 框架的基础上，底层通过对 iOS 平台与 Android 平台原生代码的封装与调用，结合前台的 JavaScript 代码，这样我们就可以通过 JavaScript 代码编写出调用 iOS 平台与 Android 平台原生代码的 App，调用原生代码编写
阅读全文
摘要：在小程序开发的过程中，小程序的体积会随着版本的迭代变的越来越大，这时候我们就希望能够将小程序分成多个包从服务器下载，这样既可以加快首屏的渲染也便于后续按需加载的实现。小程序在微信客户端 6.6.0，基础库 1.7.3 及以上版本开始支持分包功能。在构建小程序分包项目时，构建会输出一个或多个分包。每个
阅读全文
摘要：promise就是三个状态。利用观察者模式的编程思想，只需要通过特定书写方式注册对应状态的事件处理函数，然后更新状态，调用注册过的处理函数即可。 这个特定方式就是then，done，fail，always…等方法，更新状态就是resolve、reject方法。 /** * Promise类实现原理
阅读全文
摘要：TypeScript支持面向对象的编程特性，比如类、接口、继承、泛型等等 泛型 TypeScript泛型是一个提供创建可重用组件方法的工具。它能够创建可以处理多种数据类型而不是单一数据类型的组件。泛型允许我们创建泛型类、泛型函数、泛型方法和泛型接口。 在泛型中，类型参数写在开(<)和闭(>)括号之间
阅读全文
摘要：相同点： 虚拟dom； 组件化； 路由； 公共状态容器； 区别： 1 模板 Vue用近似常规HTML的模板； React推荐你所有的模板通用JavaScript的语法扩展——JSX书写； 在表层上，模板的语法不同，React是通过JSX渲染模板。而Vue是通过一种拓展的HTML语法进行渲染，但其实这
阅读全文
摘要：1.绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，即前端页面的访问域名，设置这个安全域名后，公众号开发者可以在该域名下调用微信开放的JS接口。如下设置： 备注：登录后可在“开发者中心”查看对应的接口权限。 2.引入JS文件 在需要调用JS接口的页面引入如下J
阅读全文
