weixin_44196299的博客

在个人学习的过程中对于上下文、作用域、执行环境这几个概念总是搞混，今天想在这篇博客彻底理清这些概念的具体含义及相互之间的关系。一、作用域几乎所有语言最基本的功能之一就是能够储存变量当中的值，并且能够在之后对这个变量进行访问和修改，事实上正是这种储存和访问变量值的能力将状态带给了程序，那么因此程序语言需要制定制定这样一套规则来存储变量，同时能够方便在日后访问和修改这些变量，这套规则被称为作用域。...

在我的博客从url输入到页面渲染：渲染流程（一）中介绍了渲染阶段的第一个步骤：构建DOM树，通过树解析算法解析器将HTML转换成浏览器可以识别的DOM树结构，但是此时我们我们仍然不知道每个DOM节点的正确样式，因此此时需要进入第二步：样式计算。样式计算样式计算的目的是计算出DOM节点中每个元素的具体样式，这个阶段大体上可以分为如下三步：1、CSS文本转换为styleSheets...

页面渲染流程对于每个前端来说都是重中之重，

从用户输入url到页面显示的过程涉及到网络协议，web安全、浏览器渲染等等内容，一直是面试官考查的重点，事实上从用户输入url地址到页面渲染的过程主要可以分为两个部分：一是导航，也就是从用户输入url到页面开始解析；二是渲染，也就是浏览器端将获得的JavaScript 、css、html解析并渲染最终展示页面。本篇将主要分析导航流程。一、用户输入用户在地址栏输入时浏览器会判断用户输入是搜索内容...

继承是面向对象语言最为人所津津乐道的一个概念，在传统的基于Class的语言如Java、C++中，继承的本质是扩展一个已有的Class，并生成新的Subclass。由于这类语言严格区分类和实例，继承实际上是类型的扩展。但是，JavaScript其实现继承主要是依靠原型链来实现的。一、原型继承原型继承的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。...

在介绍进程和线程之前，我们需要先了解下什么是并行处理，如果我们理解了并行处理的概念，那么再理解进程与线程之间的的关系会变得轻松很多。并行处理计算机中的并行处理就是同一时刻处理多个任务，比如我们要计算下面三个表达式的值并显示出结果。A = 1+2B = 20/5C = 7*8在编写代码的时候，我们可以把这个过程拆分成四个任务：任务一：计算A = 1+2任务二：计算B = 20/5...

HTML表单是页面与WEB服务器交互过程中最重要的信息来源，有了它我们才能在Web上进行各种各样的应用,才能和服务器进行方便快捷的交互，其在网页中的作用不可小视，负责获取用户填写数据，并通过浏览器向服务器传送数据。一个表单有三个基本组成部分：表单标签：这里面包含了处理表单的数据所用程序的URL以及数据提交到服务器的方法，表单名等。语法：<form action="服务器程序URL（提交...

1、扩展运算符（…）将一个数组转为用逗号分隔的参数序列。（1）函数调用

向数组添加或删除元素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()将一个...

在学习《JavaScript高级程序设计》的时候我们都会注意到书中特意强调的在JavaScript中0.1+0.2并不等于0.3这样一个浮点数计算错误的问题，然后今天在看阮一峰老师的《ES6标准入门》中第六章数值的扩展时又产生另一个疑问，为什么JavaScript中整数使用32位二进制表示但是能够准确表达的整数范围却为-253到253之间呢？因此查询了一些相关资料，对于JavaScript中的Nu...

在我的博客JavaScript中的对象（一）：面向对象中已经介绍了JavaScript实际上还是一门面向于对象的语言，之所以显得比较“另类”是因为它的面向对象编程范式与其他基于类的主流编程语言如Java、C++等不同：基于原型，但是又因为一些公司政治原因，JavaScript在设计之初就被要求模仿Java，因此基于Brendan Eich又提出了new、this等关键字使之更加接近Java的语言特...

一、JavaScript中的类型JavaScript中的类型可以分为基本数据类型和引用类型两种：基本类型值：指的是保存在栈内存中的简单数据段；引用类型值：指的是那些保存在堆内存中的对象，意思是，变量中保存的实际上只是一个指针，这个指针指向内存堆中实际的值；JavaScript 中的的每一个值都属于某一种数据类型。基本数据类型定义是按值访问，可操作保存在变量中的实际的值。基本类型值指的...

与其他语言相比，JavaScript中的“对象”总是显得不那么合群，首先它不像其他语言那样有类的概念（直到ES6），另外JavaScript中可以给对象中自由地添加属性而其他语言不行，甚至关于JavaScript是一门面向对象还是基于对象的语言也饱受争议，实际上基于对象和面向对象两个形容词都出现在JavaScript标准的各个版本中，在JavaScript标准中关于基于对象的定义如下：语言和宿主的...

Grid 布局又称网格布局，是W3C提出的一个二维布局系统，它与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。目前为止Grid布局是CSS中最为强大的布局方案。一、基...

本篇博客想分享一些个人对于 CSS中的流、元素、定位等一些CSS最基本概念的理解，由于本人能力有限，难免有所误差与偏漏，希望大家能够积极指出，不吝赐教，大家一起共同进步。什么是流页面中的元素默认是如何排列呢？为何有的元素我们没有设置宽度却自动填满一行？种种这些疑问都让我们要去探索页面布局的核心：流。什么是流？在W3C的文档中将CSS的基本定位机制和布局方式称为标准流（或称标准文档流），不过张...

一、什么是BFCBFC的全称是块状格式化上下文，MDN中对于对于BFC的定义如下：一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。个人理解BFC是一块独立渲染区域，这个区域它规定了区域内如何进行布局，并且与区域外部毫无关系，因此区域内部无论如何采用何种布局都不会对区域...

思维导图：一 offset 系列1.1 定位元素定位元素（positioned element）是指该元素计算后位置（position）属性为 relative, absolute,fixed 或 sticky 的一个元素。同时定位属性又细分为以下几种：相对定位元素（relatively positioned element）: 指该元素计算后位置（position）属性为rela...

一、外在盒子和内在盒子在张鑫旭老师的《CSS世界》中提出每个元素都有两个盒子（注意此处的盒子并不是CSS盒模型，而是对元素结构与内容相关的一种形象说法）：外在盒子和内在盒子（专业名称是“容器盒子”）。外在盒子是决定元素排列方式的盒子，即决定盒子具有块级特性还是内联特性的盒子。外在盒子负责结构布局。内在盒子是决定元素内部一些属性是否生效的盒子。内在盒子负责内容显示。例如 display: inl...

一、水平居中对于内联元素：1、text-align: centertext-align属性规定了元素中文本的水平对齐方式，通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式，因此也可以用来实现内联元素的水平居中。作用元素：文本、行内元素和行内块级元素优点：简单便捷，兼容性好，所有浏览器都支持text-align属性缺点：只能作用于行内元素或行内文本；属性会继承，会对后代元...