Kousaka-Mayuri-CSDN博客

原创 CSS Modules

相对于正常css加入了块级作用域和模块依赖目的是为了保证某个组件的样式而不会影响其他组件的样式使用webpack的css-loader插件来实现css modules在webpack.config.js中配置css modulesmodule.exports = { entry: __dirname + '/index.js', output: { publicPath: '/', filename: './bundle.js' }, module: { lo

2022-01-16 15:00:07 570 1

原创 BFC知识

BFC Block Formatting context 块级格式化上下文为元素添加BFC属性，相当于元素变成了一块独立的渲染区域，不会受到外层元素的影响触发BFC● 根元素● 浮动元素● 绝对定位元素● overflow值不为visible的块元素● contain值为layout、content或paint元素● 多列容器（column-count或column-width不为auto，包括column-count为1）BFC的特性和作用避免外边距重叠外边距重叠现象：当两个相邻元

2021-12-26 16:16:41 198

原创 cookie和session

cookie在客户端记录用户身份session在服务器端记录用户身份Cookiecookie是服务器端颁发的，保存在客户端。在时间到期之前，客户端可以通过请求带上cookie提交给服务器，以此让服务器辨认用户状态。在控制台输入alert(document.cookie);可以看该网站颁发的cookiecookie有不可跨域名性，如其名，不能在A网站用B网站颁发的cookie进行身份验证maxAge属性为有效期，通过getMaxAge()和setMaxAge()来读写属性当该属性为负数时，有效期

2021-12-24 12:04:47 176

原创 JS连等机制

● 连等是从右向左开始执行● 连等时引用不变，指向在连等结束后发生变化var a = {n:2};//指向{n:2}var b = a;//引用a.x = a = {n:1};//此时在执行过程中，a仍然指向{n:2}这块内存console.log(a);//{n:1}console.log(b);//{n:2,x:{n:1}}...

2021-12-24 12:03:15 1560

原创数组扁平化、去重、排序

let a = [[1,2,3],[4],[5,6,[7,[8]]]];let result = [];let hash = {};function flat(arr){ for(let i = 0'i<arr.length;i++){ if(typeof arr[i] == 'number') { if(result.indexOf(arr[i])==-1)result.push(arr[i]);//去重 if(!hash[arr[i]]){ha

2021-12-24 12:02:05 312

原创 SSL/TLS握手过程

C：客户端S：服务端C向S发送一个请求，其中包含C支持的TLS版本、加密套件和一个随机数（Client Random）S收到后，选出要用的加密套件，将公钥和证书加一个随机数（Server Random）发送过去C收到后，生成一个随机数，然后用拿到的公钥对它进行加密（预主密钥），然后发送给SS收到预主密钥后，用私钥进行解密，获得预主密钥随机数C和S都用拿到的客户端随机数、服务器随机数和预主密钥进行计算得出会话秘钥。接下来就是对称加密的通话过程了作者基于自己的理解写的，如有不对的请在评论区指

2021-12-24 12:00:35 1624

原创 TCP三次握手和四次挥手

作者基于自己的理解稍微整理了一下三次握手和四次挥手的机制，如有不对的地方，还请在评论区指教一下，谢谢。C：客户端S：服务端三次握手：C向S发送一个请求，SYN同步序号，并初始化一个序列号xS接收后，向C发送一个ACK确认号，和一个SYN同步序列号，初始化一个序列号y，并将x+1作为确认号和y序列号都发送过去C接收后，会发送一个ACK确认号，并将y+1发送过去为什么要发序号？可以保证数据不丢失为什么服务器还要发送SYN握手信号？SYN信号是为了建立并确认通信为什么是三次握手而不是两次

2021-12-24 11:59:21 1222

原创 JS 深拷贝和浅拷贝

浅拷贝基本类型赋值，引用类型赋值堆地址function shallowCopy(variable){ var result ={}; for(var i in variable){ if(variable.hasOwnProperty(i)){ result[i] = variable[i]; } } return result;}深拷贝在堆中再开辟一块内存进行拷贝，将需要拷贝的内容新建一个存放在内存中，然后再把地址赋给变量function d

2021-11-18 19:11:06 449

原创强缓存和协商缓存

强缓存：当浏览器去请求服务器资源时，服务器会在response header中设置该文件的缓存配置，时间和类型由服务器端控制。例如：respone header 下的cache-control常见的设置是max-age public private no-cache no-store等给资源设置一个过期时间，客户端每次请求时都会查看是否过期，过期则向服务器请求资源。这是给客户端自给自足使用的。协商缓存：发请求–>看资源是否过期–>过期–>请求服务器–>服务器对比资源是

2021-11-18 19:09:23 164

原创防抖和节流

防抖防止频繁的点击，设置一个定时器，每次点击清空计时，当计时结束后回调点击事件。是为了短时间多次点击只作用一次，不至于多次请求而使服务器负担加重。function antiShake(fn){ var timer = null; return function(){ clearTimeout(timer);//点击后立即清空计时，重新计时 timer = setTimeout(()=>{ fn.call(this);//绑定回调函数的作用域 console.

2021-11-18 19:08:24 359

原创进程与线程

进程进程是启动一个程序时，操作系统会为其创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，这样的运行环境为进程。单进程与多进程单进程浏览器单进程浏览器所有功能模块都是运行在同一个进程中，而这样会导致其不稳定、不流畅、不安全。● 不稳定：单进程很容易崩溃，导致全部功能失效，因为功能都绑定在一个进程上● 不流畅：当一个进程被阻塞，就会出现浏览器整体的卡顿● 不安全：通过C/C++写的插件可以对系统执行写入与读取，对信息造成危害多进程浏览器解决了不稳定、不流畅、不安全：● 稳定：

2021-11-18 19:06:35 68

原创浏览器网络

概念FP（First Paint）页面加载到首次开始绘制的时长，影响FP的因素很多，例如：网络加载速度IP（Internet Protocol）网络层协议，网络协议。计算机地址就是IP地址，访问网站实际上是主机对一台计算机（服务器）请求信息。当一台主机要向另一台主机发送请求时，在传输之前加上该主机的IP地址信息，这样在传输中才能正确寻址。UDP（User Datagram Protocol）传输层协议，用户数据包传输协议。UDP重要的信息是端口号，通过端口号可以把指定的数据包发送给指定的程序。

2021-11-18 19:04:42 170

原创 web网络缓存

Cookies小型文本数据，每个web站点会为访问者产生一个唯一的ID，然后将其以cookie文件的形式保存在访问者的机器上。当浏览器下次访问web时，会查阅硬盘上的cookie。cookie是由key/value组成的文本文件，还有一个文件保存所有对应web站点信息。通过后者，可以查看哪些web站点放置了cookie。web storagesession与cookie功能效果相同，存储在服务器。当向服务器访问某个网页时，会在服务器的内存里开辟一块，这块内存就会做session。当访问页面时，服务器

2021-11-18 18:59:03 814

原创浏览器渲染流程

CSS继承规则在DOM树中子节点会继承父节点的样式，例如body设置了font-size：20px，那么嵌套在其中的p标签就会继承body的CSS属性，隐式含有CSS中font-size：20px。CSS层叠规则记得填坑渲染流水线子阶段● 构建DOM树● 样式计算● 布局阶段● 分层● 绘制● 分块● 光栅化● 合成每个子阶段都有输入内容、处理过程、输出内容构建DOM树浏览器无法直接理解和使用HTML，所以需要将HTML转换为浏览器能够理解的结构——DOM树通过HTML标签

2021-11-17 12:40:26 384

原创 CSS构建

渲染流水线请求HTML文件-响应HTML文件-解析HTML构建DOM树-请求CSS文件-响应CSS文件-构建CSSOM树（即document.stylesheets）-执行JS代码继续构建DOM树-构建布局树-渲染CSSOM树CSSOM树有两个作用：● 提供给JS操作样式表的能力● 为布局树的合成提供基础的样式信息解析白屏在前一个页面提交数据之后跳转页面，渲染进程会创建一个空白页面，我们通常把这段时间称为解析白屏缩短白屏策略● 通过内联JS和CSS来避免下载这两种文件，获取HTML即可开始

2021-11-17 11:59:10 87

原创 JS V8执行机制

编译型和解释型语言编译型通过编译将代码最终转换为二进制文件存储本地，方便以后执行。不再需要编译C++与GO等解释型每次执行都需要编译，经历动态解释而执行JS、PY等解释型语言在最终执行需要经历以下步骤源代码-AST-字节码AST抽象语法树首先将源代码转化为抽象语法树，并生成执行上下文https://resources.jointjs.com/demos/javascript-ast可以使用上述网站查看一段JS代码如何转换为AST分词词法分析，将源码拆解为一个个不可再分的单个字符或

2021-11-15 20:22:49 525

原创 JS 垃圾回收机制

ESP记录当前执行状态的指针，指向当前运行状态的执行上下文，当它下移时，会将之前的执行上下文销毁，即清理调用栈的垃圾调用栈的变量虽然得到了回收，但是堆内的引用类型变量却一直存放在堆中，这时需要JS的垃圾回收器来处理代际假说● 因为变量在内存中被访问的时间是很短暂的，所以就使用这样的机制，通过一次访问就变得不可访问● 不可销毁的对象则停留时间更久新生代和老生代● 副垃圾回收器处理新生代的回收● 主垃圾回收器处理老生代的回收活动对象是正在使用的对象，非活动对象是需要回收的垃圾标记空间中的活

2021-11-15 20:19:09 405

原创 JS Promise

new Promise(function(resolve,reject){ console.log("Run");});resolve和reject都是函数，调用resolve（又称fulfilled）代表正常，reject代表异常，还有一个pending代表进行中，通过回调函数的不同（resolve，reject，pending）来给Promise对象上对应的状态new Promise(function (resolve,reject){ console.log(1); re

2021-11-02 19:03:19 64

原创 Node.js Buffer库基础函数

缓冲区JS本身并没有二进制数据类型，所以需要用buffer库来处理二进制数据使用：const buf = Buffer.from('runoob','ascii');//输出72756e6f6f62console.log(buf.toString('hex'));//输出base64数据console.log(buf.toString('base64'));写入缓冲区buf.write(string[, offset[, length]][, encoding])● string为字

2021-11-01 22:55:45 242

原创跨域的定义与解决

跨域问题因为浏览器的同源策略，非同源网址之间不可内容交互。非同源的一个域的JavaScript脚本不可对另一个域的内容进行交互。判断跨域当请求url与当前url的子域名、主域名、端口其中之一不一致时，会产生跨域限制非同源限制● 无法读取cookie、localstorage、indexedDB● 无法接触非同源的DOM● 无法发送AJAX请求解决办法设置document.domain解决cookie读取问题浏览器通过document.domain属性来判断两个页面是否同源，可以通过设置相

2021-10-25 15:29:19 117 1

原创 JS Set特性

类似于数组的特性，可以个别类似哈希表的问题。Set内元素不重复，如果使用含有重复数据的数组进行初始化，会造成重复数值排除的现象new Set([1,2,3,4,4]).size //4

2021-10-21 10:11:55 143

原创 JS Let和Var的区别

let所在的代码块有效var有变量提升作用域与全局变量var a = [];for(let i = 0;i<5;i++){ a[i] = function(){ console.log(i); }}a[3]();//3var a = [];for(var i = 0;i<5;i++){ a[i] = function(){ console.log(i); }}a[3]();//5这是为什么，因为let仅在所在作用域有效，即每次循环中，所以每个循环都

2021-10-21 10:11:23 100

原创 JS块级作用域与闭包

作用域作用域即是一套变量访问规则，规则内容包含如何存储和访问变量。（图片引用自https://lucifer.ren/fe-interview/#/topics/js/scope&closures）当一段代码执行时，大概会经历以下几个步骤：JS源码通过语法分析，转化为tokenstokens经过语义分析，转化为AST（抽象语法树）AST会被转换为字节码JS运行时开始运行字节码运行到函数声明或者变量时，引擎发送一个RHS（或LHS），会问scope chain（作用域），函数或变量

2021-10-21 10:09:31 181

原创 JS类型变量与值

ECMAScript规范的类型共有六种：Undefined、Null、Boolean、String、Number和ObjectES6添加的新类型：Symbol基本类型和引用类型的区分方式是是否可以表示为固定长度。除了Object之外的类型皆为基本类型，基本类型存放在栈上，引用类型存放在堆上。Object无法预知长度，并且可以mutate，所以划分为引用类型。NumberJS没有真正的整数，使用的number类型数值都是浮点数。JavaScript明确说明过使用的都是“双精度”（64位二进制）

2021-10-21 10:08:12 65

原创 JS引用和操作符优先级

2021-10-21 10:05:54 92

原创 JS原型和继承

protoJS继承的原理是prototypeJS中存在一些全局内置函数，Function、Object、Array。所有的数组、Object、函数对象，都是由对应的全局内置函数创建的1.__proto__ === Number.prototype;// true'1'.__proto__ === String.prototype;// truetrue.__proto__ === Boolean.prototype;// true原型链当访问一个对象的属性时，倘若没有该值，则会沿着该对象的

2021-10-21 10:03:34 65

原创 JS this指针

引子var name = "Heternally";var obj = { name: "zl", foo: function() { console.log(this.name); }};var foo = obj.foo;obj.foo(); // "zl"foo(); // "Heternally"为什么结果会不一样，因为obj.foo()运行在obj的环境之下，所以this指针指向的是obj内部的作用域。而foo()运行在全局环境下，在非严格模式下this指向

2021-10-21 10:02:47 67

原创 JS高阶函数

高阶函数函数接受函数作为形参，调用并返回。function sum(a){ return a+1;}function sumplus(a,b,f){ return f(a) + f(b);}return sumplus(1,2,sum);还有一些设定好的高阶数组，例如filter、reduce和map。filterconst persons = [ {"name":"hello"}, {"name":"happy"}, {"name":"enjoyDay"}];c

2021-10-21 10:00:08 80

原创动态规划

题型一：打家劫舍思路：递归：当我们计算如果有n家可以偷的房屋时，我们从最后一家开始看起，偷最后一家后的最大金额考虑是：1.我们偷第n家，这时第n-1家不可以偷，所以最大金额是前n-2家最大的值加上第n家的金额。2.我们不偷第n家，这时第n-1家可以偷，所以最大金额就是前n-1家能偷的最大值。边界条件是：1.一家都没有，返回0。2.有一家能偷，返回此家能偷的钱。3.有两家能偷，返回这两家最大的钱。代码：var rob = function(nums) { function c

2021-10-04 17:07:59 105 2

原创位运算

思路：通过使用异或和同或来判断一些数字的次数等。异或：符号->‘^’1^0 = 10^1 = 10^0 = 01^1 = 0题型一：只出现一次的数字思路：遍历一遍，用一个变量来存储每个成员互相进行异或的结果。出现偶数次的会被置零，最后的结果是只出现了一次的数据。var out = 0; for(let i = 0;i<nums.length;i++){ out ^= nums[i]; } return out;...

2021-10-04 17:05:54 54

原创迭代

概念：迭代是一种重复反馈的方法，为了逼近结果而不断重复循环，每次迭代的结果会作为下一次迭代的初始值进行计算。题型一：合并两个有序链表思路：先设定一个哨兵节点，通过将两个链表的结点一一比较，较小值作为该结点的下一位，重复该过程直到两个链表中出现一个空链表，再将其中一个链表的数值都挂在哨兵节点的后面。var mergeTwoLists = function(l1, l2) { const prehead = new ListNode(-1); let prev = prehead;

2021-10-04 17:04:59 2188

原创 BFS DFS

深度优先搜索（DFS）和广度优先搜索（BFS）DFS：深度优先搜索，优先深度来遍历，获取所需要的数值。针对图和树这样的数据结构。对每一个可能的分支路径深入到不能再深入为止，每个结点只能访问一次。BFS：广度优先搜索，盲目搜寻法，不考虑结点所在的可能位置，彻底搜索这张图，直到找到结点为止。当所有结点被访问，算法终止。题型一：图像渲染BFS：const floodFill = (image, sr, sc, newColor) => { const m = image.length;

2021-10-04 17:03:34 43

原创二叉树

题型一：合并二叉树思路：同时遍历两棵树相同的结点，即使其中一棵树该结点为null，将他们相加后覆盖某棵树的该结点。利用递归表达更清楚。涉及到BFS和DFS算法。var mergeTrees = function(root1, root2) { if(root1 == null)return root2; if(root2 == null)return root1; root1.val += root2.val; root1.left = mergeTrees

2021-10-04 17:02:19 49

原创栈

根据栈的性质：先进后出。我们可以用它来实现一些需要前后比较的情况。题型一：回文链表先把链表遍历一遍，把数据都压入栈。然后再把数据一个个出栈与链表从头开始比较。全部相同则说明是回文链表。...

2021-10-04 17:01:17 66

原创双指针

题型一：有序数组的平方：思路：找到非负数与负数的临界区，平方后前半部分为降序，后半部分为升序。从分界区左右各放置一个指针，向左与向右遍历，依次比较放入新的数组中。某一部分遍历完则将另一部分剩余遍历后放入数组中。var mid; for(let i = 0;i<nums.length;i++){ if(nums[i]<=0) mid = i; else break; }//找出临界值var left = mid;var right = mid+1;var num

2021-09-22 09:40:03 61

原创二分查找

从有序的数组中通过中间值来寻找最佳匹配。例如：nums[2,4,5,6,7]中target为2，则先比较nums[(0+4)/2]与2的大小，若2小于该值则选择其值左边剩下的数组来筛选，大于则右边。大致思路：从数组中找出一个： let left = 1; let right = n;while(left < right){ const mid = Math.floor(left + (right - left)/2);if(nums[mid]>=target) right =

2021-09-22 09:39:03 55

原创 2021-03-07 在一个很不错的网页学习前端基础和进阶知识

https://learn.freecodecamp.one/学到忘了发博客（不是）

2021-03-08 16:45:06 49

原创 2021-03-06 TS的继续学习

继续学习TS1TS的any类型昨天的元组类型的自由版本（雾）let arr : any = ["打击我",123213,false]any类型虽然非常自由，但是会出现TS中无法即时检测的错误，例如：arr[1].split('')这个语法上是错误的，但是它只会在编译后报错2TS中的联合类型function getData(data:string|number):string{ return data.toString()}其中，传进去的形参可以是string类型，也可以是n

2021-03-06 21:34:46 98

原创 2021-03-04 JS部分知识了解

继续学习JS方面的知识：1.引用和操作优先级var a = { x: 1 };var b = a;a = a.x = { x: 1 };console.log(a);//{x:1}console.log(b);//{x:{x:1}}对象是引用类型。其中，b = a 时，将 b指向了a所指向的地址。首先，该地址的属性x变化为{x:1}a被指向另一个地址，其内容为{x:1}b指向地址不变，仍然是原地址，此时该内存地址内容为{x:{x:1}}https://lucifer.ren/fe-

2021-03-06 10:52:56 84 1

原创 2021-03-05 TS的使用

1.初次学习TS的内容TS：TypeScript，个人理解是规范JS代码书写的一种工具。而且目前学下来感觉相当实用TS拥有类型声明，所以比JS要靠谱一些vscode编辑TS的使用如下：手动编译JS：对TS当前目录终端输入： tsc xxx.ts这样会自动进行编译，生成一个js文件其中ts的类型声明会消失，let变量变为var变量自动编译JS：终端输入： tsc --init这样会生成一个配置文件将其中严格模式改为false即不启用严格模式outDir显示一个路径，可以在该文

2021-03-06 10:51:54 136

空空如也

空空如也