优化JavaScript

JavaScript性能优化实战- 第 1 篇:代码也要减肥 -JS 体积优化实战 打开页面要等 5 秒?你这是网页不是 PS 吧……”前端开发越来越重,动不动就几百 KB 的 JS 文件,用户一打开页面,浏览器都在默默崩溃。你以为是服务器慢,其实是你的 JS 太胖了。本篇就教你如何给 JS 减减肥,优化,让用户打开网页像喝冰可乐一样爽! 阅读详情

优化JavaScript


Web浏览器下载的是JavaScript源码,也就是所有的长变量与注释都会包含在内。这个因素和其他因素都会增加下载时间,这会增加脚本运行的总时间。增加下载时间的关键因素就是脚本所包含的字节数。

要记住一个关键数字是1160,这是能放入单个TCP-IP包中的字节数。最好能将每个JavaScript文件都保持在1160字节以下以获取最优的下载时间。

在JavaScript中,每个字符就是一个字节,因此,每个额外的字符(不管是变量名、函数名、或者注释)都会影响下载速度。部署JavaScript之前,都应该尽可能优化下载速度。

1.删除注释

2.删除制表符和空格

3.删除所有的换行

4.替换变量名

5.ECMAScript Cruncher
利用Thomas Loo开发的ECMAScript Cruncher(ESC 可以http://www.saltstorm.net/depo/esc/或51AJAX.com下载)。ESC是一个小巧的Window Shell脚本。

利用Thomas Loo开发的ECMAScript Cruncher(ESC 可以下载)。ESC是一个小巧的Window Shell脚本。运行ESC,必须使用Windows系统。打开一个控制台窗口,输入以下命令:
cscript ESC.wsf -l [0-4] -ow outputfile.js inputfile.js [inputfile2.js]

第一部分,cscript是Windows Shell脚本解释程序。文件名ESC.wsf是ESC的程序本身。然后是压缩等级,一个0到4的数值,表示要进行优化的等级。-ow选项表示下一个参数是优化后输出的文件名。最后,剩下的参数是要进行优化的JavaScript文件。可以只给出一个要进行优化的文件,也可以有多个文件(多个文件估优化后会按顺序放到输出文件中)。

ESC支持的四个优化等级如下:
 0:不改变脚本,要将多个文件合到单个文件中时有用;
 1:删除所有的注释;
 2:除等级1外,再删除额外的制表符和空格;
 3:除等级2外,再删除换行;
 4:除等级3外,再进行变量名替换。

ESC擅长把变量名替换成无意义的名称。它不会更改构造名称、公用特性和公用方法名称。

使用ESC时要记住,如果某个JavaScript引用了另一个文件中的构造函数,4级优化会把对构造函数的引用替换成无意义的名称。解决方法是将两个文件合并成一个文件,这样就会保持构造函数的名称。

6.其他减少字节数的方法
 1)替换布尔值
  考虑下面的例子

  1.   var bFound=false;
  2.   for(var i=0;i<aTest.length;i++){
  3.    if(aTest[i]==vTest) {bFound=true;}
  4.  }

 
  可以替换为: 

  1.   var bFound=0;
  2.   for(var i=0;i    if(aTest[i]==vTest) {bFound=1;}
  3.  }

   2)缩短否定检测

  1.  
  2.   if(oTest !=undefined) {
  3.    //do something
  4.   }
  5.   if(oTest !=null) {
  6.    //do something
  7.   }
  8.   if(oTest !=false) {
  9.    //do something
  10. }

  虽然这些都正确,但用逻辑非操作符来操作也有同样的效果

  1.   if(!oTest) {
  2.    //do something
  3.   }

 
7.使用数组和对象字面量 

  1.    var aTest = new Array;
  2.    var aTest =[];

 
 第二行用了数组字面量,与第一行效果一样,但要短很多。

  类似,对象字面量也可用于节省空间,以下两行效果一行,但对象字面量要更简短

  1.    var aTest = new Object();
  2.    var aTest ={}; 

 如果要创建具有一些特性的一般对象,也可以使用字面量,如下:

  1.    var oFruit = new Object();
  2.    oFruit.color="red";
  3.    oFruit.name="apple";  

  前面的代码可用对象字面量来改写成这样:

  1.    var oFruit = {color:"red",name:"apple"};
 
JavaScript性能优化实战:优化JS性能问题实战 摘要:文章深入探讨JavaScript性能优化策略,分析重绘/重排、主线程阻塞、内存泄漏三大性能瓶颈,并提供实战优化方案:通过减少DOM操作、应用节流防抖技术、实现资源懒加载、利用WebWorker分担计算及数据缓存等方法提升性能。结合新闻网站优化案例,展示这些技巧的实际效果,最终总结持续性能监控和优化的最佳实践,帮助开发者构建高效Web应用。 阅读详情

