![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
原理
文章平均质量分 82
twinkle||cll
More interest,less interests (多一些兴趣爱好的向往,少一些功名利禄的追求)
展开
-
深入了解现代 Web 浏览器(第 4 部分)【合成器线程详解】
输入进入合成器这是关于 Chrome 内部的 4 部分博客系列的最后一部分;调查它如何处理我们的代码以显示网站。在上一篇文章中,我们查看了渲染过程并了解了合成器。在这篇文章中,我们将看看合成器如何在用户输入输入时实现流畅的交互。从浏览器的角度输入事件当您听到“输入事件”时,您可能只会想到在文本框中键入或鼠标单击,但从浏览器的角度来看,输入意味着来自用户的任何手势。鼠标滚轮滚动是一个输入事件,触摸或鼠标悬停也是一个输入事件。当用户在屏幕上进行触摸...翻译 2021-09-01 15:12:35 · 736 阅读 · 0 评论 -
深入现代浏览器(第三部分)【chrome 渲染器进程的内部工作原理 】
渲染器进程的内部工作原理这是关于浏览器如何工作的 4 部分博客系列的第 3 部分。之前,我们介绍了多进程架构和导航流。在这篇文章中,我们将看看渲染器进程内部发生了什么。渲染器过程涉及 Web 性能的许多方面。由于渲染器进程内部发生了很多事情,这篇文章只是一个概括性的概述。如果您想深入挖掘, Web Fundamentals 的性能部分有更多资源。渲染器进程处理 Web 内容渲染器进程负责选项卡内发生的所有事情。在渲染器进程中,主线程处理...翻译 2021-09-01 14:46:18 · 597 阅读 · 0 评论 -
深入现代浏览器(第二部分)【chrome 浏览器导航】
导航发生了什么这是四篇博客的第二篇, 来看看Chrome内部如何工作的. 在上一篇文章中, 我们了解到不同的进程和线程控制着浏览器的不同部分. 在这篇文章中, 我们会对于每一个线程和进程在渲染网站的时候的通信方式, 挖掘的更深.让我们看一个简单的使用浏览器的案例: 你输入一个URL地址到浏览器中, 然后浏览器从网络上取回数据, 展示到页面上. 这篇文章中, 重点放到: 用户请求一个网站, 浏览器准备渲染页面, 也就是众所周知的导航.通过浏览器进程开始图1: 上面浏览器的界面, 下图表示浏览器进程.翻译 2021-09-01 10:37:45 · 570 阅读 · 0 评论 -
深入现代浏览器(第一部分)【chrome 浏览器架构】
CPU, GPU, 内存, 和多线程架构在这四篇博客系列中, 我们深入到Chrome浏览器内部, 从高级架构到渲染通道的细节, 进行观察. 如果你曾好奇浏览器如何把你的代码变成网站的功能, 或者你不确定为什么建议使用特殊的技术来提高性能, 那这个系列就是为你设计的.作为这个系列的第一部门, 我们将会查看电脑的一些核心感念和Chrome的多线程架构.计算机核心CPU和GPU首先我们要了解浏览器的运行环境, 我们需要理解几个计算机的核心部分, 以及他们都做了什么.CPU图1: 4CPU内核, ..翻译 2021-09-01 09:49:38 · 799 阅读 · 0 评论 -
HTTP/1.0 HTTP/1.1、HTTP/2、HTTP/3 都做了啥
概念http作为一个互联网人都不模式,全称是超⽂本传输协议,也就是HyperText Transfer Protocol。要理解这个概念还是有点东西的,我们把这个名词拆分开来就是以下三个部分:超文本传输协议超文本简单的说是,超过普通文本。但具体一些,咋们说的普通文本一般是值文字组成的文章。但是在网页中,有这么一种文本,可以是文本、图片、音频、视频等组成。但是最关键的是里面还可以有超链接,从一个文本跳转到另外一个文本。html (HyperText mark ...原创 2021-05-30 19:27:43 · 368 阅读 · 4 评论 -
ant-design实现主题暗黑主题 和 亮色主题的 切换(实现网站黑白皮肤)
最近在使用vite+react + ant-design 来搭建个人站点,看到网上好多网站都实现了黑白皮肤的切换,并且ant-design帮我们实现了三套主题色,一个默认亮白色,暗黑主题和紧凑主题。于是我也想来弄一弄。最后还是实现了,打包后也是ok的。效果思路对于网站需要切换主题的话,一般有以下几种办法。使用css覆盖的方式,由于css基于后面的css覆盖前面的原理,所以这一点也是可以的。但是这一点对于使用less和scss的码友来说,貌似不是一个很好的方法由于less里面带有一个les.原创 2021-05-19 11:18:58 · 16480 阅读 · 23 评论 -
Router 原理
概念在说到router的一个概念,我们需要先明白另一个概念, 站点。无论是使用Vue,还是React,开发的单页应用程序,可能只是该站点的一部分(某一个功能块)一个单页应用里,可能会划分为多个页面(几乎完全不同的页面效果)(组件)如果要在单页应用中完成组件的切换,需要实现下面两个功能:根据不同的页面地址,展示不同的组件(核心)完成无刷新的地址切换我们把实现了以上两个功能的插件,称之为路由,Vue 官方提供了一个路由的插件—— vue-routerReact的话,官方提供了一原创 2021-04-15 17:44:50 · 1122 阅读 · 0 评论 -
前端工程化 学习路线图
转载 2021-04-13 08:47:39 · 281 阅读 · 0 评论 -
重温js ——位运算
js 位运算符什么是位运算?位运算是在数字底层(即表示数字的 32 个数位)进行运算的。由于位运算是低级的运算操作,所以速度往往也是最快的(相对其它运算如加减乘除来说),并且借助位运算有时我们还能实现更简单的程序逻辑,缺点是很不直观,许多场合不能够使用。js位运算符总共分为两类:逻辑位运算符:位与(&)、位或(|)、位异或(^)、非位(~)移位运算符:左移(<<)、右移(>>)、无符号右移(>>>)逻辑运算符位与(&): 真真原创 2021-01-11 15:44:11 · 405 阅读 · 0 评论 -
页面加载时,有较长时间的白页,有可能是什么原因造成的
页面加载时,有较长时间的白页,有可能是什么原因造成的?在日常开发中,会发现浏览器白页情况会偶尔出现。这是怎么一回事?我们又该怎么去分析在哪里出现了问题?接下来我们一探究竟。为了更好的发现问题,解决问题,我们将从三个方向来说明白页问题:客户端方向,服务端方向以及网络方向。客户端方向客户端方向1.JavaScript异常?a.在头部加载JavaScript。头部加载JavaScript在解析JavaScript时报错,页面就会停止,所有的内容不会正常的展示出来。导致页面白页。所以要避免出现头部加载原创 2021-01-07 09:26:01 · 1902 阅读 · 0 评论 -
XSRF CRFS(跨站请求伪造,单点登录攻击) 特点和原理
CSRF 特点和原理CSRF:Cross Site Request Forgery,跨站请求伪造概念:跨站请求伪造(英语:Cross-site request forgery),也被称为 one-click attack 或者 session riding,通常缩写为 CSRF 或者 XSRF, 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本(XSS)相比,XSS 利用的是用户对指定网站的信任,CSRF 利用的是网站对用户网页浏览器的信任。本质是:恶意网站把正常用原创 2021-01-06 18:29:47 · 1166 阅读 · 0 评论 -
跨域问题的解决方案 jsonp cros原理
跨域问题的解决方案有常用的两种:1.jsonp2.crosJSONP并不是一个好的跨域解决方案,它至少有着下面两个严重问题:会打乱服务器的消息格式:JSONP要求服务器响应一段JS代码,但在非跨域的情况下,服务器又需要响应一个正常的JSON格式只能完成GET请求:JSONP的原理会要求浏览器端生成一个script元素,而script元素发出的请求只能是get请求jsonp 的代码实现:客户端代码实现:function jsonp(url) { const scr = docu.原创 2020-12-22 10:33:57 · 267 阅读 · 1 评论 -
node 手动实现 EventEmitter 特别简单的思路
class MyEvent { constructor() { // 事件的数组 this.funcArray = []; } /** * 绑定事件 * @param funcName 事件名称 * @param cb 回调函数 */ on(funcName, cb) { this.funcArray.push({[funcName]: cb, funcName: funcName, o原创 2020-12-08 10:26:29 · 161 阅读 · 0 评论 -
webpack与 vite 的不同, vite的速度提升在哪里
vite: https://github.com/vitejs/vite谈谈你对vite的理解,最好对比webpack说明webpack 原理图vite 原理图答案:webpack会先打包,然后启动开发服务器,请求服务器时直接给予打包结果。而vite是直接启动开发服务器,请求哪个模块再对该模块进行实时编译。由于现代浏览器本身就支持ES Module,会自动向依赖的Module发出请求。vite充分利用这一点,将开发环境下的模块文件,就作为浏览器要执行的文件,而不是像webpack那样.原创 2020-11-10 10:19:46 · 7742 阅读 · 3 评论 -
vue2 和 vue3 响应式 代码实现原理
对于做vue的响应式,问自己的内心的几个问题如下:1)怎么做的数据劫持,vue2和 vue3的区别?答: vue2的数据劫持是使用是es5的 Object.defineProperty的setter 和getter方法来对对于数据的读取和设置的, 但是这里有一个最大的缺陷是 需要遍历对象的每一个属性进行setter 和 getter,对于大数据量,或者说是复杂的组件不友好,还有就是对象里面新增属性或者说是删除对象属性做不了数据劫持,所以vue2.0提出了 vue.set和vue.set和 vue原创 2020-11-03 22:09:05 · 950 阅读 · 0 评论 -
es6手动实现promise 和效果和浏览器底层实现的效果一样
/** * 手动实现promise的功能, 只能保证功能相同。用于来更加深刻的理解promise * 为什么这里要用一个立即执行函数,因为这里没有用模块化,所以用立即执行函数,防止定义的名字相同,导致全局污染 * @type {{new(): MyPromise, prototype: MyPromise}} */const MyPromise = (() => { // 定义一些常量 const PENDING = "pending", // 等待状态(未决状态)原创 2020-06-19 15:14:35 · 261 阅读 · 1 评论 -
bootstrap 工具类名总结 适合初学者
// 边框 添加边框 使用类名 border(四周加上边框) border-top border-left border-bottom border-right 去掉边框 使用类名 border-0(删除四周的边框) border-top-0 border-left-0 border-bottom-0 border-right-0 边框颜色 使用类名 在使用border的类名上 在添加 border-primary border-secondary bordde原创 2020-05-24 10:08:04 · 1102 阅读 · 0 评论 -
bootstrap 内容总结
bootstrap 中的css根节点里面生命了许多的变量: 如: :root{ --bule: xxx, --yellow: xxx } 使用方法: 使用的时候使用 样式属性:var(--bule), 使用关键字var 来取出样式的key,就可以使用变量css了 // bootstrap 给所有的元素都变成怪异盒模型, 这样设置宽高不会增加盒子的大小 *,::after,::before{ box-sizi.原创 2020-05-23 11:22:20 · 286 阅读 · 0 评论 -
bootstrap简介 原理
bootstrap简介===========一个响应式的框架(自适应), pc端网站使用下降,移动端使用的网站上升4.3.1 最新版本 3.3.7是一个过渡版本下载3.3.7 版本的一共有3个文件夹: js css fontcss里面有的文件带了.map的后缀,是为了方便打包后调试作用的带了.min名字的是,一个压缩后的文件,比较小下载4.3.1版本就只有js 和css使用方法: header上面需要引用 meta 标签,响应式必备引用jquery在所有js的前面,因为bootstrap是原创 2020-05-18 22:53:21 · 2105 阅读 · 0 评论