lee弟弟-CSDN博客

原创从 zepto 源码分析之$构造器的实现

下载源码打开看了一下，几百上千行代码，安慰自己别慌，毕竟透出了这么多方法，这代码量已经很少了。$ 的实现：逐层看，途中会有传送门，按照传送门跳转着看，看完切回传送门的位置，这样来回反复横跳着看效果更佳。1⃣️：$ 方法$ = function (selector, context) { return zepto.init(selector, context) }2⃣️：init 方法：完成初始化工作遇到传送门点击可以快速跳转噢zepto.init = function

2021-01-11 23:49:11 153

原创认识浏览器末篇-渲染

在上一步里，浏览器根据 render 树提供的信息对元素进行排版定位它们在页面上的位置，到了最后一步，根据元素样式信息在内存中渲染它的图形，并且把它绘制到对应的位置。渲染在前端范畴的渲染，指的是把模型变成位图的过程。位图就是建立在内存里的一张二维表格，把图片里包含的每个像素对应的内容也就是颜色保存进去。做内存占用优化的时候要重点考虑减少位图信息的存储，因为位图信息是DOM树占据浏览器内存最多的信息。渲染总体来说可以分成：图形\color{#db5a6b}{图形}图形和文字\co

2020-11-27 10:24:29 115

原创认识浏览器第四步-排版

根据对前三步的认识，在构建 render 树的过程，浏览器都是以单个节点为单位产出元素的。在排版的过程很难达到这么独立，很多排版都会有千丝万缕的联系，尤其是 Flex 和 Grid 排版，子元素之间互相关联互相影响。排版方式正常流排版：浏览器基本的排版方案，这种排版方式是由上往下的顺次排布和折行等规则。在正常流的基础上，浏览器还支持元素的两种定位：绝对定位：绝对定位元素由 position 属性控制。绝对定位元素把自身从正常流抽出，直接由 top 和 left 等属性确定自身的位置，

2020-11-27 10:20:30 224

原创认识浏览器第三步构建Render Tree

在构建 DOM 树的时候，里面只有节点的信息没有 css 的信息，浏览器是怎么确定节点的样式的呢？DOM 树的装饰浏览器为了使性能最大化，会尽可能地并行式的处理很多事务，给 DOM 树装饰这件事也一样是跟生成 DOM 树并行的，并不需要等 DOM 树生成。构建 DOM 树的时候就是一个一个节点的处理，浏览器当然可以在一个一个节点挂在到 DOM 树的过程中把节点对应的 CSS 属性计算出来。CSS 属性的计算 css 中的规则：空格、>、+、~、||等，关于选择器的知识在这默认

2020-11-27 10:19:33 164

原创认识浏览器第二步解析代码、构建DOM树

浏览器是怎么解析代码的： HTML 的解构不算复杂，我们日常开发 90% 的“词”（指编译原理的术语 token，表示最小的有意义的单元），种类大约只有标签开始、属性、标签结束、注释、CDATA 节点几种。麻烦主要麻烦在 HTML 跟 SGML 的千丝万缕的联系，解析代码的时候还要兼容 “<?” 和 “<%” ，报错了也不能影响页面的展现。token 是怎么被划分的<p class="myP">xhzy</p>

2020-11-27 10:17:23 231

原创认识浏览器-写在前面

写在前面浏览器的工作就是解析 HTTP 协议然后将内容渲染出来，了解浏览器之前得先做一个简单的过渡，重温一下 HTTP。HTTP超文本传输协议(HTTP)是一种通信协议\color{#db5a6b}{通信协议}通信协议，它允许将超文本标记语言(HTML)文档从web服务器传送到客户端的浏览器。HTTP，它于1990年提出，是一个属于应用层的面向对象的协议\color{#db5a6b}{应用层的面向对象的协议}应用层的面向对象的协议。Web 与 HTTPWEB 是一种基于超文本和 HTT.

2020-11-22 13:38:32 125 2

原创 taobao.com 和 tmall.com 为什么能做到登录互通

目录：登录互通Cookie/Session的跨域共享Cookie/Session的跨域共享的方法存储到数据库服务器服务端同步(依赖 cookie)服务器同步memcache 共享 sessionredis 共享 session总结taobao.com 和 tmall.com 登录互通登录互通当前非常火的单点登录SSO，在多个系统的集群里，用户只需一次登陆，其他系统也会感知到用户登陆，不需要用户重新输入用户名密码登陆。这是外行人的理解，内行人就得看看其中的黑魔法。首先

2020-09-17 18:04:18 1911

原创 TS泛型、模块、命名空间

前景概要在上一篇声明文章里，变量、参数、函数返回值的类型都是在已知的前提下声明的，在真是情景中，也会有我们定义的时候未知其类型的变量或参数，在考虑复用性的情况下泛型给我们提供了强大而灵活的功能，可以支持多种类型的数据。例子我们想写一个函数，它拥有一个参数我们不知道它的类型但是我们希望函数的返回值的类型跟参数的类型一样。方案1: 定义参数跟返回值的类型为 any，但是一旦我们这么做我们就是向类型检查做妥协，放弃了类型检查，并且不一定能够返回与参数同类型的值。方案2: 使用泛型\color{#34a

2020-09-17 18:02:27 235

原创 TS属性、方法、类、接口声明大杂烩

目录基础类型基础类型变量声明其他类型普通方法的声明TS 中的类普通类的声明普通类的继承抽象类和抽象方法TS中的接口属性接口函数类型接口索引接口类型接口基础类型booleannumberstringarraynull 和 undefinedtuple（元组）enum（枚举）\color{#34a853}{enum（枚举）}enum（枚举）any（任意）\color{#34a853}{any（任意）}any（任意）void\color{

2020-09-17 18:01:07 3469

原创 TS初见

Typescript 的介绍网上的资料都说 ts 是 js 的类型的超集，遵循最新的ES6规范，它扩展了js的语法。ts 更像后端面向对象语言，规范类型的定义，可以在便衣阶段发现大部分错误。3.最新的 Vue 和 React 也可以集成TypeScript。4.势头凶猛，谷歌在大力地推广 ts，angular2 以上都基于 ts 的语法。5.ts 是前端未来开发的趋势，很多公司都开始拥抱 ts。安装&&编译想着边学习边敲代码，可是浏览器不能运行ts，所以我们得先编译成ts

2020-09-17 17:59:08 262

lee弟弟的博客