- 博客(80)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 JavaScript 词法作用域&作用域链
<font color=afb4db>作用域是用来规定变量或函数访问其他数据的权限。<font color=50b7c1>静态作用域JavaScript 语言采用的是词法作用域（静态作用域）规则的。</font>这是否与我们常说JavaScript 中的全局作用域，函数作用域，块级作用域有冲突呢？没有冲突！JavaScript 语言采用的是词法作用域，是语言层面的，而全局作用域等是被包含的。
2020-11-28 16:09:34
291
原创 进一步了解JS对象：属性描述符&属性不变形
通过`Object.defineProperties()` 方法可直接在一个对象上定义新的属性或修改现有属性，并返回该对象。`Object.defineProperties()`就是用来为对象设置属性描述符的。从ES5开始，添加了对对象属性描述符的支持。现在JavaScript中支持6种属性描述符:
2020-11-25 15:03:38
285
原创 JavaScript对象内存模型&垃圾回收
JavaScript 基本数据类型的值是存放于栈内存，引用类型分别存储在栈和堆中——栈里面存的就是对象在堆中的地址，而堆里面存的是对象里的数据。
2020-11-24 01:07:02
507
原创 JS获取对象数组特定key对应的值数组
想获取对象数组特定key对应的值数组，发现JS并无相关函数。也可以理解，因为JS中的对象数组的里面的对象可能为null对象，操作此值直接抛异常，咋不这么极端，在正常对象数组的情况下，可以如下实现该功能。当然你也可以遍历处理掉null对象先，或抛异常捕获或直接排出队列。function getMappingValueArrayOfKey(array,keyName){ if(Object.prototype.toString.call(array)=='[object Array]'){ return
2020-11-22 23:01:35
9713
1
原创 JavaScript对象中的可枚举属性和不可枚举属性
在JavaScript中，对象的属性有可枚举和不可枚举之分，它是由对象属性描述符`enumerable`决定的。如果该属性是可枚举性的那么这个属性就能被`for…in`查找遍历到。
2020-11-21 14:51:17
4718
1
原创 原型、原型链和原型继承及简述instanceof运算符
每一个 Javascript 对象(除`null`外)创建的时候，就会关联另一个对象——就是我们所说的原型，<font color=f15a22>每一个对象都会从原型中继承属性。<font color=afb4db> 每个实例对象都有一个私有属性（称之为 `__proto__` ）指向它的构造函数的原型对象（prototype ）。<font color=abc88b>该原型对象也有一个自己的原型对象( `__proto__` ) ，层层向上直到一个对象的原型对象为 `null`。
2020-11-17 01:12:09
279
原创 Javascript中严格模式和正常模式下this的指向
在 Javascript中 `this` 的指向不是固定不变的，它会随着执行环境的改变而改变。但它始终会指向该方法运行时所在的环境（调用函数的那个对象）。函数和方法区别： 方法依赖对象调用，函数不依赖对象。
2020-11-12 21:11:35
1030
原创 JS变量声明·提升·函数提升
在ES6之前，声明变量的关键字只有`var`，作用域只有：<font color=afb4db>全局作用域和函数作用域；</font>到了ES6，引入`let,const`两个关键字声明变量和常量，同时引入新的作用域：<font color=afb4db>块级作用域。</font>ES5 只有两种声明变量的方法：`var`命令和`function`命令。ES6 除了添加`let`和`const`命令，另外两种声明变量的方式：`import`命令和`class`命令。所以ES6 一共有 6 种声明变量的
2020-11-11 20:41:17
518
原创 Javascript八种数据类型&如何判断数据类型？
<font color=afb4db>变量是用于存放数据的容器。</font>其本质是程序在内存中申请的一块用来存放数据的空间。JS中所有的变量的值都是保存在栈内存中的，只不过引用类型存储在栈中的是其在堆中的地址。
2020-11-08 11:53:55
1116
原创 CSS基础知识点快速回忆
CSS的语法CSS的形式CSS选择器CSS 三大特性层叠继承优先级CSS 属性缩写CSS盒子模型contentpaddingbordermargin外边距合并(外边距凹陷)outlineoutline-offsetposition (定位)staticrelativefixedabsolutestickyCSS 浮动clear居中水平居中垂直居中水平垂直居中动画效果transform 2D&3D变形效果transition 过渡效果animati
2020-11-07 15:07:18
259
原创 Ubuntu部署.net项目与React前端项目（前后端分离项目的部署）
在Ubuntu18.04上部署一个前后端分离的项目，前端框架采用的是react全家桶，后端则是.Net Core编写的接口平台。 进入正题之前，个人觉得有必要说明一点：应用的部署，首要工作是给其提供一个可运行环境（如SDK），其次是对其配置文件按需配置(.conf修改)，最后一般是系统为了方便管理该应用的配置（如自启动）。同一应用的不同环境，需配置不同的部署参数，甚至不同的部署方法。比如日常环境通过容器服务部署，而正式环境通过脚本部署。
2020-10-23 13:58:17
1175
1
原创 CSS 层叠与继承
层叠是CSS的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。css 属性的继承分为默认继承的和默认不继承的，但所有属性都可以通过设置 inherit 实现继承。当属性没有指定值时，默认继承的属性取父元素的同属性的计算值（computed value），默认不继承的属性取属性的初始值。
2020-07-09 23:42:02
482
原创 CSS中四个通用属性值
首先需要了解，属性值分为三种，即 css 规范定义的初始值、浏览器厂商重置的用户代理样式和我们开发人员设置的样式，优先级也是按照这个顺序递增。css 为控制继承提供了四个特殊的通用属性值，每个 css 属性都能使用这些值。initialinheritunsetrevertinitialinitial 关键字用于设置 CSS 属性为它的默认值，可作用于任何 CSS 样式。inheritcss 属性的继承分为默认继承的和默认不继承的。默认继承的属性有：所有元素可继承：visibili
2020-07-09 00:46:30
686
原创 ＜a＞中调用JS的方式和性能比对
点击链接后，首先执行的是onclick事件，再执行href，在onclick事件后直接返回false，则不再执行href里的代码。首先说下为什么要推荐使用不发生页面位置变化的方法，若非必要，尽量不要让页面发生滚动，页面滚动需要重新渲染页面帧，消耗性能。
2020-07-06 01:58:20
450
原创 优化关键渲染路径（如何缩短页面首绘时长）
在衡量 Web 页面性能的时候有一个重要的指标叫“FP（First Paint）”，是指从页面加载到首次开始绘制的时长。这个指标直接影响了用户的跳出率，更快的页面响应意味着更多的 PV（Page View）、更高的参与度，以及更高的转化率。
2020-07-04 15:33:20
990
原创 页面的渲染流程、渲染阻塞以及JS Event loop
从输入URL到页面过程页面渲染流程渲染进程里面的线程（浏览器内核）浏览器内核中线程之间的关系阻塞渲染css加载是否会阻塞dom树加载？改变脚本加载次序（defer与asysn）从Event Loop谈JS的运行机制事件循环机制事件循环机制补充说明：（涉及JS引擎线程和事件触发线程）聊一聊定时器事件循环进阶：macrotask与microtask
2020-07-01 22:17:11
1638
2
原创 HTTP知识点收录
搞懂HTTP和HTTPS协议HTTP是一个无状态的协议？你真的了解get和post的区别了吗HTTP状态码HTTP请求头HTTP缓存
2020-06-25 16:34:10
196
原创 浏览器一个Tab对应一个渲染进程？浏览器渲染进程个数究竟与什么有关系（多进程浏览器Chrome为例）
- 父页面的打开的子页面在没有跨域访问的情况下，是会共用父页面的渲染进程的。（more tab one process）- 页面中采用iframe框架引入其他页面，则iframe会独立成辅助框架，有自己的渲染进程。（one tab more process）- 共用渲染进程的数个页面，当顶级的父页面关闭了或者跨域了，则会禅让该渲染进程。- 新建的标签页也会合并为一个渲染进程，仅限不进行搜索查询的时候，这是谷歌刘浏览器的内存优化策略。
2020-06-24 15:33:27
2322
原创 window opener属性知多少？纯html子页面调用父页面方法和属性
window.opener属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用。简单点说，就是从父页面打开一个子页面，子页面是可以读取和修改父页面的信息的（注意：有一定的限制条件）。最近测试发现大有改版，直接通过`<a href='xx.html'>`打开页面无论是否设置`rel ="noreferrer"`或`rel ="noopener"`，得到的`window.opener`属性的值都是`null`。不完全统计，目前有如下几种方式还可以获取到window.opener属
2020-06-23 16:59:02
3172
原创 浅析HTTP缓存
缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。当 web 缓存发现请求的资源已经被存储且未过期，它会拦截请求，返回该资源的拷贝，而不会去源服务器重新下载。
2020-06-23 02:46:48
522
原创 一文了解HTTP请求流程！Web请求时HTTP与TCP/IP协议间的关系
HTTP 协议，正是建立在 TCP 连接基础之上的，属于应用层协议。>HTTP 是一种允许浏览器向服务器获取资源的协议，是 Web 的基础。
2020-06-22 17:12:28
1325
原创 Web 中的 TCP/IP 是如何工作的？一个数据包是如何正确传达到目标主机对应程序中的？
互联网，实际上是一套理念和协议组成的体系架构。其中，协议是一套众所周知的规则和标准，如果各方都同意使用，那么它们之间的通信将变得毫无障碍。了解一下OSI七层模型和TCP/IP协议的关系：TCP/IP是一组协议的代名词，包括许多别的协议，组成了TCP/IP协议簇。TCP/IP是基于TCP和IP这两个最初的协议之上的不同通信协议大的的集合。TCP/IP四层模型 则是合并数据链路层以及物理层为网络接口层。一个数据包的旅程互联网中的数据是通过数据包来传输的。如果发送的数据很大，那么该数据就会被拆分为很
2020-06-22 02:41:37
1310
1
原创 重排、重绘、合成以及如何优化（基于Chrome）
重排又称重构、回流,当我们通过JavaScript或者CSS修改了元素的几何位置属性，例如改变元素的宽度、高度等，那么浏览器会触发重新布局，解析之后的一系列子阶段。repaint是在一个元素的外观被改变，但没有改变布局的情况下发生的，如改变了visibility、outline、background等。当repaint发生时，浏览器会验证DOM树上所有其他节点的visibility属性。
2020-06-21 21:58:18
1670
1
原创 层叠上下文 渲染图层 复合图层（硬件加速）区别与联系
拥有层叠上下文属性的元素会生成一个新的层叠上下文对象，每个层叠上下文对象都是一个渲染图层，</font>渲染图层与复合图层是不同的概念，<font color=oran>渲染图层更像是一个纯二维的概念，无论其怎么层叠覆盖最终都归依于根层叠上下文。而复合图层则完全脱离根层叠上下文，相当于开辟新的位面。
2020-06-21 15:53:30
4926
原创 电脑显示屏是怎么显示出图像的？CPU与GPU又是什么关系？
在计算机的世界，所有的数据都只是0或1。电脑中只有两个是真正的运算硬件，一个是CPU，另外一个就是GPU（图像处理芯片，显卡的核心）。显卡接在电脑主板上，主要是将电脑的数字信号转换成模拟信号让显示器显示出来，同时显卡还有图像处理能力，可协助CPU工作，提高整体的运行速度。
2020-06-21 00:26:16
12057
6
原创 浏览器导航过程发生了什么？(Chrome)
当你在浏览器中字符，按下Enter键后，浏览器是怎么渲染出一个新的页面的呢？期间都经历了什么.简单记忆一次导航过程：- DNS 查询- TCP 连接- HTTP 请求即响应- 服务器响应- 客户端渲染
2020-06-13 17:25:48
908
原创 剖析浏览器中的进程与线程
- 进程是cpu资源分配的最小单位，也是独立运行的最小单位（一个进程就是一个程序的运行实例）- 线程是cpu调度的最小单位（线程是不能单独存在的，它是由进程来启动和管理的，一个进程中可以有多个线程，进程内的线程共享进程全部资源）
2020-06-07 22:22:44
1074
原创 浏览器的组成部分有什么？ 主流浏览器的内核与JS引擎的种类
浏览器主要由SHELL和内核两部分组成，其中内核又分为渲染引擎和JS引擎。SHELL就是浏览器的用户界面，渲染引擎主要用于获取网页结构、添加CSS样式、计算网页结构等；JS引擎用于解析JavaScript语言，为网页添加动态效果。
2020-06-07 22:20:06
2376
原创 平面图定位并在图上设置标识(不需要特别精确)
背景：某一图片中，不需要特别精确，在某些位置动态设置标识实现思路：将图片拉满表格作为背景 分块 并为每个td绑定id 在需要设置表
2020-06-05 09:13:24
1361
原创 你真的了解HTML DOM 了吗？
Document Object Model（DOM，文档对象模型）是W3C（World Wide Web Consortium，万维网联盟）的标准，定义了访问HTML和XML文档的标准方法：W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。简单来说，就是用于连接document和JavaScript的桥梁。
2020-06-05 09:11:29
300
原创 HTML中点击图片不同区域触发不同事件 图片定位
在一张图片上，点击不同部分区域触发不同事件。其实就是根据一张已知像素大小的图片，以其左上角作为远点坐标，建立一个右下方向为正轴的二维坐标系。然后建立矩形，圆形等区域并绑定href属性或者其他js事件即可。
2020-06-05 09:06:39
15395
2
原创 了解一下块级元素和内联元素
块级元素是指单独撑满一行的元素，如`div、ul、li、table、p、h1`等元素。这些元素的display值默认是`block、table、list-item`等。内联元素又叫行内元素，不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构，如`span、a、em、i、img、td、button`等。这些元素的display值默认是`inline、inline-block、inline-table、table-cell`等。
2020-06-05 09:05:40
1940
原创 前端js代码调试
前端代码调试：多种方式调试JS只做一个简单的Js调试案例，工具准备：1.WebStorm（等任意编辑器都可以） 2.Google Chrome第一步：创建一个HTML，写入js脚本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS DEBUG</title></head><body><
2020-06-05 09:03:41
1340
原创 了解一下HTML和H5
什么是 HTML5？有何特性？HTML5 是最新的 HTML 标准，也是HTML的第五个版本HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。HTML5 拥有新的语义、图形以及多媒体元素。HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。HTML5 拥有本地缓存特性为什么要设计 HTML5？提升用户体验（丰富性 运行新性能 方便使用.
2020-06-05 09:02:14
412
原创 HTML文档流、文本流和脱离文档流
在文档流中，HTML 元素会按照其在 HTML文档中的位置顺序来排布,将窗体自上而下分成一行一行,并在每行中左至右的挨次排放行内元素，遇到阻碍或者宽度不够自动换行。而块状元素将独占一行。
2020-06-05 08:59:06
1180
原创 localStorage与sessionStorage解读
Web Storage 是HTML 5引入的一个重要的功能，在前端开发的过程中会经常用到，它可以在客户端本地存储数据，类似cookie，但其功能却比cookie强大的多。cookie的大小只有4Kb左右（浏览器不同，大小也不同），而web Storage的大小有5MB。LocalStorage与SessionStorage是Web Storage 的两种形式。
2020-06-05 08:53:10
742
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人