前端优化
关注
分享
扫一扫
文章平均质量分 73
JIZQAQ
现PM/BA，不断学习的路上。
前全栈工程师web（vue、react）、app（flutter、h5）、微信小程序、Java、Python。
近期AIGC商业应用摸索中。
展开
-
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性能优化2——浅谈JavaScriptV8引擎工作流程
一、过程V8引擎本身也是一个应用程序，就是JS的执行环境，我们这边只考虑浏览器平台的。Node.js用的也是V8，但是这里就不做研究。V8是浏览器的一个组成部分，用来解析和编译JS代码，内部存在很多子模块，可以看下面的图片了解。V8引擎其实只是浏览器渲染引擎里面JS执行代码的组成部分。我们直接从Scanner开始看。Scanner是一个扫描器，对纯文本的JS代码进行词法分析，把代码分析成不同的tokens。这会得到一个的单元，是语法上面无法再进行分割的最小单位。有可能是单个的字符，也有可能就原创 2021-06-03 01:33:03 · 255 阅读 · 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性能优化5——JSBench工具的使用
一、JSBench是什么根据官方的Jsbench.me 是 JavaScript 的性能基准测试平台，深受 jsperf.com 和 jsfiddle.net 的启发和影响。 它使用 Benchmarkjs.com 来执行测试套件。执行并比较不同 JavaScript 代码片段的执行速度。 通过简单而简短的 URL 与他人在线共享和协作。...原创 2021-06-06 03:27:29 · 1200 阅读 · 0 评论 -
JavaScript性能优化1——内存管理（JS垃圾回收机制、引用计数、标记清除、标记整理、V8分代回收、Performance使用）
一、导入随着我们JavaScript代码需要实现的功能越来越复杂，性能优化变得重要了起来。那么哪些内容可以被看做是性能优化呢？本质上来说，任何一种提高运行效率，降低运行开销的行为都可以看做是优化操作。前端优化无处不在，例如请求资源时候用到的网络、数据的传输方式、开发过程中使用的框架等。本阶段讨论的核心是JavaScript语言本身的优化，也就是从认知内存空间的实用到垃圾回收的方式介绍。从而让我们编写出高效的JavaScript代码。在这篇文章里，主要讨论内存管理相关的内容。随着这些年来的硬件原创 2021-06-02 00:06:29 · 1913 阅读 · 7 评论