- 博客(22)
- 收藏
- 关注
RSS订阅原创 作用域与执行上下文解析
在个人学习的过程中对于上下文、作用域、执行环境这几个概念总是搞混，今天想在这篇博客彻底理清这些概念的具体含义及相互之间的关系。一、作用域几乎所有语言最基本的功能之一就是能够储存变量当中的值，并且能够在之后对这个变量进行访问和修改，事实上正是这种储存和访问变量值的能力将状态带给了程序，那么因此程序语言需要制定制定这样一套规则来存储变量，同时能够方便在日后访问和修改这些变量，这套规则被称为作用域。...
2020-04-17 13:59:19
551
原创 从url输入到页面渲染：渲染流程（二）
在我的博客从url输入到页面渲染：渲染流程（一）中介绍了渲染阶段的第一个步骤：构建DOM树，通过树解析算法解析器将HTML转换成浏览器可以识别的DOM树结构，但是此时我们我们仍然不知道每个DOM节点的正确样式，因此此时需要进入第二步：样式计算。样式计算样式计算的目的是计算出DOM节点中每个元素的具体样式，这个阶段大体上可以分为如下三步：1、CSS文本转换为styleSheets...
2020-04-13 11:02:17
181
原创 从url输入到页面渲染：导航流程
从用户输入url到页面显示的过程涉及到网络协议，web安全、浏览器渲染等等内容，一直是面试官考查的重点，事实上从用户输入url地址到页面渲染的过程主要可以分为两个部分：一是导航，也就是从用户输入url到页面开始解析；二是渲染，也就是浏览器端将获得的JavaScript 、css、html解析并渲染最终展示页面。本篇将主要分析导航流程。一、用户输入用户在地址栏输入时浏览器会判断用户输入是搜索内容...
2020-02-17 21:06:30
419
原创 JavaScript中的对象（三）：基于原型的继承
继承是面向对象语言最为人所津津乐道的一个概念，在传统的基于Class的语言如Java、C++中，继承的本质是扩展一个已有的Class，并生成新的Subclass。由于这类语言严格区分类和实例，继承实际上是类型的扩展。但是，JavaScript其实现继承主要是依靠原型链来实现的。一、原型继承原型继承的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。...
2019-11-30 16:24:20
133
原创 浏览器中的进程与线程
在介绍进程和线程之前，我们需要先了解下什么是并行处理，如果我们理解了并行处理的概念，那么再理解进程与线程之间的的关系会变得轻松很多。并行处理计算机中的并行处理就是同一时刻处理多个任务，比如我们要计算下面三个表达式的值并显示出结果。A = 1+2B = 20/5C = 7*8在编写代码的时候，我们可以把这个过程拆分成四个任务：任务一：计算A = 1+2任务二：计算B = 20/5...
2019-10-27 20:53:54
1090
原创 HTML5表单详解
HTML表单是页面与WEB服务器交互过程中最重要的信息来源，有了它我们才能在Web上进行各种各样的应用,才能和服务器进行方便快捷的交互，其在网页中的作用不可小视，负责获取用户填写数据，并通过浏览器向服务器传送数据。一个表单有三个基本组成部分：表单标签：这里面包含了处理表单的数据所用程序的URL以及数据提交到服务器的方法，表单名等。语法：<form action="服务器程序URL（提交...
2019-10-13 18:29:32
608
原创 JavaScript中数组常用方法汇总（ES5）
向数组添加或删除元素push()、unshift()、pop()、shift()1、Array.prototype.push()在数组的后面添加一到多个元素，并返回数组长度const arr = [1, 2]console.log(arr.push(3)) // 3console.log(arr) // [1, 2, 3]2、Array.prototype.unshift()将一个...
2019-10-01 21:59:46
331
原创 CSS中的流与定位
本篇博客想分享一些个人对于 CSS中的流、元素、定位等一些CSS最基本概念的理解，由于本人能力有限，难免有所误差与偏漏，希望大家能够积极指出，不吝赐教，大家一起共同进步。什么是流页面中的元素默认是如何排列呢？为何有的元素我们没有设置宽度却自动填满一行？种种这些疑问都让我们要去探索页面布局的核心：流。什么是流？在W3C的文档中将CSS的基本定位机制和布局方式称为标准流（或称标准文档流），不过张...
2019-09-22 22:35:03
159
原创 深入JavaScript中的Number类型
在学习《JavaScript高级程序设计》的时候我们都会注意到书中特意强调的在JavaScript中0.1+0.2并不等于0.3这样一个浮点数计算错误的问题，然后今天在看阮一峰老师的《ES6标准入门》中第六章数值的扩展时又产生另一个疑问，为什么JavaScript中整数使用32位二进制表示但是能够准确表达的整数范围却为-253到253之间呢？因此查询了一些相关资料，对于JavaScript中的Nu...
2019-09-22 16:57:03
413
原创 JavaScript中的对象（二）：原型与原型链
在我的博客JavaScript中的对象（一）：面向对象中已经介绍了JavaScript实际上还是一门面向于对象的语言，之所以显得比较“另类”是因为它的面向对象编程范式与其他基于类的主流编程语言如Java、C++等不同：基于原型，但是又因为一些公司政治原因，JavaScript在设计之初就被要求模仿Java，因此基于Brendan Eich又提出了new、this等关键字使之更加接近Java的语言特...
2019-09-08 20:45:37
125
原创 JavaScript中的类型详解
一、JavaScript中的类型JavaScript中的类型可以分为基本数据类型和引用类型两种：基本类型值：指的是保存在栈内存中的简单数据段；引用类型值：指的是那些保存在堆内存中的对象，意思是，变量中保存的实际上只是一个指针，这个指针指向内存堆中实际的值；JavaScript 中的的每一个值都属于某一种数据类型。基本数据类型定义是按值访问，可操作保存在变量中的实际的值。基本类型值指的...
2019-08-28 18:45:54
999
原创 JavaScript中的对象（一）：面向对象
与其他语言相比，JavaScript中的“对象”总是显得不那么合群，首先它不像其他语言那样有类的概念（直到ES6），另外JavaScript中可以给对象中自由地添加属性而其他语言不行，甚至关于JavaScript是一门面向对象还是基于对象的语言也饱受争议，实际上基于对象和面向对象两个形容词都出现在JavaScript标准的各个版本中，在JavaScript标准中关于基于对象的定义如下：语言和宿主的...
2019-08-27 17:25:26
231
原创 CSS Grid网格布局详解
Grid 布局又称网格布局，是W3C提出的一个二维布局系统，它与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。目前为止Grid布局是CSS中最为强大的布局方案。一、基...
2019-08-24 16:06:08
894
原创 BFC：块状格式化上下文
一、什么是BFCBFC的全称是块状格式化上下文，MDN中对于对于BFC的定义如下：一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。个人理解BFC是一块独立渲染区域，这个区域它规定了区域内如何进行布局，并且与区域外部毫无关系，因此区域内部无论如何采用何种布局都不会对区域...
2019-08-13 17:14:33
243
转载 DOM下元素 offset client scroll 相关属性简介
思维导图：一 offset 系列1.1 定位元素定位元素（positioned element）是指该元素计算后位置（position）属性为 relative, absolute,fixed 或 sticky 的一个元素。同时定位属性又细分为以下几种：相对定位元素（relatively positioned element）: 指该元素计算后位置（position）属性为rela...
2019-08-11 21:45:10
194
原创 深入CSS盒模型
一、外在盒子和内在盒子在张鑫旭老师的《CSS世界》中提出每个元素都有两个盒子（注意此处的盒子并不是CSS盒模型，而是对元素结构与内容相关的一种形象说法）：外在盒子和内在盒子（专业名称是“容器盒子”）。外在盒子是决定元素排列方式的盒子，即决定盒子具有块级特性还是内联特性的盒子。外在盒子负责结构布局。内在盒子是决定元素内部一些属性是否生效的盒子。内在盒子负责内容显示。例如 display: inl...
2019-08-10 17:15:39
309
原创 常见元素水平居中的实现及分析
一、水平居中对于内联元素：1、text-align: centertext-align属性规定了元素中文本的水平对齐方式，通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式，因此也可以用来实现内联元素的水平居中。作用元素：文本、行内元素和行内块级元素优点：简单便捷，兼容性好，所有浏览器都支持text-align属性缺点：只能作用于行内元素或行内文本；属性会继承，会对后代元...
2019-08-07 13:11:53
194
原创 CSS Flex 弹性盒布局详解
弹性盒布局又称“flex”布局，是在CSS3中的一种新布局方式，可以简洁、方便、响应式地实现各种页面布局，因此自一提出受到了极大地追捧，目前也得到了各大主流浏览器的支持，因此迅速替代了之前的“display+float+position”的布局形式。一、弹性盒布局简介弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display ...
2019-08-05 17:46:28
1054
原创 CSS中的选择器整理与选择器权重
顾名思义。CSS中选择器的主要作用就是与HTML页面中的元素实现一对一，一对多或者多对一的控制，而在CSS3中又对选择器进行了扩展，极大的提高了查找元素的精度及准确性。本文希望能对CSS中的选择器进行较为深入的归纳和整理，但是由于个人能力有限，文章难免有缺漏甚至错误，希望大家能够帮忙指出，不吝赐教，谢谢大家。CSS选择器主要可以分为普通选择器和高级选择器：一、基本选择器1、通配符选择器（*）...
2019-08-03 16:46:43
822
原创 CSS中的浮动与清除浮动
在CSS中跳出标准文档流的方式有三种：浮动、绝对定位和固定定位，其中绝对定位和固定定位在我的另一篇博客CSS中的定位中有了比较详细的介绍，这篇博客希望能跟大家一起讨论CSS中的浮动。浮动属性最早提出是在CSS1中，其最初的主要目的就是为了允许其他内容（如文本）“围绕”图像，因此浮动属性也只允许作用于图像（有些浏览器还支持表格），后来随着不断发展，浮动属性也允许作用于任何元素，但是文本环绕这一页面...
2019-07-28 14:35:37
535
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人