qq_45768871的博客

性能优化：控制关键请求的优先级构建一个网站服务看似简单：发送 HTML，浏览器识别出接下来需要加载什么资源。然后，我们耐心的等待页面就绪。你不知道的是，这背后发生了很多事情。你有没有想过，浏览器是如何判断哪些资产需要以什么顺序被请求的？内容概览：什么是资产优先级？Chrome 如何安排资源优先级？什么样的请求是关键的？Lighthouse 审计：避免关键请求的依赖链。技术：控制请求优先级。技术：图片懒加载。技术：font-display关键请求检查清单。什么是资产优先级？现代浏

TCP 协议简述TCP 提供面向有连接的通信传输，面向有连接是指在传送数据之前必须先建立连接，数据传送完成后要释放连接。无论哪一方向另一方发送数据之前，都必须先在双方之间建立一条连接。在TCP/IP协议中，TCP协议提供可靠的连接服务，连接是通过三次握手进行初始化的。同时由于TCP协议是一种面向连接的、可靠的、基于字节流的运输层通信协议，TCP是全双工模式，所以需要四次挥手关闭连接。TCP包首部网络中传输的数据包由两部分组成：一部分是协议所要用到的首部，另一部分是上一层传过来的数据。首部的结构由.

http背景以前啥都不懂时候听这个名字感觉好牛b的，实际上这玩意很简单，就是改个请求头完了。概念一、强缓存强缓存是设置过期时间，超过设置的时间会发请求，否则就会走缓存，连请求也不会发。状态码是200二、协商缓存协商缓存常用模式有两种，一种是last-modified，一种是etag。也有地方叫对比缓存的。last-modified就是资源的修改时间。如果客户端来请求服务器一个文件，服务器便会给请求头加上last-modified返回给客户端，客户端下次请求同一个文件时，会带上If-Modi

DNS 协议是什么？说说 DNS 完整的查询过程?一、是什么DNS（Domain Names System），域名系统，是互联网一项服务，是进行域名和与之相对应的 IP 地址进行转换的服务器简单来讲，DNS相当于一个翻译官，负责将域名翻译成ip地址IP 地址：一长串能够唯一地标记网络上的计算机的数字域名：是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识二、域名域名是一个具有层次的结构，从上到下一次为根域名、顶级域名、二级

前端简单来说，大前端就是所有前端的统称，比如Android、iOS、web、Watch等，最接近用户的那一层也就是UI层，然后将其统一起来，就是大前端。大前端最大的特点在于一次开发，同时适用于所有平台，开发者不用为一个APP需要做Android和iOS两种模式而担心。大前端是web统一的时代，利用web不仅能开发出网站，更可以开发手机端web应用和移动端应用程序。为什么出现大前端由于node的出现，前端工程师不需要依赖于后端程序而直接运行，从而前后端分离起来。所以当开发一个新产品的时候服务只需要

初始WeakSetECMAScript 6 新增的“弱集合”（WeakSet）是一种新的集合类型，为这门语言带来了集合数据结构。WeakSet 是 Set的“兄弟”类型，其 API 也是 Set 的子集。WeakSet中的“weak”（弱），描述的是 JavaScript 垃圾回收程序对待“弱集合”中值的方式。基本 API可以使用 new 关键字实例化一个空的 WeakSet：const ws = new WeakSet(); 弱集合中的值只能是 Object或者继承自 Object 的类型，.

文章目录一、简单介绍一下HTML、CSS、JavaScript 。二、给一个元素设置宽度、高度、有几种方式 ？三、简单讲讲JavaScript的事件与事件流。事件流都会经历三个阶段：标准事件模型IE事件模型IE事件模型共有两个过程:四、href与src区别五、为什么JavaScript需要写在最后面六、`==` 与 `===`七、``链接伪类顺序八、如何判断一个数是否为NAN下列代码解释一、简单介绍一下HTML、CSS、JavaScript 。二、给一个元素设置宽度、高度、有几种方式 ？//1、通过内

this 指向问题在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）。this是 JavaScript 语言的一个关键字。它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。function test() {　this.x = 1;}上面代码中，函数test运行时，内部会自动有一个this对象可以使用。那么，this的值是什么呢？函数的不同使用场合，this有不同的值。总的来说，this就是函数运行时所在的环境对象。下面分四种情况，详细讨论th

