Part 1 · JavaScript 深度剖析
前端进阶值JS篇
没有什么时间是比现在合适的
欲穷千里目,更上一层楼。
展开
-
1-2-7-代码优化介绍
代码优化介绍如何精准测试 JavaScript 性能本质上就是采集大量的执行样本进行数学统计和分析使用基于Benchmark.js的https://jsperf.com完成Jsperf使用流程使用GitHub 账号登录填写个人信息(非必须)填写详细的测试用例信息(title、slug)填写准备代码(DOM操作时经常使用)填写必要有setup与teardown代码填写测试代码片段慎用全局变量全局变量定义在全局执行上下文,是所有作用域链的顶端全局执行上下文一直存活于上下文执行原创 2020-05-31 21:51:47 · 132 阅读 · 0 评论 -
1-2-6-Performance工具介绍
为什么使用PerformanceGC 的目的是为了实现内存空间的良性循环良性循环的即使是合理使用时刻关注才能确定是否合理Performance 提供多种监控方式通过Performance时刻监控内存的变化Performance 使用步骤打开浏览器输入目标网址进入开发人员工具面板,选择性能开启录制功能,访问具体界面执行用户行为,一段时间后停止录制分析界面中记录的内存信息内存问题的体现页面出现延迟加载或经常性暂停页面持续性出现糟糕的性能页面的性能随时间延长越来越差分析原创 2020-05-31 21:51:17 · 334 阅读 · 0 评论 -
1-2-5-V8引擎
V8 引擎V8 是一款主流的JavaScript执行引擎(Chrome、Nodejs都采用这这个引擎)V8 采用即时编译V8 内存设置上限(64bit不超过1.5G,32bit不超过800M)这个内存上限对于网页应用来说足够,而且垃圾回收的足够快可以提升用户体验。V8 垃圾回收策略在程序的使用过程中,会用到很多的数据,这些数据可以分为原始数据和对象类型的数据,对于基础的原始数据都是由程序的语言自身来控制的,所以这里说的回收主要指的时当前堆里的对象数据,所以这个过程时离不开内存操作的。采用原创 2020-05-31 21:50:33 · 290 阅读 · 0 评论 -
1-2-4-GC算法介绍
GC算法介绍GC定义与作用GC就是垃圾回收机制的简写GC可以找到内存中的垃圾、并释放和回收空间GC里面的垃圾是什么程序不再需要使用的对象// 一// 第一种角度就是看这个变量是否还会被引用// 不再会被引用了就是垃圾function func () { name = 'lg' return `${name} is a coder`}func()// 二// 第二种是看这个变量是否还能被引用到// 引用不到了就是垃圾function func (原创 2020-05-31 21:49:59 · 252 阅读 · 0 评论 -
1-2-3-JavaScript性能优化
JavaScript性能优化内容概要内存管理垃圾回收与常见的GC算法V8引擎的垃圾回收Performance工具优化代码实例JavaScript内存管理内存管理介绍内存:有读写单元组成,表示一片可操作空间管理:人为的去操作一片空间的申请、使用和释放内存管理:开发者主动申请空间、使用空间、释放空间管理流程:申请——使用——释放JavaScript中的内存管理// 内存申请let obj = {}// 使用obj.name = 'xiaodong'// 释放ob原创 2020-05-31 21:49:29 · 131 阅读 · 0 评论 -
1-1-1-ES6+
ES6+什么是ES?什么是JS?ES和JS之间的关系?ECMAScript也是一门脚本语言,简写为ES,通常会把它看为JavaScript的标准化规范,事实上js是ES的扩展语言。ES只是单纯的语言,js是这门语言的扩展,使我们可以在浏览器中操作BOM和DOM;在node中可以去做读写文件的操作。浏览器中的js就是ES+webAPI(即BOM和DOM)。node中的js就是ES+nodeAPI(如fs、net、etc)。ES新特性let与块级作用域、const作用域:函数作用域、全局作用域、块原创 2020-05-28 15:17:40 · 446 阅读 · 0 评论 -
1-1-2-JS异步编程
JS异步编程JS采用单线程模式的原因最早的js就是运行在浏览器端的脚本语言,目的就是为了实现页面的动态交互,实现页面交互的核心就是DOM操作,这就决定了它必须使用单线程模式,否则就会出现很复杂的线程同步问题。为什么呢?假如说js是多线程的,也就是操作DOM编程了多线程并发执行,当一个线程对DOM元素做了修改,而同事的另一个并发线程对同一个DOM元素也做出了修改,最终浏览器是听谁的呢?显然很不合理。单线程决定了在js执行环境中负责执行代码的线程只有一个,如果有多个任务,就只能排队一个任务一个任务的执行原创 2020-05-28 15:21:53 · 217 阅读 · 0 评论 -
1-1-3-typescript-flow
TypeScript解决js自有类型系统的不足,提高代码的可靠性。内容概要强类型与弱类型静态类型与动态类型Javascript自有类型系统的问题Flow静态类型检查方案TypeScript语言规范与基本应用类型系统强类型与弱类型(类型安全)静态类型与动态类型(类型检查)强类型:在语言层面限制函数的实参类型必须与形参类型相同,强类型有更强的数据类型约束,不允许隐式数据类型转换。弱类型:在语言层面不会限制实参的类型,弱类型则基本没有数据类型约束,允许任意的隐式数据类型转换。关于原创 2020-05-28 15:23:18 · 218 阅读 · 0 评论 -
1-1-4-typescript
TypeScriptTypeScript就是JS的超集,在JS的基础上多了一些扩展特性。TypeScript最终会被编译为原始的JS。由于TS最终会被编译成js代码,所以TS本身对于ES6+的语法的兼容性都特别的好,且在任何一个JS运行环境种都能运行。JS + 类型系统 + ES6 = TSAngular就是使用的TS开发的,VUE3.0开始也将使用TS。TS——前端的第二语言。缺点- 语言本身多了很多概念,增加了学习成本。但是TS是渐进式的,即使不会使用也可以用JS的标准语法去编写代码。-..原创 2020-05-28 15:24:01 · 146 阅读 · 0 评论 -
1-2-1-函数式编程
为什么要学习函数式编程函数式编程是随着React的流行受到越来越多的关注Vue 3也开始拥抱函数式编程函数式编程可以抛弃this打包过程中可以更好的利用tree shaking过滤无用代码方便测试,方便并行处理有很多库可以帮助我们进行函数式开发:lodash、undersore、ramda什么是函数式编程函数式编程(Functional Programming,FP),FP是编程范式之一,我们常说的编程范式还有面向对象编程、面向过程编程。面向对象编程的思维方式:把现实世界中的事..原创 2020-05-28 15:25:03 · 298 阅读 · 0 评论 -
1-2-2-函子
函子到目前位置我们已经学习了函数式编程的一些基础,但是我们还没有演示在函数式编程中如何把副作用控制在可控的范围内、异常处理、异步操作等。什么是Functor容器:包含值和值的变形关系(这个变形关系就是函数)函子:是一个特殊的容器,通过一个普通的对象来实现,该对象具有map方法,map方法可以运行一个函数参数对值进行处理(变形关系)// Functor 函子// 函子是一个普通的对象,这个对象里维护一个私有的值,并且对外公布一个map方法。所以可以使用一个类来描述一个函子。class Co原创 2020-05-28 15:26:03 · 315 阅读 · 0 评论
分享