相关推荐

Next.js 脚本优化:高效加载 JavaScript

Next.js 作为一个基于 React 的全栈框架,在处理 JavaScript 脚本加载时提供了强大的优化工具,其中 next/script 组件是关键功能之一。脚本加载是 Web 应用性能的核心,传统next/script 组件在 App Router 和 Pages Router 中均可用,支持 beforeInteractive、afterInteractive 和 lazyOnLoad 等策略,允许开发者根据场景优化加载时机。本文将探讨 next/script 组件及脚本加载策略,详细讲解其

zimin的专栏 1466

Vue项目里js文件下载时间长解决方法

我们的Vue项目在网页里加载缓慢可能是由于项目内的js文件是设置的远程访问,我们只要把它切换成本地访问,就可以大大缩短访问时间。

weixin_62144116的博客 823

js是否联网,实时联网监测

前端代码:判断是否联网,实时监测联网状况。最简化代码

在node.js中解决包下载速度慢的问题

在使用 npm 下包的时候,默认从国外的 https://registry.npmjs.org/ 服务器进行下载,此时,网络数据的传输需要经过漫长的海底光缆,因此下包速度会很慢。为了增加我们切换镜像源的速度,我们通过安装nrm这个小工具来实现。切换我们需要的下载包的镜像源:(这里我以淘宝为例)由此可见,我们的镜像源成功切换到了taobao。我们当前下载的镜像源默认为 npm。查看我们所在路径所有的可用镜像源。二、切换npm的下包镜像源。此处我切换为淘宝的镜像源。切换我们所需要的镜像源。

weixin_56071551的博客 3122

Catia二次开发QueryInterface的操蛋问题

探索了很久,尝试录制宏,打开部件属性窗口,然后随意设置一些属性(必须改变一些东西才能录制成功,否则不会录制到任何东西),再看录制的结果,发现原来CATIAAnalyze是从Product那里来的。例如获得一个部件的体积,找到相关接口CATIAAnalyze,但是这个部件的CATIAAnalyze的对象不知道如何获取。总结一下,写Catia二开代码,就像漂亮国那款《莫里秀》 又名《爸爸死哪了》的综艺节目,大部分时间都是在找爸爸!Catia二开很痛苦,明明已经找到接口类,但是却不知道怎么获得这个接口类的对象。

gergul的专栏 746

细节增强卷积DEConv详解及代码复现

这种预训练模型能够捕捉图像的基本特征,为后续的端到端训练提供良好的初始参数。例如,在RESIDE和RESIDE-6K数据集上的实验结果表明,使用MSPLCK模块的MixDehazeNet-L模型在RESIDE-IN数据集上首次超过了42dB的PSNR指标,且在所有数据集上均优于先前的方法。例如,在RESIDE和RESIDE-6K数据集上的实验结果表明,使用MSPLCK模块的MixDehazeNet-L模型在RESIDE-IN数据集上首次超过了42dB的PSNR指标,且在所有数据集上均优于先前的方法。

hasakie的博客 1910

文档流下载——axios+fetch两种方式下载——技能提升

文档流下载——axios+fetch两种方式下载——技能提升

yehaocheng520的博客 2801

当兵心理测试软件,当兵心理测试题及答案

心理测试是一种比较先进的测试方法,它是指通过一系列手段,将人的某些心理特征数量化,来衡量个体心理因素水平和个体心理差异差异的一种科学测量方法。小编为你整理了当兵心理测试题及答案,希望对你有所参考帮助。征兵心理测试题(1代表是2代表否)1、我的胃口很好。12、我早上起来的时候,多半觉得睡眠充足,头脑清醒13、我喜欢看报纸上的犯罪新闻。14、有时我常感到困难重重,无法克服。25、我时常遇见一些所谓的专...

weixin_42128393的博客 1万+

页面优化之加快JS下载速度

本文综合了网上的几篇文章,揉捏到一块了,估计网上也有这种揉捏版本,如有雷同,纯属巧合   越来越多的Web开发采用了JS库,如Extjs,这样的好处是开发效率高,界面可用性高,而且好看(尤其对于 没有美工的团队来说,它尤其合适)。但问题是通常这样的类库连同他带的CSS文件都比较大,通常有500k-600k . 用户第一次访问的时候,会等待较长时间.如何让用户感觉访问起来很快呢?可以使用...

