阿汤哥的鼎

浏览器的渲染过程

1

# 浏览器的渲染过程 > 通常，我们只需要编写HTML，CSS，JavaScript，浏览器上就能呈现出漂亮的网页了，但是浏览器是如何使用我们的代码在屏幕上渲染像素的呢？ ### 首先，请先看一张大图 浏览器将HTML，CSS，JavaScript代码转换成屏幕上所能呈现的实际像素，这期间所经历的一系列步骤，叫做关键渲染路径（Critical Rendering Path）。其中包含： - 构建对象模型（DOM，CSSOM） - 构建渲染树（RenderTree） - 布局 - 渲染 在构建对象模型到构建渲染树的这一过程，还穿插着JS脚本的加载和执行。如下图所示：  ### 1.DOMTree的构建 浏览器的渲染从解析HTML文档开始，宏观上，可以分为下面几个步骤：  - 第一步（解析）：从网络或者磁盘下读取的HTML原始字节码，通过设置的charset编码，转换成相字符  - 第二步（token化）：通过词法分析器，将字符串解析成Token，Token中会标注出当前的Token是`开始标签`，还是`结束标签`，或者`文本标签`等。  -...

#### 动态规划 ```js 题目 1+1+1+1+1+1 A：上面的等式值是多少呀 B：(奋笔疾书计算)...等于6 A：那在上面的等式前面再写上"1+"呢？1+1+1+1+1+1+1，现在等于多少呀 B：(迅速作答)等于7 A：这次你为什么这么快就算出来了呀？ B：因为这次只要在6的基础上再加1就可以了，不需要再重新计算一遍了 ``` 动态规划的核心就是：**记住已经解决过的子问题的解。those who cannot remember the past are condemned to repeat it** ##### 题目一：斐波拉契数列 fibonacci(0) = 0 fibonacci(1) =...

### 项目背景 redskull2: 0.0.49版本 ### 触发条件 修改js代码热加载时，报下面的错误自动退出 ``` [43697:0x103800600] 342449 ms: Mark-sweep 1365.6 (1403.2) -> 1365.4 (1402.7) MB, 344.7 / 0.0 ms (average mu = 0.781, current mu = 0.000)...

# 浏览器的垃圾回收机制 ------ ### 1. 为什么要了解垃圾回收机制 - 内存泄露：是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束 - 堆栈溢出与内存泄露 ``` let a = ()=>{ b() } let b = () => { a() } a() Error: Uncaught RangeError: Maximum...

# 上传文件 `js` `html` > 每次用原生写文件上传都要重新查一遍资料，这次写完总结一下吧 ### html css ``` //将input调成透明（opacity: 0），移到一个不重要的位置上去 上传< /label> ``` ### js ajax ``` //触发input的onchange事件 //ajax let data = new FormData() data.append('file',$('#upload')[0].files[0]) $.ajax({ url:'upload', type:'POST',...

# Service Workers `js` ### 简介 service是一个注册在一个指定源和路径下，由事件驱动[web worker][1] ，通过注册的js文件控制相关联的页面，拦截或修改访问和资源请求。赋予你很大很大的权限去控制你的app在某一个状态下的表现（最常使用在离线的情况下） 由于servive worker是web workers类型中的一种，同样也运行在一个worker上下文环境中，因此web worker有的特性他都会有：比如不能访问dom，运行在一个单独线程下而不会阻塞主线程，完全异步的设计致使同步的xhr和localStorage都不能被使用（但是可以使用IndexedDB） 出于安全考虑，service workers只能在https下运行，因为其逆天的可以伪造，过滤，修改网络请求的功能如果有人在中间恶意攻击情况会非常糟糕，在火狐浏览器中，service worker会不能使用如果用户打开了用户隐私模式。而service workers之所以优于以前的同类尝试（如AppCache），是因为它们无法支持当操作出错时终止操作。Service workers可以更细致地控制每一件事情。 ### 生命周期 service workers拥有一个完全独立与web页面的生命周期 * Registration 注册 （准备） service worker首次进入页面时会调用[ServiceWorkerContainer.register()][2]方法注册。如果注册成功，service worker就会被下载到客户端并尝试之后的安装和激活，作用于整个域内用户可访问的URL，或者其特定子集。 *...

