<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[qssn的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/dKnightL</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; dKnightL]]></copyright><item><title><![CDATA[执行上下文、作用域到底是什么？二者有什么关系]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/138279222</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/138279222</guid><author>dKnightL</author><pubDate>Sun, 28 Apr 2024 15:07:33 +0800</pubDate><description><![CDATA[执行上下文，其包含定义变量的环境记录和上下文（this），同时也控制着代码对变量的访问规则（这就是作用域），简单点说就是“代码执行的环境所有的 JavaScript 代码在运行时都是在执行上下文中进行的，每创建一个执行上下文，就会将当前执行上下文放到一个栈顶，这就就是我们常说的执行栈。全局执行上下文，进入全局代码的时候，也就是执行全局代码之前。函数执行上下文，函数被调用之前。Eval 执行上下文，eval 函数调用之前。]]></description><category></category></item><item><title><![CDATA[React服务端渲染（SSR）入门及项目搭建]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/125295881</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/125295881</guid><author>dKnightL</author><pubDate>Wed, 15 Jun 2022 14:35:21 +0800</pubDate><description><![CDATA[服务端渲染是什么？我们什么情况下需要使用它？想要了解这些，需要简单聊聊前端渲染的发展史。服务端渲染并不是什么新兴的技术，动态网页技术（、等）其实就是服务端渲染，网页都是由后端获取数据并将其放入到网页模板中，然后返回完整的HTML到浏览器渲染。这样做的渲染方式有明显的缺点，每次数据改变都需要重新再去获取数据并组装新的HTML、网页和后端逻辑耦合等。直到的出现。的出现，使得前后端得以分离。在该模式下，后端依然会返回一个HTML页面，后续通过AJAX来动态获取数据，利用DOM操作动态更新网页内容。......]]></description><category></category></item><item><title><![CDATA[原型和原型链以及对象的封装继承]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/124268870</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/124268870</guid><author>dKnightL</author><pubDate>Tue, 19 Apr 2022 11:12:12 +0800</pubDate><description><![CDATA[代码已经关联到github： 链接地址  文章有更新也会优先在这，觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：

JavaScript是弱对象的语言，但是也有面向对象编程的封装与继承的方法，而原型和他们有密切的联系。
原型和原型链
了解原型和原型链
让我们从一个例子开始：
function Foo(){
}
const f1 = new Foo()
console.log(Foo.prototype===f1.__proto__)//?

这里的prototype和__proto__都是.]]></description><category></category></item><item><title><![CDATA[了解下闭包？]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/124251394</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/124251394</guid><author>dKnightL</author><pubDate>Mon, 18 Apr 2022 16:02:41 +0800</pubDate><description><![CDATA[代码已经关联到github： 链接地址  文章有更新也会优先在这，觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：

定义
一个函数和对其**周围状态（Lexical Environment，词法环境，详细可看《执行上下文、作用域到底是什么？二者有什么关系》）**的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说

闭包让你可以在一个内层函数中访问到其外层函数的作用域。

用途
创建私有变量
闭包让函数以外也可以访问到函数内部的变量，这样可以用来创建私有.]]></description><category></category></item><item><title><![CDATA[执行上下文、作用域到底是什么？二者有什么关系]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/124250981</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/124250981</guid><author>dKnightL</author><pubDate>Mon, 18 Apr 2022 15:59:18 +0800</pubDate><description><![CDATA[代码已经关联到github： 链接地址  文章有更新也会优先在这，觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：

什么是执行上下文
JavaScript在执行代码之前，需要经过一系列的“准备”，这被称为执行上下文，其包含词法环境（Lexical Environment）和上下文（this）。所有的 JavaScript 代码在运行时都是在执行上下文中进行的，每创建一个执行上下文，就会将当前执行上下文放到一个栈顶，这就就是我们常说的执行栈。
执行上下文的创建
何时创建执行上下文
JavaS.]]></description><category></category></item><item><title><![CDATA[了解多进程浏览器]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/123261346</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/123261346</guid><author>dKnightL</author><pubDate>Thu, 03 Mar 2022 19:20:44 +0800</pubDate><description><![CDATA[代码已经关联到github： 链接地址  文章有更新也会优先在这，觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：

什么是进程与线程
进程=火车，线程=车厢，一个进程由一个或多个线程组成。
要想了解进程与线程的话，需要先了解 并行处理 ，并行处理是程序在同一时间处理多个任务，处理一个就是 单线程 ，处理多个就是 多线程 。
而进程则是用来启动和管理线程。

线程在进程下行进，一个进程可以包含多个线程（一辆火车可以有多个车厢）
进程间不会相互影响，进程中的任意一线程执行出错，都会导致整个进程.]]></description><category></category></item><item><title><![CDATA[事件循环（Event loop）]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/123257243</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/123257243</guid><author>dKnightL</author><pubDate>Thu, 03 Mar 2022 16:17:26 +0800</pubDate><description><![CDATA[代码已经关联到github： 链接地址  文章有更新也会优先在这，觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：

浏览器为什么有事件循环
javascript 从诞生之日起就是一门单线程的非阻塞的脚本语言。

单线程：解析和执行 JavaScript 代码的线程只有一个主线程
非阻塞：当我们的 Javascript 代码运行一个异步任务的时候（像 Ajax 从网络读取数据等），主线程会挂起这个任务，然后异步任务返回结果的时候再根据特定的结果去执行相应的回调函数。

也正是javascri.]]></description><category></category></item><item><title><![CDATA[虚拟DOM和DOM Diff]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/122740007</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/122740007</guid><author>dKnightL</author><pubDate>Sat, 29 Jan 2022 10:21:42 +0800</pubDate><description><![CDATA[代码已经关联到github： 链接地址  觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：
虚拟DOM
什么是虚拟DOM
一种编程的概念，与真实DOM节点对应，一个能表示真实DOM的对象。
React下的虚拟DOM
在React属于ReactElement对象，格式如下：
const reactElement = {
  key:null,
  props:{
    className:"",
  	onClick: () =&gt; {},
  	children:[]
  },
  ty]]></description><category></category></item><item><title><![CDATA[React源码调试环境搭建]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/122527498</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/122527498</guid><author>dKnightL</author><pubDate>Sun, 16 Jan 2022 19:48:00 +0800</pubDate><description><![CDATA[做为一个React使用者，肯定也想学习React源码，为了一探究竟，调试当然是必不可少的，因为纸上得来终觉浅，跟着代码跑一遍才是王道，所以就有了这篇文章。
具体的步骤就是分为三步：

克隆 React 项目
用 Create React App 创建一个新的项目react-debug ，并且npm run eject 暴露配置。
用克隆的React 项目替换掉react-debug 中的React包，修改配置和处理报错。

这里并不会介绍具体的步骤，因为不同版本可能要改动的地方不尽相同，直接提供一个开箱即用]]></description><category></category></item><item><title><![CDATA[事件循环（Event loop）]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/122171698</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/122171698</guid><author>dKnightL</author><pubDate>Mon, 27 Dec 2021 14:41:46 +0800</pubDate><description><![CDATA[代码已经关联到github： 链接地址  文章有更新也会优先在这，觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：

浏览器为什么有事件循环
javascript 从诞生之日起就是一门单线程的非阻塞的脚本语言。

单线程：解析和执行 JavaScript 代码的线程只有一个主线程
非阻塞：当我们的 Javascript 代码运行一个异步任务的时候（像 Ajax 从网络读取数据等），主线程会挂起这个任务，然后异步任务返回结果的时候再根据特定的结果去执行相应的回调函数。

也正是javascri.]]></description><category></category></item><item><title><![CDATA[缓存：浏览器缓存、DNS缓存和CDN缓存]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/121862167</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/121862167</guid><author>dKnightL</author><pubDate>Fri, 10 Dec 2021 18:00:05 +0800</pubDate><description><![CDATA[代码已经关联到github： 链接地址  文章有更新也会优先在这，觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：

浏览器缓存
浏览器再次发送请求时：

首先判断强缓存，强缓存生效直接使用强缓存（200 from memory、from disk 先从内存，再从硬盘）
如果强缓存不生效会判断

没有设置协商缓存就直接重新请求(200)
设置了协商缓存则由服务器判断缓存是否失效，没有失效就继续使用缓存（304，同强缓存的获取方式），失效则返回新的文件（200）



缓存分类
强缓存
强缓存.]]></description><category></category></item><item><title><![CDATA[浏览器渲染过程解析]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/121849151</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/121849151</guid><author>dKnightL</author><pubDate>Fri, 10 Dec 2021 09:38:23 +0800</pubDate><description><![CDATA[代码已经关联到github： 链接地址  文章有更新也会优先在这，觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：

概念介绍

DOM Tree：浏览器将HTML解析成树形的数据结构。
CSSOM（CSS Object Model）：页面的所有css样式的对象模型。
Render Tree: DOM Tree和CSSOM合并后生成Render Tree。
layout（布局render树）: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关.]]></description><category></category></item><item><title><![CDATA[你应该知道的http]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/121661233</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/121661233</guid><author>dKnightL</author><pubDate>Wed, 01 Dec 2021 18:08:17 +0800</pubDate><description><![CDATA[代码已经关联到github： 链接地址  觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：

HTTP全称超文本传输协议（HyperText Transfer Protocol），HTTP 是一种能够获取像 HTML、图片等网络资源的通讯协议（protocol）。它是在 web 上进行数据交换的基础，是一种 client-server 协议。
​
HTTP基础特性
1. 简单可拓展协议
组成的部分简单，起始行 + 头部 + 空行 + 实体
HTTP 1.0 出现的 HTTP headers .]]></description><category></category></item><item><title><![CDATA[Win10值得推荐的软件，提升效率和桌面美观]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/121033607</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/121033607</guid><author>dKnightL</author><pubDate>Fri, 29 Oct 2021 14:32:20 +0800</pubDate><description><![CDATA[某乎真强，删后留存
桌面镇楼，最近重装了win10，感觉系统又变得流畅了许多？

因为没有备份，所以软件都重新装了一遍，下面来记录一下Win10下不错的软件吧。
mac的可以查看另一篇文章：MAC值得推荐的软件，提升自己的使用效率和体验 - Snns丶的文章
分为：1.优化类（系统增强、启动器和优化）、2.日常使用（娱乐影音、浏览器和垃圾清理）、3.工具类（如下载、压缩等小工具）、4.美化类、5. 编程类。壁纸我放在文章最后
1.优化类
Dism++
绿色免费实用，整合了win10很多设置比如系统优化空间回]]></description><category></category></item><item><title><![CDATA[CSS in JS之styled-components]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/120825367</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/120825367</guid><author>dKnightL</author><pubDate>Mon, 18 Oct 2021 14:21:39 +0800</pubDate><description><![CDATA[代码已经关联到github： 链接地址  觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：

我们都知道，JSX是JS语法的扩展，增加了对HTML语法的支持，那距离all in js就只差一个CSS语法支持了，目前实现该功能的库比较出名的有60+，感兴趣的可以自己查看：css-in-js。
下面要介绍的就是其中之一的styled-components。
​
简介
styled-components应该可以说CSS-in-JS最热门的一个库了，到目前为止github的star数已经超过了34k.]]></description><category></category></item><item><title><![CDATA[JavaScript中的this指向全解析]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/120393220</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/120393220</guid><author>dKnightL</author><pubDate>Mon, 20 Sep 2021 17:30:54 +0800</pubDate><description><![CDATA[面试常见问题，特地记录一下。
代码已经关联到github： 链接地址  觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：
this
在 JavaScript 中，this 是指当前函数中正在执行的上下文环境，下面从定义的方式和调用的方式上简单聊下其中的this指向问题。
定义的形式
function关键字
通过 function 构造的函数，this是运行时指向，取决于运行时的调用者（作用域）。
var obj = {
  foo: function () {
    //定义时位于全局，之后]]></description><category></category></item><item><title><![CDATA[JS解析url链接和获得get参数的两种方法]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/119829367</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/119829367</guid><author>dKnightL</author><pubDate>Fri, 20 Aug 2021 18:21:57 +0800</pubDate><description><![CDATA[这里使用正则的方式获得具体的参数~
/**
 * 解析url
 * @param {String} url  eg:https://www.baidu.com/s?ie=utf-8&amp;f=8&amp;rsv_bp=1&amp;tn=baidu&amp;wd=js&amp;oq=js
 */
const parseUrl = (url) =&gt; {
  const reg = /(\w+):\/\/([\w\.]+)\:?(\d*)?([\/\.\w]*)?\??([^#]*)?#?(\S*)?/
]]></description><category></category></item><item><title><![CDATA[如何获得iframe内部的body和其他元素]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/118928588</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/118928588</guid><author>dKnightL</author><pubDate>Tue, 20 Jul 2021 10:24:32 +0800</pubDate><description><![CDATA[记录一下如何获得iframe内部的元素~
使用js获得
//先拿到iframe元素，可以使用querySelector或者知道id可用window.frames获得
const iframe = document.querySelector('#iframe-parent-id').firstElementChild || 
window.frames['my-frame-id']

//2.1 获得body
const body = iframe.contentWindow.document.body

]]></description><category></category></item><item><title><![CDATA[webpack打包后运行时文件分析（webpack5）]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/116992651</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/116992651</guid><author>dKnightL</author><pubDate>Tue, 18 May 2021 16:02:39 +0800</pubDate><description><![CDATA[本文基于webpack5，分析打包后的文件，参考了网上的资料，同时加上了个人的理解，欢迎讨论。
代码已经关联到github： 链接地址  觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：
简单打包
文件介绍
//index.js 入口
import { cc } from './Test'
cc()

//Test.js
function cc(){}
export {cc}

运行时分析
webpack执行打包后生成的js文件是一个立即执行函数，其参数modules为一个对象{}，包含我们所]]></description><category></category></item><item><title><![CDATA[虚拟DOM和DOM diff 记录 （增加fiber）]]></title><link>https://blog.youkuaiyun.com/dKnightL/article/details/116992537</link><guid>https://blog.youkuaiyun.com/dKnightL/article/details/116992537</guid><author>dKnightL</author><pubDate>Tue, 18 May 2021 15:59:17 +0800</pubDate><description><![CDATA[面试常见问题，特地记录一下。
代码已经关联到github： 链接地址  觉得不错可以顺手点个star，这里会持续分享自己的开发经验（：
什么是虚拟DOM
与真实DOM对应，一个能表示真实DOM的对象。
react下的虚拟DOM
格式：
const vNode = {
  key:null,
  props:{
  children:[{type:'span'}]
  },
  className:"",
  onClick: () =&gt; {},
  type:'div'
}

代码创建：
使用 Rea]]></description><category></category></item></channel></rss>