tudingdang的专栏 952

地平线天工开物AI开发平台实战:从量化训练到模型部署的完整指南

本文提供了地平线天工开物(OpenExplorer)AI开发平台的实战指南,详细解析了从量化训练到模型部署的完整流程。文章重点对比了量化感知训练(QAT)与训练后量化(PTQ)两条核心路径的优劣与适用场景,并分享了图像分类模型PTQ部署的实战经验与常见问题调试技巧,旨在帮助开发者高效地将AI模型部署到地平线AI芯片上。

weixin_29046035的博客 456

生信小白必看:手把手教你用R语言实现counts/FPKM/TPM互转(附代码)

本文为生信初学者详细讲解如何使用R语言实现counts、FPKM和TPM三种转录组表达量单位的精准转换,包含完整代码示例和常见问题解决方案。重点解析了FPKM与TPM的数学原理及转换方法,帮助读者掌握RNA-seq数据分析中的关键预处理步骤,提升差异表达分析的准确性。

weixin_27442001的博客 497

【加载静态资源很慢】解决浏览器加载静态资源阻塞

开门见山讲方法: 增加浏览器的最大并发连接数, 避免静态资源的加载请求排队而被其他请求阻塞。 仅测试火狐浏览器可用, Chrome据我所知不支持此项配置, IE浏览器需要通过修改组策略, 未测试。 正文: 存在问题 今天调试网页时, 网页加载缓慢, 一方面主要是后端代码和网络等问题, 导致静态资源解析和响应速度慢, 另一方面在调试的时候发现一个情况: 就是很多的静态资源请求都被阻塞。前面的请求没有完成, 后面的请求就不会发起。而静态资源的请求是没必要等待其他请求完成后发起的。 于是我百度了原因, 并在浏览器

chenyao的博客~ 7019

流量PID控制(开度前馈量计算+辅助PID)

PLC通过伯努利方程近似计算水箱流量(FC)-优快云博客文章浏览阅读1.6k次。本文介绍了如何使用PLC通过伯努利方程近似计算水箱中的液体流量,主要涉及流量计算、模型验证、梯形图编程及STL代码实现。适合自动化领域的学习者参考。单容双容水箱建模(simulink仿真+PLC代码)_水箱系统的建模方法-优快云博客文章浏览阅读2k次。该博客介绍了如何使用伯努利方程建立单容和双容水箱模型,详细阐述了从理论建模到PLC编程的实现过程。

RXXW_Dor的博客 845

如何优化网页JavaScript性能:优化JS性能问题实战

如何优化网页JavaScript性能:优化JS性能问题实战 一、引言 在现代Web开发中,JavaScript是构建交互式网页应用的核心。然而,随着前端应用的复杂性提升,JavaScript性能问题逐渐成为影响用户体验的关键因素。本文将深入探讨JavaScript性能瓶颈的来源,结合实践案例,分享一系列行之有效的优化技巧与最佳实践,帮助开发者打造高性能、响应迅速的Web应用。

猫头虎技术团队:授渔优于赠鱼,兴趣引领智慧,探索之乐尤显珍贵。商务合作+:Libin9iOak ,万粉变现+:优快云WF,猫头虎承诺每年免费为100名C站创作者做账号流量诊断服务!全网搜:猫头虎技术团队,点击文章底部名片或直接私信我一切皆可谈,快找虎哥! 1万+

华为OD新系统真题-最小极差分组(C/C++/Py/Java/Js/Go)

华为OD机试 新系统真题【最小极差分组】,提供C语言、Java、C++、Python、Go、JavaScript源码实现,并提供完整思路讲解,以及在线OJ模拟做题。华为OD机试真题【最小极差分组】多语言题解。

qq_45776114的博客 585

2025年7月5日全国青少年信息素养大赛图形化(Scratch)编程小学低年级组复赛真题+答案

2025年7月5日全国青少年信息素养大赛图形化(Scratch)编程小学低年级组复赛真题+答案

伶俐角少儿编程 898

从JS引擎理解并优化javascript代码

序言:作为一名前端工程师,对于javascript大家都不陌生,这篇文章从更深层次的方向——JS引擎去理解javascript到底是怎么运行的,从而进行优化。 JS Engine—— JS 引擎介绍 一、基本介绍 js引擎是一个专门运行javascript的解释器(interpreter)。目前比较主流的js 引擎和介绍,大家可以简单了解一下: V8 —  由谷歌使用C++开源的V8引擎,...

likeconan123的博客 2974

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

推荐文章:优化你的JavaScript —— 深入了解`optimize-js-plugin`