# Web Workers --- > 12月20号发布的Safri浏览器内核webkit表示自己开始支持service workers，这就意味的主流浏览器（window下的chorme和Firefox，ios下的Safri，ie.....嗯，先不管他）都支持service workers，web app离线缓存页面将不是梦~ > Service workers 其实是web workers中的一种类型，所以在学习使用service workers之前，我们先来看看web workers是啥，有哪些类型，都能干些什么吧 ### 整体介绍： **Web Workers**使script能够单独地运行在一个独立的线程中，这意味着我们可以将一些有复杂的逻辑计算的js放在其他线程下工作，而不去阻塞主线程（一般是ui渲染）的运行 ### 概念和使用： worker是通过构造函数【Worker(filterName.js) 】生出来的Object，这个js文件里写的代码会单独运行在一个新的执行环境（context）中而不是当前的window，这个工作环境其实是一个[DedicatedWorkerGlobalScope][1]对象，*（对于dedicated类型的worker是他，对于shared类型的worker是[SharedWorkerGlobalScope][2])*. 理论上在这个worker线程下你想干啥就干啥，但是还是有一些例外，比如，你没有办法在worker中直接操作dom，也没办法使用window对象一些默认的方法和属性，不过呢，window下还是有很多功能你可以直接使用的，像webSockets，一些存储工具indexedDB啊，还有一个火狐浏览器搞的Data Store啊~，具体请参考 [Functions and classes available...

# 关于元素到窗口距离的一些整理 ------ 在做懒加载和一些高度改变的动画时，我们需要知道元素在窗口中的位置，下面是这次整理的一些元素偏移量介绍  ### 1. 浏览器的一些属性 - screen.height/width，屏幕的高/宽，与显示器的分辨率有关 - screen.availHeight/availWidth，屏幕有效区域的高/宽，相比较height/width少去了菜单栏的所占位 - scrollY/pageYOffset，浏览器垂直滚动条滚动的距离，随着滚动条位置的不同而改变 - dom.scrollTo(x,y)，修改浏览器的滚动位置 > screen值获取到的是整个屏幕的宽高,并不会随着浏览器窗口缩放而改变 ### 2. offsetParent（定位父级） 在理解偏移大小之前，首先要理解offsetParent。人们并没有把offsetParent翻译为偏移父级，而是翻译成定位父级，很大原因是offsetParent与定位有关。定位父级offsetParent的定义是：**与当前元素最近的经过定位(position不等于static)的父级元素。**主要分为下列几种情况： - 元素自身有fixed定位，offsetParent的结果为null。当元素自身有fixed固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent的结果为null - 元素自身无fixed定位，且父级元素都未经过定位，offsetParent的结果为``。 - 元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素 - ``元素的parentNode是null...

# 使用Visual Studio Code对Node.js进行断点调试 `node` `vscode` ### 进入vscode，前往虫子的那个页面  ### 点击调试旁边的那个下拉框，选择“添加配置”  ### 选择Node.js:启动程序  之后，项目的根目录会生成一个.vscode的目录，这个目录中存放了各种各样的VScode编译器的配置。现在这个文件夹下面就放了一个叫launch.json的文件，是我们debug的配置入口。  - 现在 launch.json已经自动为我们生成了一些配置项字段，具体的配置项字段可以参考https://go.microsoft.com/fwlink/?linkid=830387 的解释。 - 其中比较重要的是**program**字段，这个字段定义了整个调试器的入口，开启调试器的时候会从这个入口启动程序。 - 一般生成 lanch.json的时候这个字段已经有值了，这是因为VScode在初始化launch.json的时候会查看项目的**package.json**中是否有包含键名为**start**的scripts，如果有的话，就会把start配置的内容作为program字段的值。 - 我这个项目是通过 dev 命令来启动服务的，将dev后面的内容修改到...