重学前端
关注
分享
扫一扫
文章平均质量分 51
重学前端，搭建知识体系。
_wayliu
这个作者很懒，什么都没留下…
展开
-
23浏览器CSSOM:如何获取一个元素的准确位置
1.CSSOM 2.CSSOM View 1.CSSOM CSSOM是CSS的对象模型，再w3c标准中包含两个部分： 描述样式表和规则等css的模型部分（CSSOM） 跟元素视图相关的 View 部分（CSSOM View） 1-1 获取文档中所有的样式表 document.stylesheets 1-2 修改样式表中内容 document.styleSheets[0].insertRule("p { color:pink; }", 0) document.styleSheets[0].remove原创 2021-03-09 22:55:24 · 222 阅读 · 0 评论 -
22浏览器：一个浏览器是如何工作的（阶段四）
经过构建 DOM 树和计算 css 属性这两个步骤，接下来浏览器的工作就是确定每一个元素的位置，所以浏览器会根据算法进行排版，如正常流文字排版、正常流中的盒、绝对定位元素、浮动元素排版这几种情况。 ...原创 2021-03-09 22:13:55 · 85 阅读 · 0 评论 -
21浏览器：一个浏览器是如何工作的（阶段三）
1.阶段三 2.整体过程 1.阶段三 浏览器是如何把css规则应用到节点上，并给这棵朴素的DOM树添加上css属性的。 2.整体过程 2-1 选择器的各种符号 空格: 后代，选中它的子节点和所有子节点的后代节点。 >: 子代，选中它的子节点。 +：直接后继选择器，选中它的下一个相邻节点。 ~：后继，选中它之后所有的相邻节点。 ||：列，选中表格中的一列。 后代选择器”空格“ a#b .cls { width: 100px; } 再上面的例子中，我们找到了匹配的a#b 的元素时，我们才会开始检查原创 2021-03-09 22:03:12 · 81 阅读 · 0 评论 -
20浏览器：一个浏览器是如何工作的？（阶段二）
1.阶段二的两个过程 2.解析代码 3.构建 DOM 树 1.阶段二的两个过程 如何解析请求回来的 HTML 代码 如何构建 DOM 树 2.解析代码 HTML的结构不算太复杂，日常开发所需要的”词“(指编译原理的术语 token，表示最小的有意义单元)，种类大约只用标签开始、属性、标签结束、注释、CDATA节点几种。 2-1 词（token）是如何被拆分的？ <p class="a"> text text text</p> 把这段代码拆分为词： <p“标签开始”的开原创 2021-03-09 21:29:11 · 103 阅读 · 0 评论 -
19浏览器：一个浏览器是如何工作的（阶段一）
1.浏览器的工作过程 2.HTTP 协议 1.浏览器的工作过程 对浏览器的实现者来说，他们做的事情，就是把一个URL变成一个屏幕上显示的网页。 这个过程是这样的： 浏览器首先使用HTTP协议或者HTTPS协议，向服务器端请求页面。 把请求回来的HTML代码经过解析，构建成DOM树。 计算DOM树上的css属性。 根据css属性对元素逐个进行渲染，得到内存中的位图。 一个可选的步骤是对位图进行合成，这会极大地增加后续绘制的速度。 合成之后，再绘制到界面上。 2.HTTP 协议 具体请看《图解HTTP》原创 2021-03-09 20:36:29 · 214 阅读 · 0 评论 -
18css渲染——css如何绘制颜色？
1.RGB 颜色 2.渐变 1.RGB颜色 它符合光谱三原色理论：红、绿、蓝三种颜色的光可以构成所有的颜色。 在RGB表示法中，三色数值最大的是白色rgb(256，256，256[,透明度])；三色数值为0表示黑色rgb(0,0,0,[,透明度]) 2.渐变 在css中，background-image这样的属性，可以设为渐变。有两种渐变： 线性渐变 放射性渐变 2-1 线型渐变 linear-gradient(direction, color-stop1, color-stop2, ...); di原创 2021-03-09 19:08:59 · 104 阅读 · 0 评论 -
17HTML替换型元素：为何link一个css要用href，而引入js要用src？
1.两种引入文件的方案 2.script 3.img和picture 4.video 和 audio 1.两种引入文件的方案 链接：使用href引用文件。 替换型元素：把文件的内容引入，替换掉自身位置的一类标签，用src引用文件。 2.script script标签是为数不多的既可以作为替换型标签，又可以不作为替换型标签的元素。 <script type="text/javascript"> console.log("Hello world!"); </script> <原创 2021-03-09 12:00:14 · 257 阅读 · 0 评论 -
16css排版——正常流
1.正常流的行为 2.正常流的原理 1.正常流的行为 一句话描述正常流的排版行为：依次排列，排不了换行。 2.正常流的原理 2-1 格式化上下文 在css标准中，规定了如何排布每一个文字或者盒的算法，这个算法依赖一个排版的”当前状态“，css把这个当前状态称为”格式化上下文“。 我们需要排版的盒，分为块级盒和行内级盒，所以排版需要分别为它们规定了块级格式化上下文和行内级格式化上下文。 一些元素会在其内部创建新的块级格式化上下文： 浮动元素 绝对定位元素 非块级但仍任能包含块级元素的容器（如inline-b原创 2021-03-09 11:26:32 · 521 阅读 · 0 评论 -
15HTML链接
1.链接 2.link 标签 1.链接 链接是html的一种机制，它是html文档和其它文档或者资源连接关系。 链接有两种类型： 超链接型标签 外部资源链接 链接标签有三种： a标签 area标签 link标签 2.link 标签 超链接型link标签：一些link标签会生成超链接，这些超链接又不会像a标签那样显示在网页中。 外部资源型link标签：一些link标签会把外部资源链接到文档中，会实际下载这些资源并作出一些处理，如用link标签引入样式表。<link rel="styleshe原创 2021-03-09 10:49:49 · 115 阅读 · 0 评论 -
14HTML元信息类标签——head里面能写哪几种标签？
1.元信息类标签 2.逐一介绍元信息标签 1.元信息类标签 所谓元信息类标签，就是HTML用于描述文档自身的一类标签，它们通常出现在head标签中，一般都不会在页面被显示出来（与此相对，其它标签，如语义类标签，描述的是业务）。 2.逐一介绍元信息标签 2-1 head 标签 本身不携带任何信息，而是作为盛放其它语义类标签。 必须包含一个title。 2-2 title标签 表示文档的标题。 2-3 base 标签 是一个历史遗留标签，作用是给页面上所有的URL相对地址提供一个基础。 2-4 meta标签原创 2021-03-08 23:53:47 · 410 阅读 · 0 评论 -
13css语法——带@的规则
1.css语法的总体结构 2.at 规则 1.css语法的总体结构 由两种规则列表构成： at 规则 普通规则 2.at 规则 2-1 @charset @charset用于提示css文件使用的字符编码方式，使用时必须放在最前面。 @charset "utf-8" 2-2 @import @import用于引入一个css文件，除了@charset规则不会引入，可以引入另一个文件的全部内容。 @import "mystyle.css"; @import url("mystyle.css"); 2-3原创 2021-03-08 22:45:14 · 138 阅读 · 0 评论 -
12HTML语义——语义类标签
1.语义类标签的好处 2.正确使用整体结构类语义标签 1.语义类标签的好处 对开发者友好，使用语义类标签增强了可读性，即使在没有css的时候，开发者也能清晰看出网页结构。 语义类标签适宜机器阅读，表现力丰富，适合搜索引擎检索（SEO）。 2.正确使用整体结构类语义标签 <body> <header> <nav> …… </nav> </header> <asi原创 2021-03-08 22:20:22 · 116 阅读 · 0 评论 -
11JavaScript语法——JavaScript语句
1.两种JavaScript语句 2.普通语句 3.声明型语句 1.两种JavaScript语句 普通语句 声明型语句 2.普通语句 2-1 switch语句 switch(num) { case 1: print(1); case 2: print 2; case 3: print 3; } 2-2 for in 循环 for in 循环枚举对象的属性，体现了属性的enumerable特征。 let o = { a: 10, b: 20} Object.defineProp原创 2021-03-08 21:32:19 · 421 阅读 · 0 评论 -
10JavaScript语法——基本规则
1.脚本和模块 2.import 声明 3.export 声明 4.函数体 5.预处理和指令序言 1.脚本和模块 在ES6引入了模块机制后，JavaScript有两种源文件，一种叫脚本，另一种叫模块。 1-1 区别 概念上区别 脚本是具有主动性的JavaScript代码段，是控制宿主完成一定任务的代码。 模块是被动性的JavaScript代码段，是等待被调用的库。 引入执行区别 脚本可由浏览器或者node环境引入执行。 模块只能由JavaScript代码用import引入执行。 现代浏览器可以支持sc原创 2021-03-08 21:02:42 · 257 阅读 · 0 评论 -
09JavaScript词法
1.JavaScript词法定义 1.JavaScript词法定义 WhiteSpace 空白字符 LineTerminator 换行符 Comment 注释 Token 1.IndetifierName 标识符名称，如变量名和关键字。 2.Punctuator 符号，即运算符和大阔号等符号。 3.NumericLiteral 数字直接量，即数字。 4.StringLiteral 字符串直接量，即单引号或双引号引起来的直接量。 5.Template 字符串模板，即反引号 ` 括起来的直接量。 ...原创 2021-03-08 18:01:50 · 66 阅读 · 0 评论 -
08JavaScript执行——try里面放return，finally还会执行吗？
function foo(){ try{ return 0; } catch(err) { } finally { console.log("a") } } console.log(foo()); 通过实际实验，我们可以看到，finally确实执行了，而且return语句也生效了，foo()返回了结果0。 function foo(){ try{ return 0; } catch(err) { } finally { return 1;原创 2021-03-08 16:08:53 · 179 阅读 · 0 评论 -
07JavaScript执行：闭包和执行上下文
1.自由变量、执行上下文、作用域、作用域链、this 2.闭包 1.自由变量、执行上下文、作用域、作用域链、this 1-1作用域 作用域：代表了一个变量或者说某个变量的合法使用范围。 全局作用域（直接写一个变量没有受到什么函数约束，在全局都可以使用，如window、document对象） 函数作用域（在一个函数中定义的变量，只能在函数里使用） 块级作用域（ES6新增） 1-2 自由变量 一个变量在当前作用域中没有定义，但被使用了 向上级作用域，一层一层依次寻找，直至找到为止 如果到全局作用域都没找原创 2021-03-08 14:51:46 · 182 阅读 · 0 评论 -
06JavaScript执行：Promise里的代码为什么比setTimeout先执行？
1.JavaScript的执行 2.宏任务与微任务 3.Promise 4.新特性：async/await 1.JavaScript的执行 首先形成一个感性的认知：一个JavaScript引擎会常驻于内存中，它等待我们（宿主）把JavaScript代码或者函数传递给它执行。 在ES3及前，宿主环境传递给JavaScript引擎一段代码，引擎只需要顺序执行，这个任务是宿主发起的任务。 在ES5后，JavaScript引入Promise，不需要浏览器的安排，JavaScript引擎本身也可以发起任务。 宏任原创 2021-03-07 23:35:48 · 83 阅读 · 0 评论 -
05JavaScript对象——全部对象分类
1.JavaScript 中的对象分类 2.内置对象——原生对象 1.JavaScript 中的对象分类 宿主对象：由JavaScript宿主环境提供的对象，它们的行为完全由宿主环境决定(window)。 内置对象： 1.固有对象：随着JavaScript运行时创建而自动创建的对象实例。 2.原生对象：可以由用户通过Array、RegExp等内置构造函数或者特殊语法创建的对象。 3.普通对象：由{}语法、Object构造器或者class关键字定义类创建的对象，能够被原型链继承。 2.内置对象——原生对象原创 2021-03-07 22:21:20 · 178 阅读 · 0 评论 -
04JavaScript对象-我们真的需要模拟类吗？
1.类与JavaScript 2.什么是原型 3.JavaScript的原型 4.ES6 中的类 1.类与JavaScript JavaScript本身就是面向对象的，它并不需要模拟，只是它实现面向对象的方式（基于原型）和主流（基于类）不一样，所以时很多人产生了误会。 ”基于类“并非面向对象的唯一形态，Brendan当年选择的原型系统，就是一个非常优秀的抽象对象的形式。 2.什么是原型 2.1 基于类 ”基于类“的编程提倡使用一个关注分类和类之间的关系开发模型。在这类语言中，总是先有类，再从类去实例化一个对原创 2021-03-07 21:48:36 · 66 阅读 · 0 评论 -
03JavaScript对象——面向对象
1.关于对象的两个疑惑 2.面向对象与JavaScript对象 1.关于对象的两个疑惑 为什么JavaScript（直到ES6）有对象的概念，但是没有类的概念？ 为什么再JavaScript对象里可以自由地添加属性，而其他语言却不可以？ 2.面向对象与JavaScript对象 面向对象 Object(对象)再英文中是一切事物的总称，但是中文中是一个专业名词。 在不同的编程语言中，设计者也利用了各种不同的语言特性来描述对象，最为成功的是使用“类”的方式描述对象，如Java、c++，而JavaScript选原创 2021-03-07 20:17:40 · 69 阅读 · 0 评论 -
02JavaScript类型
1.从运行时角度看JavaScript类型 1.从运行时角度看JavaScript类型 运行时类型是代码实际执行过程种我们用到的类型。所有的类型数据都会属于7个类型之一。从变量、参数、返回值到表达式中间结果，任何JavaScript代码运行过程中产生的数据，都具有运行时类型。 Undefined Null Boolean String Number Symbol Object Undefined表示未定义，它的类型是一个值即undefined。 Null表示空值，它的类型只有一个值即null，表示“定义原创 2021-03-07 12:40:12 · 71 阅读 · 0 评论 -
01 前端知识架构
1.前端基础知识 2.JavaScript 3.html和css 4.浏览器的实现原理和api 5.前端工程实践 6.总结 1.前端基础知识 JavaScript语言 css和html 浏览器的实现原理和api 2.JavaScript 用一定的词法与语法，表达一定语义，从而操作运行时。 3.html和css HTML 文档元信息：head里面的，如title、meta、link、base等。 语义相关内容：新增语义化标签： 链接：提供到文档内和文档外的链接。 替换型标签：如img、video、原创 2021-03-06 23:19:51 · 77 阅读 · 1 评论