推荐文章:优化你的JavaScript —— 深入了解optimize-js-plugin 在前端开发的高效性和性能追求之旅中,我们总是寻求那些能够提升应用加载速度和运行效率的魔法工具。今天,我们将探索一款旨在优化你的Webpack构建流程的神器——optimize-js-plugin。 项目介绍 optimize-js-plugin是一个轻量级的Webpack插件,其核心目标是通过集成Nolan...

gitblog_00695的博客 986

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

css js 性能优化,JavaScript前端性能优化

JS性能优化的知识非常庞杂,这里我们来介绍几种常用的性能优化方式。一、JS中的前端性能优化原则:多使用内存、缓存等方法减少CPU计算、减少网络请求二、针对上述两项原则,我们可以从两个方向入手来进行前端的性能优化。1、加载资源优化静态资源的压缩合并我们可以利用webpack等打包工具进行资源的合并与压缩操作,可以大大减小资源的大小,实现页面更快的加载。静态资源缓存当浏览器发送请求时,可以检测该资源的...

weixin_33487811的博客 509

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

【JS】JavaScript 优化技巧

JavaScript 性能优化技巧

one-ccs 的博客 388

Webpack插件:JavaScript文件优化工具——Optimize-js-plugin

Webpack插件:JavaScript文件优化工具——Optimize-js-plugin Optimize-js-plugin 是一个开源的 Webpack 插件,它旨在通过包装急切调用的函数来优化 JavaScript 文件,从而加快初始加载速度。该项目主要使用 JavaScript 编程语言。 项目核心功能 Optimize-js-plugin 的核心功能是通过 Webpack 插件机制,...

gitblog_00916的博客 478

推荐使用:optimize-js-plugin - Webpack 的高效 JavaScript 优化插件

推荐使用:optimize-js-plugin - Webpack 的高效 JavaScript 优化插件 在构建现代 web 应用的过程中,性能优化是至关重要的环节。今天,我们向您推荐一款基于 optimize-js 的优秀 Webpack 插件 —— optimize-js-plugin。这个小巧却强大的工具能够显著提升你的 JavaScript 文件的加载速度和运行效率。 1. 项目介绍 o...

gitblog_00026的博客 855

js和java 性能优化,JavaScript性能优化

1、使用局部变量在函数中,总是使用var来定义变量。无论何时使用var都会在当前的范围类创建一个局部变量。如果不使用var来定义变量,那么变量会被创建在window范围内,那么每次使用这个变量的时候,解释程序都会搜索整个范围树。同时全局变量要在页面从浏览器中卸载后才销毁,而局部变量在函数执行完毕即可销毁,过多的全局变量增加了不必要的内存消耗。只要有可能就应该用局部变量或者数字索引的数组来替代命名特...

weixin_36193690的博客 3383

JavaScript性能优化篇js优化

http://www.111cn.net/wy/js-ajax/43542.htm JavaScript性能优化篇js优化 我在本文中将指出一些重要的规则,介绍如何使用你的JavaScript、使用哪些工具以及你将从中得到什么好处。 确保代码尽量简洁   不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化

yan_dk的专栏 1243

无依赖JavaScript插件:PriorityNavigation.js性能优化技巧

PriorityNavigation.js是一款纯JavaScript插件,能在菜单项不适合其父容器时自动移动它们,实现Priority+ Navigation功能且无任何依赖。它为网站导航提供了智能解决方案,尤其适合需要响应式设计的现代网站。 ## 为什么选择PriorityNavigation.js? 这款插件具有多项优势,使其在众多导航解决方案中脱颖而出: - **零依赖**:采用纯J

gitblog_00780的博客 939

JS | 如何更好地优化 JavaScript 的内存回收?

JavaScript的内存回收优化关键在于理解内存生命周期、减少内存泄露以及合理运用内存管理手段。具体方法包括:避免全局变量的滥用、使用局部变量以便回收、减少对闭包的不当使用、解绑无用的事件监听器、避免不必要的大型数据结构、使用WeakMap和WeakSet以便垃圾回收、利用Chrome DevTools定位内存问题。其中,解绑无用的事件监听器尤为重要,因为忘记解除绑定的事件监听器可能导致DOM元素无法被回收,从而产生内存泄露。这意味着即便相关DOM已从文档中移除,由于仍然存在引用(事件监听器),它的内存仍

青春木鱼的博客 964
上一篇: 利用AJAX与数据岛实现无刷新绑定
下一篇: 在JavaScript中实现命名空间
SmartJavaer
博客等级 码龄21年 13粉丝 37原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值