前端学习笔记
关注
分享
扫一扫
文章平均质量分 82
一些比较系统化学习的学习笔记
JIZQAQ
现PM/BA，不断学习的路上。
前全栈工程师web（vue、react）、app（flutter、h5）、微信小程序、Java、Python。
近期AIGC商业应用摸索中。
展开
-
前端工程化1——概念、项目中的体现、如何规划工程化项目
一、概念前端工程化是指遵循一定的标准和规范，通过工具去提高效率降低成本的一种手段。现在不断被探讨，主要是前端应用现在功能要求不断提高，应用逻辑日益复杂。目前来说，web业务日益复杂化和多元化，前端开发从WebPage模式为主转变为WebApp模式为主了。前端的开发工作在一些场景下被认为只是日常的一项简单工作，或只是某个项目的"附属品"，并没有被当做一个"软件"而认真对待（无论是产品负责人还是开发者）。在模式的转变下，前端都已经不是过去的拼几个页面和搞几个jq插件就能完成。当工程复杂就会产生许多问原创 2021-06-12 14:29:36 · 530 阅读 · 1 评论 -
JavaScript性能优化10——字面量与构造式
这里来讨论一下不同数据声明方式和性能之间的关系。构造shilet test = () => { let obj = new Object() obj.name = 'zce' obj.age = 38 obj.slogan = 'SLOGAN!' return obj}console.log(test())原创 2021-06-07 00:16:54 · 339 阅读 · 1 评论 -
JavaScript性能优化9——减少判断层级、减少循环体活动
减少判断层级对我们的代码的性能影响，主要在当我们编写代码的时候有可能会出现判断条件嵌套的场景，往往出现多层if…else…嵌套的时候，我们都能通过提前return原创 2021-06-06 23:42:50 · 802 阅读 · 2 评论 -
JavaScript性能优化8——防抖与节流
一、概念我们现在JS主要是在浏览器下运行，涉及到很多人机交互的操作。假设一个场景，我们打开的网页有一个轮播图，我们对左右切换的按钮duan'shi'jian'nei原创 2021-06-06 21:05:47 · 541 阅读 · 2 评论 -
JavaScript性能优化7——缓存数据、减少访问层级
用一个例子来了解一下，如何通过处理缓存数据来提高JavaScript的执行速度。用缓存数据提高JS执行速度，主要说的就是对于需要多次使用的数据进行提前保存，后续进行使用。原创 2021-06-06 17:09:46 · 474 阅读 · 2 评论 -
JavaScript性能优化6——变量局部化
一、什么是变量局部化我们的变量分为全局变量和局部的变量，这里的变量局部化是指，我们在写代码的过程中，涉及到变量定义的时候，能够把变量放在局部就把变量放在局部的作用域当中。这样可以ti'gao...原创 2021-06-06 03:53:31 · 320 阅读 · 0 评论 -
JavaScript性能优化5——JSBench工具的使用
一、JSBench是什么根据官方的Jsbench.me 是 JavaScript 的性能基准测试平台，深受 jsperf.com 和 jsfiddle.net 的启发和影响。 它使用 Benchmarkjs.com 来执行测试套件。执行并比较不同 JavaScript 代码片段的执行速度。 通过简单而简短的 URL 与他人在线共享和协作。...原创 2021-06-06 03:27:29 · 1200 阅读 · 0 评论 -
JavaScript性能优化4——循环添加事件实现
一、需求现在我们的页面上有3个按钮，我们需要用循环来给按钮添加事件，实现按按钮1的时候打印出当前索引值为0，按按钮2的时候打印出当前索引值为1，按按钮3的时候打印出当前索引值为2.二、实现方式1.闭包和自定义属性方式代码看下面代码，最开始的时候写了个普通的循环，但是发现并不能满足我们的需求。于是后面我们倚靠闭包的机制写了另外3段代码和自定义属性写了1段代码，执行过后发现都能够完成我们需要的功能。<!DOCTYPE html><html> &..原创 2021-06-06 02:56:47 · 372 阅读 · 1 评论 -
JavaScript性能优化3——浏览器执行JavaScript时底层的堆栈操作
一、堆栈准备JS执行环境（比如现在常见的就是V8）：代码最终是会被转为能够运行的机器码 执行环境栈（ECStack，execution context stack）：在这里执行机器码。浏览器在渲染过程中，会在我们的内存当中去开辟一片内存空间，专门用来执行代码，这个栈内存说的就是执行环境栈。 执行上下文：管理代码执行，让不同代码之间保持独立，不能相互影响。 VO(G)，全局变量对象：所有变量声明都是存放在这个对象占据的空间当中。最初的时候，浏览器从我们计算机的内存当中申请或者开辟一个空间，我们把这原创 2021-06-05 16:53:24 · 465 阅读 · 0 评论 -
JavaScript性能优化2——浅谈JavaScriptV8引擎工作流程
一、过程V8引擎本身也是一个应用程序，就是JS的执行环境，我们这边只考虑浏览器平台的。Node.js用的也是V8，但是这里就不做研究。V8是浏览器的一个组成部分，用来解析和编译JS代码，内部存在很多子模块，可以看下面的图片了解。V8引擎其实只是浏览器渲染引擎里面JS执行代码的组成部分。我们直接从Scanner开始看。Scanner是一个扫描器，对纯文本的JS代码进行词法分析，把代码分析成不同的tokens。这会得到一个的单元，是语法上面无法再进行分割的最小单位。有可能是单个的字符，也有可能就原创 2021-06-03 01:33:03 · 255 阅读 · 0 评论 -
JavaScript性能优化1——内存管理（JS垃圾回收机制、引用计数、标记清除、标记整理、V8分代回收、Performance使用）
一、导入随着我们JavaScript代码需要实现的功能越来越复杂，性能优化变得重要了起来。那么哪些内容可以被看做是性能优化呢？本质上来说，任何一种提高运行效率，降低运行开销的行为都可以看做是优化操作。前端优化无处不在，例如请求资源时候用到的网络、数据的传输方式、开发过程中使用的框架等。本阶段讨论的核心是JavaScript语言本身的优化，也就是从认知内存空间的实用到垃圾回收的方式介绍。从而让我们编写出高效的JavaScript代码。在这篇文章里，主要讨论内存管理相关的内容。随着这些年来的硬件原创 2021-06-02 00:06:29 · 1913 阅读 · 7 评论 -
进阶学习12：Flow——JavaScript的类型检查器(安装&使用、Flow详解)
目录一、概述二、安装三、使用1.运行方式2.编译移除注解1.官方的 flow-remove-types2.使用Bable配合插件3.开发工具插件四、Flow特性1.类型推断2.类型注释3.Flow支持的数据类型1.原始类型2.数组类型3.对象类型4.函数类型5.特殊类型6.Mixed 与 Any7.类型小结4.运行环境API一、概述Flow是一款JavaScript的静态类型检查器，是2014年Facebook推出的一.原创 2021-05-30 17:04:55 · 1096 阅读 · 2 评论 -
进阶学习10：ECMAScript——ES2016、ES2017新特性
目录一、ES20161.数组实例对象的includes方法2.指数运算符二、ES20171.Object.values2.Object.entries3.Object.getOwnPropertyDescriptors4.String.prototype.padStart / String.prototype.padEnd5.允许函数参数中添加尾逗号6.Async / Await一、ES2016这是一个小版本，仅包含2个小功能1.数组实例对象的includ原创 2021-05-27 21:28:17 · 494 阅读 · 1 评论 -
进阶学习9：ECMAScript——概述、ES2015 / ES6新特性详解
一、ECMAScript概述ECMAScript也是一门脚本语言，一般缩写为ES，通常我们把他看作为JavaScript的标准化规范。但实际上，JavaScript是ECMAScript的扩展语言，因为ES只提供了最基本的语法。总的来说，在浏览器环境当中JavaScript = ECMAScript +BOM + DOM。在Node.js环境呢JavaScript = ECMAScript + fs + net + etc.从2015年开始，ES保持着每年一个大版本的迭代。其实从ES2015开.原创 2021-05-27 01:03:15 · 1446 阅读 · 1 评论 -
进阶学习7：JavaScript异步编程——Generator异步方案、Async/ Await
目录六、Generator异步方案1.前言2.了解Generator的特点和基本使用3.使用Generator去实现异步4.Async / Await语法糖六、Generator异步方案1.前言前面学习到的链式调用Promise呢还是和我们同步模式不太一样，我们希望能够代码更加扁平化，而ES2015中提供的Generator就能解决这个问题2.了解Generator的特点和基本使用想解释的都写在下面代码的注释里拉。//DEMO9// 生成器函数回顾// 比.原创 2021-05-23 22:31:55 · 977 阅读 · 8 评论 -
进阶学习6：JavaScript异步编程——Promise、链式调用、异常处理、静态方法、并行执行、执行时序、宏任务微任务理解
五、Promise1.前言回调函数是异步模式的根基，但是如果我们直接使用传统的回调方式去完成复杂的异步流程，就无法避免大量回调函数嵌套，就会变成回调地域的问题。于是最早CommonJS社区提出了Promise的规范，后来ES2015中杯标准化，成为一种语言规范，2.概念所谓Promise就是一个对象，用来去表示一个异步任务最终在结束过后是成功还是失败。在状态明确过后（就是成功或者失败后）都会有对应的任务自动被执行。一旦明确结果之后，再也不会改变。3.基本用法//DEMO1//原创 2021-05-23 17:16:40 · 1759 阅读 · 12 评论 -
进阶学习5：JavaScript异步编程——同步模式、异步模式、调用栈、工作线程、消息队列、事件循环、回调函数
目录一、背景介绍二、同步模式1.概念2.运行方式三、异步模式1.概念2.运行方式四、回调函数一、背景介绍JavaScript是单线程模式工作，这是因为最早JavaScript设计初衷就是用于浏览器端的语言，主要任务是处理用户的交互，响应DOM的操作，避免线程重复造成迷惑的问题。JS执行环境中负责执行代码的线程只有一个，有多个任务的话只能排队依次完成。这带来的优点就是会让我们的程序更安全更简单，但是缺点也很明显，如果当中某个任务十分耗时，那么后面的任务需要等待前面的原创 2021-05-23 02:58:03 · 304 阅读 · 0 评论 -
进阶学习4：函数式编程FP——函子Functor、MayBe函子、Either函子、IO函子、Folktale、Pointer函子、Monad
六、函子Functor1.函子的概念学习函子是为了在函数式编程中把副作用控制在可控的范围内、异常处理、异步操作等。什么是 Functor容器：包含值和值的变形关系(这个变形关系就是函数)函子：是一个特殊的容器，通过一个普通的对象来实现，该对象具有 map 方法，map 方法可以运行一个函数对值进行处理(变形关系)2.使用代码演示函子我们可以通过.map进行链式调用//DEMO23//函子//函子：是一个特殊的容器，通过一个普通的对象来实现，该对象具有 map 方法，ma原创 2021-05-23 01:27:00 · 689 阅读 · 1 评论 -
进阶学习3：函数式编程FP——函数的组合、组合函数模拟、Lodash fp模块、PointFree
目录五、函数的组合1.函数组合的概念管道：函数组合 (compose)2.Lodash中的组合函数3.组合函数原理模拟4.函数组合——结合律5.函数组合——调试6.Lodash——FP模块Lodash FP模块介绍Lodash和Lodash/fp模块中map方法的区别7.Point Free五、函数的组合1.函数组合的概念纯函数和柯里化很容易写出洋葱代码 h(g(f(x)))管道：函数组合 (compose)如果一个函数要经过多..原创 2021-05-22 16:24:05 · 463 阅读 · 0 评论 -
进阶学习2：函数式编程FP——闭包、纯函数、Lodash、柯里化
目录三、闭包1.闭包的概念2.闭包案例1.求number的power次方2.通过级别计算员工总工资四、纯函数Pure Functions1.纯函数的概念2.纯函数和不纯函数样例slice()splice()3.Lodashlodash安装lodash使用4.纯函数的好处1.可缓存2.可测试3.并行处理5.副作用6.柯里化（Haskell Brooks Curry）1.柯里化概念2.Lodash中柯里化方法3.柯里化...原创 2021-05-22 16:22:11 · 395 阅读 · 0 评论 -
进阶学习1：函数式编程FP——概念、头等函数、高阶函数、常用高阶函数模拟
一、什么是函数式编程函数式编程Functional Programming（FP），是编程范式之一，其他编程范式还有面向过程编程、面向对象编程。老师没有过多展开另外两个，于是课后我自己查了一下资料。面向过程编程Procedure Oriented Programming（POP）：分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。常见的有C语言。//1.面向过程编程//按照步骤一步一步来的let num1 = 2let num2 =原创 2021-05-21 03:10:48 · 1064 阅读 · 0 评论