观察者模式-单例模式-Promise 实现TodoList单例模式单例是一种创建型设计模式， 让你能够保证一个类只有一个实例， 并提供一个访问该实例的全局节点。问题单例模式同时解决了两个问题， 所以违反了_单一职责原则_：保证一个类只有一个实例。 为什么会有人想要控制一个类所拥有的实例数量？ 最常见的原因是控制某些共享资源 （例如数据库或文件） 的访问权限。它的运作方式是这样的： 如果你创建了一个对象， 同时过一会儿后你决定再创建一个新对象， 此时你会获得之前已创建的对象， 而不是一

智能重复/* 试着编写smartRepeat 使用栈结构 ，自己编写栈结构 ，需要完成栈的基本操作，入栈 ，出栈，销毁栈，栈的初始化 将 3[abc] ---> abcabcabc 将 3[2[a]2[b]] ---> aabbaabbaabb 将 3[2[a]2[2b]] ---> aa2b2b aa2b2b aa2b2b (最终

作者：晴栀人生天地之间，若白驹之过隙，忽然而已。观察者模式观察者模式是这样一种设计模式。一个被称作被观察者的对象，维护一组被称为观察者的对象，这些对象依赖于被观察者，被观察者自动将自身的状态的任何变化通知给它们。当一个被观察者需要将一些变化通知给观察者的时候，它将采用广播的方式，这条广播可能包含特定于这条通知的一些数据。当特定的观察者不再需要接受来自于它所注册的被观察者的通知的时候，被观察者可以将其从所维护的组中删除。 在这里提及一下设计模式现有的定义很有必要。这个定义是与所使用.

defineReactive函数监听变化import observe from './observe'export default function defineReactive(data, key, val) { console.log("我是defineReactive", data, key) if (arguments.length === 2) { val = data[key] } // 子元素要进行observe ,至此形成 递归， 这个.

koa基本使用var Koa = require('koa');var Router = require('koa-router');var app = new Koa();var router = new Router();/* koa 中间件*/app.use(async(ctx, next) => { console.log(new Date()) await next();})router.get('/', (ctx, next

作者： 晴栀良辰难再，人生中大好时刻，不要再去旧梦重圆。文章目录原型链对应名称从属关系一、prototype二、`__proto__`补充说明：三、constructor补充说明：四、实例与原型五、原型的原型六、原型链继承属性继承方法在 JavaScript 中使用原型使用不同的方法来创建对象和生成原型链使用语法结构创建的对象使用构造器创建的对象使用 `Object.create` 创建的对象使用 `class` 关键字创建的对象性能错误实践：扩展原生对象的原型总结：4 个用于拓展原型链的方法..

A. DNS（Domain Name System，域名系统），因特网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。BC.DNS协议运行在UDP协议之上，使用端口号53。D. 浏览器：chrome对每个域名会默认缓存60s，IE将DNS缓存30min，Firefox对DNS缓存功能，但是默认缓存时间只有1分钟，safari约为10s。windows DNS缓存的默认值是MaxCacheTTL，它的默认值是86400s，也就是..

diff算法是发生在虚拟DOM上snabbdomH函数是用来产生虚拟节点的虚拟节点有哪些属性虚拟节点上树简单的p函数使用import { init } from 'snabbdom/init'import { classModule } from 'snabbdom/modules/class'import { propsModule } from 'snabbdom/modules/props'import { styleModule } from 'snabbdom/modul

diff算法是发生在虚拟DOM上snabbdomH函数是用来产生虚拟节点的虚拟节点有哪些属性虚拟节点上树简单的p函数使用import { init } from 'snabbdom/init'import { classModule } from 'snabbdom/modules/class'import { propsModule } from 'snabbdom/modules/props'import { styleModule } from 'snabbdom/modul

手写Mustache文章目录手写Mustachemustache基本使用自己实现目录结构扫描类Scanner将模板字符串变成初步tokens将token生成嵌套tokens自己实现tokens处理“a.b.c”（lookup函数）递归处理嵌套数据（parseArray方法）将 tokens 变成dom字符串（renderTemplate方法）源码mustache基本使用mustache.js 是 mustache 模板系统的JavaScript实现。Mustache 是一套轻逻辑的模板语法。它可以

作者：晴栀Sunset必须记住我们学习的时间是有限的。时间有限，不只由于人生短促，更由于人的纷繁。我们应该力求把我们所有的时间用去做最有益的事。文章目录手写MVVM双向数据绑定基础知识Object.defineProperty()语法描述描述符默认值汇总描述符可拥有的键值示例创建属性修改属性Writable 属性Enumerable 属性Configurable 属性添加多个属性和默认值[自定义 Setters 和 Getters]继承属性Proxy术语语法参数方法handler 对象的方法示...

文章目录一、webpack 简介1.1 webpack 是什么1.2 webpack 五个核心概念1.2.1 Entry1.2.2 Output1.2.3 Loader1.2.4 Plugins1.2.5 Mode二、Webpack 初体验2.1 初始化配置2.2 编译打包应用三、webpack 开发环境的基本配置3.1 创建配置文件3.2 打包样式资源3.3 打包html资源3.4 打包图片资源3.5 打包其他资源3.6 devserver3.7 开发环境配置（基本模板）四、webpack 生产环境的基本

作者： 晴栀Sunset良辰难再，人生中大好时刻，不要再去旧梦重圆。公众号链接：神奇的focus-within文章目录神奇的伪类选择器focus-within:focus-within 的冒泡性举个例子冒泡案例感知用户的点击事件案例一案例二配合 `:placeholder-shown `伪类实现表单效果兼容性案例综合案例导航总结神奇的伪类选择器focus-within:focus-within是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元.

作者： 晴栀珍惜拥有的每一天，拥抱生命里的每一个瞬间。莫到日历沙沙划去了岁月，莫到钟摆悠悠摇老了容颜。不要一眨眼，芳华岁月都已成过往之事。才发现，时光匆匆逝去光阴真如箭。文章目录有趣的css动画使用 border-image 实现渐变边框使用 border-image 实现渐变边框实现代码如下border-radius 失效代码如下缺点background-image + 伪元素使用 background-clip 实现缺点border-image + overflow: hiddenborder-.

作者： 晴栀Sunset时间论钟头，日子论盼头，生命有尽头，命运有想头。惜时有紧头，干事不怵头，拼搏有劲头，坚持走到头。愿君把握好年头，惜时记心头，努力奔前头，好运没有头。文章目录css新特性背景边框文本效果渐变线性渐变径向渐变2D转换3D转换过渡动画定义动画集调用动画集多媒体查询媒体查询的定义媒体查询的使用Flex布局定义基本概念容器的属性项目的属性实例css新特性背景CSS3更新了几个新的背景属性用来控制背景元素background-origin: 规定背景图片的定位区域，..

作者：晴栀Sunset平行四边形文章目录平行四边形背景知识难题嵌套元素方案伪元素方案总结时间有三种步伐：未来姗姗来迟，现在象箭一样飞逝，过去永远静止不动。背景知识基本的 CSS 变形难题平行四边形其实是矩形的超集：它的各条边是两两平行的，但各个角则不一定都是直角。在视觉设计中，平行四边形往往可以传达出一种动感。让我们试着用 CSS 创建一个按钮状的平行四边形链接。我们的起点就是一个普通的块状按钮，辅以一些简单的样式，如图 3-13 所示。然后，我们可以通过skew() ..

学习累了来点好玩的鼠标hover效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>♥</title> <style> h

条纹背景文章目录条纹背景条纹背景背景知识难题解决方案垂直条纹linear-gradient()斜向条纹更好的斜向条纹repeating-linear-gradient() 和 repeating-radial-gradient()灵活的同色系条纹总结我以为世间最可宝贵的就是“今”，最易丧失的也是“今”。因为它最容易丧失，所以更觉得它宝贵。条纹背景背景知识CSS 线性渐变，background-sizecss渐变https://www.w3.org/TR/css-images-3/#

边框内圆角文章目录边框内圆角背景知识问题解决方法注意点总结不要老叹息过去，它是不再回来的；要明智地改善现在。要以不忧不惧的坚决意志投入扑朔迷离的未来。背景知识box-shadow，outline，“多重边框”有时我们需要一个容器，只在内侧有圆角，而边框或描边的四个角在外部仍然保持直角的形状，如图 2-15 所示。这是一个有趣的效果，目前还没有被滥用。用两个元素可以实现这个效果，这并没有什么特别的：<style>.something-meaningful { ba

文章目录透明边框问题举例解决方案测试总结透明边框相信你以前肯定尝试过 CSS 中的半透明颜色，比如 rgba()和hsla()。半透明颜色是 2009 年发生的一场重大变革。从那以后，我们终于可以在网页设计中使用它们了，但是为了尝鲜还需要付出额外的代价。比如说，我们需要做好回退，加载 shim 脚本，甚至在 IE 下还需要用到恶心的滤镜来hack。尽管半透明颜色很受欢迎，但人们对它的使用基本上还是集中在背景上的。这里面有一些原因。问题假设我们想给一个容器设置一层白色背景和一道半透明白色边框，b

实现文字环绕要想让文字环绕在图片的周围，让图片 float 就可以了；如果还想要实现文字圆形环绕图片的效果，可以使用 shape-outside: circle(); 属性。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

实现多重边框背景知识box-shadow 的基本用法难题回首往事，当背景与边框（第三版）（http://w3.org/TR/css3-background）还在草案阶段时，CSS 工作组内部有过很多讨论，关于是否应该允许多重边框，就像多重背景那样。不幸的是，当时一致认为这个特性并没有足够多的使用场景，而且网页开发者还可以使用 border-image 来达到相同的效果。然而工作组忽略了一点：我们通常希望在 CSS 代码层面以更灵活的方式来调整边框样式。因此，网页开发者们最终不得不折腾出各种

vue watch监听对象及对应值的变化var vm=new Vue({ data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听，可监听到对象、数组的变化 han

底部弹出层操作组件说明（bottom-popup-operation）前提使用uview弹出层组件源码<template> <view class="bottom-popup-operation"> <u-popup v-model="show" mode="bottom" @close="close" :mask="mask" :border-radius="20" :custom-style="popupStyle" safe-

<template> <view class="video-content"> <!-- <topNavbar title="用户口碑" isIcon titilePosition="left" @clickIcon="navToBack"> </topNavbar> --> <view class="main" v-for="item in videoList" :key="item.id"> <vie.

文章目录一、这个问题怎么解决呢？二、封装按钮锁定、解锁逻辑三、使用实例一、这个问题怎么解决呢？简单点，使用一个lock标记，在请求发出时上锁，上锁后就不可以再发请求，可以在请求结束后解锁：let clickButton = (function () { let lock = false return function (postParams) { if (lock) return lock = true // 假设使用axios发送请求 axios.post

当我们睁开眼，时间与太阳一起走过;当我们难过时，时间与悲伤一起走过;当我们孤独时，时间与寂寞一起走过;当我们读短信时，时间在读信间走过;请珍惜时间，不要让时间哭着从我们指缝间走过。文章目录前端 API 请求缓存数据的 5 种方案方案一 数据缓存方案二 promise 缓存方案三 多promise 缓存方案四 添加时间有关的缓存方案五 基于修饰器的方案四总结前端 API 请求缓存数据的 5 种方案在开发 web 应用程序时，性能都是必不可少的话题。对于webpack打包的单页面应用程序.

不要老叹息过去，它是不再回来的;要明智地改善现在。要以不忧不惧的坚决意志投入扑朔迷离的未来。文章目录变量、作用域与内存前言一、原始值与引用值1.动态属性2.复制值3.传递参数4.确定类型二、执行上下文与作用域1.作用域链增强2.变量声明2.1. 使用 var 的函数作用域声明2.2 使用 let 的块级作用域声明2.3. 使用 const 的常量声明2.4. 标识符查找三、垃圾回收1.标记清理2.引用计数3.性能4.内存管理4.1. 通过 const 和 let 声明提升性能4.2隐藏类和删除操.

一份汗水，不份收获，一份耕耘，一份成就。——何肖娜文章目录操作符一元操作符一、递增/递减操作符二、 一元加和减三、 位操作符1. 按位非2. 按位与3. 按位或4. 按位异或5. 左移6. 有符号右移7. 无符号右移四、布尔操作符1. 逻辑非2. 逻辑与3. 逻辑或五、乘性操作符1. 乘法操作符2. 除法操作符3. 取模操作符六、指数操作符(**)七、加性操作符1. 加法操作符2. 减法操作符八、关系操作符九、相等操作符1. 等于和不等于2. 全等和不全等十、条件操作符十、赋值操作符十一、逗号操作.

有汗水，有仔细、有心，前面的路没有转角。——范华倩文章目录Symbol 类型1. 符号的基本用法2. 使用全局符号注册表3. 使用符号作为属性4. 常用内置符号5. Symbol.asyncIterator6. Symbol.hasInstance7. Symbol.isConcatSpreadable8. Symbol.iterator9. Symbol.match10. Symbol.replace11. Symbol.search12. Symbol.species13. Symbol.spl.

文章目录JavaScript柯里化JavaScript中valueOf、toString的隐式调用JavaScript中valueOf函数与toString方法深入理解JavaScript柯里化JavaScript中valueOf、toString的隐式调用函数add可以实现连续的加法运算函数add语法如下add(num1)(num2)(num3)…;//注意这里是省略号哟，无限使用举例如下：add(10)(10)=20;add(10)(20)(50)=80;add(10)(20)(50

Object.defineProperty()本文部分参考了书籍《你不知道的javascript》上卷对象的定义与赋值经常使用的定义与赋值方法obj.prop =value或者obj['prop']=valueObject.defineProperty()语法说明Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性Object.defineProperty(obj, prop, desc)obj 需要定义属性的当前对象