首页 > 经验 > 关键词 > JavaScript最新资讯 > 正文

JavaScript的两大优化准则

2011-10-21 14:08 · 稿源:晨露博客

在互联网高度发达的今天,各种网站因运而生,有些不是单纯提供信息的网站,有些涉及到纷繁复杂的web应用程序。那么,在日益复杂的网络发展阶段, 各种各样的网页特效也随之产生了,尤其是当今用的比较多的Ajax技术以及JavaScript使得今天的网页绚丽多彩。昨天给大家介绍了应用于此方面的 新语言,即Google的新编程语言Dart。但是,在很短的一段时间之内JavaScript还不会被代替吧,那么,如今,在广泛使用JavaScript制作特效的时候,我们要考虑网站的加载速度了,那么,今天就来为大家分享两大JavaScript的优化准则。

首先我们来分析一下JavaScript的运行机制。

JavaScript的运行机制

1.JavaScript代码是从服务器原封不动地发送到客户端的,代码越大,下载所需的时间和带宽越多。

2.JavaScript在浏览器中解释,而不是编译好的。

3.JavaScript 代码通过DOM API修改HTML页面来与用户交互。对JavaScript开发人员来说,这是功能强大的高级模型,但对DOM所做的每个简单修改都将导致浏览器的页面 渲染引擎执行一系列复杂的操作。对DOM看似细微的修改常常导致需要占用比预期的多得多的CPU周期。Gmail和基于Ajax的、ahoo! Mail等Web应用程序都对妙性能提出了挑战。大量的人力被投入到这些Web应用程序中,它们在最新的计算机中可能运行顺畅,但在较旧的计算机中可能反 应迟钝,而在这些旧计算机中运行相应的桌面应用程序没有任何问题。

两大JavaScript的优化准则

一、缩短JavaScript的下载时间

人多数编程语言要么是编译型的,要么在代码安装的计算机中运行,或者两者兼而有之。例如,使用诸如Python、PHP或Perl等脚本语言时,代码在执行 之前不需要通过网络传输,而在本地运行。但是诸如Java等其他语言的代码被编译成二进制文件,可在执行前通过网络传输。考虑到这种情况。采用的大量措施 使二进制格式更加紧凑。

JavaScript不属于上述任何一种情况,其源代码和用到的库被浏览器按照原样下载到客户端,因此 JavaScript源代码的大小以及打包传输方式将直接影响到页面的性能,这些在刚开始编码的时候也许无关紧要,但是随着JavaScript繁荣库越 来越多,很快将导致下载JavaScript代码需要的时间越来越长。

为了缩短上述的下载时间吗,我们有如下有效的措施:

1.除非每个页面都有不同的JavaScript,否则不要将JavaScript放在网页的HTML代码中,而是在HTML代码中引用JavaScript。如果一定要在页面中包含JavaScript,这样的页面不能过长。

2.减少在页面中包含的JavaScript文件数量。不需要走极端,将所有JavaScript代码放到一个文件中。包含不超过5个文件是可行的。但是如果包 含超过20个文件就需要三思而后行了。当然,这些数字只是一个象征性的说明,具体是什么情况,包含多少JavaScript文件数将影响页面的负荷能力需 要进行专门的测试才能得到精确的数字。

3.减少使用的库。如果使用大量不同来源的库,他们也许有一些代码是重复的。例如,每个库中 可能包含处理DOM的代码,这是一种浪费。因为i这些代码可以共享。选择一个可以解决大量问题且模块化的库,这样可只包含所需的子集。使用一个主要库的代 码还有其他好处:减少依赖关系,从而降低不兼容的可能性;升级到新版本更容易;通常来说,大型库更容易受到更大社区的支持,因此更新更加频繁,新特性更 多。

另外,JavaScript的很多库都含有完整版和精简版两个版本。

完整版适合用于阅读和修改库的代码。它包含缩进和注释,对于开发人员来说可读性更高。

精简版适合于用于部署网站。这种版本是基于完整版自动创建的:删除了注释和缩进;通常所有代码位于一行中;有时候不暴露的变量被重命名为很短的名称。

显而易见,在部署网站时,我们务必使用精简版。根据自己编写的代码长度,可能要使用工具创建JavaScript文件的精简版。这样的工具很多,其中开源的如(GPL)的ECMASScript Cruncher(ESC)。

二、最大限度的减少DOM更新

为完成任何有趣的功能,代码必须修改DOM。然而,修改DOM的开销非常高。显然,为处理修改页面内容的DOM API调用,浏览器必须做大量的工作。更令人惊讶的是,调用不修改页面的方法(如注册监听器)可能非常慢。

另外,一定要注意遍历大量的DOM对象的代码,如遍历document.all以查找特定元素的代码或document.getElementByName()。这些代码的执行时间将随页面的增大而增大。

网友热搜:

  • 相关推荐
  • 大家在看
  • Salesforce体验不佳?LinkWAN助力企业优化访问

    近日,全球最大的CRM服务商、SaaS云服务的代表Salesforce市值一度达到了 1791 亿美元。首次超过了曾经的全球第二大软件公司甲骨文(Oracle)。这是一场SaaS之王和传统软件的旧霸主的交锋,意义不言自明。Salesforce是客户关系管理(CRM)软件的全球领导者,于 2000 年首推CRM革新理念,并将其服务扩展到新的领域和行业,引入了新功能和平台功能,其创新式云平台已成为世界首屈一指的CRM解决方案。Salesforce在中国也逐渐拥有了超过 10

  • Cloudflare宕机导致大量网站和服务无法访问

    在Cloudflare的部分网络服务出现故障后,官方发布事故报告,称骨干网络的配置错误导致了持续 27 分钟的宕机。

  • 小红书回应App崩了无法访问故障:技术原因,已恢复

    小红书移动端App出现访问故障,苹果和安卓系统移动端均无法正常使用。对此,小红书回应称:「因技术原因,App出现了部分用户的访问故障,现已恢复,惊扰了用户和热搜,非常抱歉。」

  • Galaxy Note 20首发!三星研发全新UWP技术:传输速度比NFC更快

    8月3日消息,爆料人@SaudiAndroid得到独家消息称三星将推出一种全新的技术UWP,它可以以极高的速度进行数据传输,比NFC更快。该技术将首次被应用在Galaxy Note 20系列上,后续多家品牌将跟进这一

  • 内容赛道太挤了?趣头条强化AI技术优化内容生态

    时势造英雄,下沉巨头的崛起无法脱离时代背景。三个条件的达成,让互联网新巨头的诞生成为可能。 1:千元智能手机性能的全面提升 2:全国生活区4G网络覆盖的基本完成 3:4G网络速度提升而套餐资费连续下降 此三项的实现,代表着全国范围的互联网基础设施建设的基本完成。据今年三月的数据,我国网民数量已经达到9. 04 亿,其中手机接入的比例达到99.3%。所谓要想富先修路,设备与网络的普及,释放了五环外用户对于互联网产品的需求,

  • Adobe PR更新:解锁AMD GPU硬件加速、视频编码效率大增

    Adobe的Premiere Pro硬件加速常年对NVIDIA CUDA、Intel QuickSync友好,现在,AMD GPU的短板也补上了。本周,Adobe 14.2更新发布,支持了AMD GPU的媒体编码器,换言之APU、A卡等运行PR进行视频

  • switch各类ban机错误代码解释 全部错误代码意思分享

    switch在使用的过程中会出现很多错误代码,一些小伙伴不清楚出现这些错误代码意味着什么,所以今天就来为大家分享一下switch各类ban机错误代码解释。

  • 携程回应比价搜索网站 Skyscanner 裁员:将进行组织结构优化

    针对裁员问题,携程方面回应称,由于全球疫情的冲击,天巡(Skyscanner)计划采取一系列措施加以应对,其中包括组织结构的优化。在此过程中,天巡还将产生约 60 个新工作岗位,并优先考虑现有的员工。此前,网传携程旗下机票比价搜索网站 Skyscanner 宣布至多20%,将近 300 人的裁员。

  • IBM宣布SSD神优化技术:性能、可靠性提升3倍 延迟降低50倍

    随着技术的发展,SSD硬盘也面临着新的瓶颈,性能、可靠性及延迟等指标难以兼顾。IBM日前宣布推出一种新的SSD分区技术,它可以将SSD的性能及耐用性提升3倍,延迟足足降低了50倍。这个分区技术不

    IBM
  • 因代码抄袭争议 iOS两大越狱团队“打起来”了

    iOS越狱本身的热度就在降低,万万没想到的是,越狱圈子内部也互相干起仗来。本周,出于保护目的,GitHub基于Unc0ver的DMCA(数字千年版权法)审查要求,移除了Chimera13越狱代码存储。Chime

  • 全球最大同性交友网站的核心技术,居然是一个人花2周写出来的?

    不少差友们应该知道,编辑部小伙伴们虽然本职都是写简体中文的,但有那么一两个奇葩也写过代码( 比如在下 )。我们曾经和大多数程序员一样,常常厮混于一个神奇的网站 —— GitHub 。

  • 百度SEO优化,外链自动优化与推广的工具,你真的需要吗?

    当我们做外链建设的时候,经常想寻找一个快速自动发布SEO外链的工具,并且希望在SEO工作中可以利用更多的工具,来加快SEO优化的工作进度,这些想法是可以理解的,但我们真的需要这样做吗?

  • 线上糖酒会首日客户访问量超百万

    7 月 28 日,第 102 届全国糖酒商品交易会(以下简称“全国糖酒会”)在线上隆重开幕。本届全国糖酒会展期三天,通过云展展位、云端活动、线上对接、直播互动等形式,为行业人士带来全新的参展体验。 7 月 28 日,全国糖酒会线上云展全网曝光量达到1. 69 亿次,客户访问量超 131 万次,体现了国内外行业人士对本届全国糖酒会的高度认可,并以极大的热忱积极拥抱线上云展这一展览新模式。中粮集团党组书记、董事长吕军,成都市委副书?

  • 黑鲨参展ChinaJoy “超速度”引领手游体验新时代

    7 月 31 日,ChinaJoy将在上海新国际博览中心正式开幕,作为一年一度的全球性文娱盛典,数码娱乐产业链的各大厂商都将在博览会上展示最新的硬件设备、娱乐应用等产品。作为游戏手机行业的引领者——黑鲨科技,其品牌调性完美契合了ChinaJoy游戏动漫和数码文化的双重基因,而在此次ChinaJoy2020 上,黑鲨科技准备了非常丰富的内容等着广大玩家来体验,同时还将在展台上展示其最新款的腾讯黑鲨游戏手机3S。

  • 外媒:代码显示苹果可能要为Mac电脑加入Face ID

    7月27日消息,据国外媒体报道,在公测第三版的macOS Big Sur系统里面,发现了Face ID相关代码。苹果外媒表示,找到了苹果用来描述TrueDepth和Face ID的开发代码“PearlCamera”的支持。Face ID,是苹果用于替代Touch ID而推出的刷脸认证方式,搭载环境光传感器、距离感应器等配件。外媒还表示,找到了同样在iOS里用到的“FaceDetect”和“BioCapture”代码,这都表明苹果可能要为Mac电脑加入Face ID。上月,苹果还表示

  • 前“中供铁军”程学良13个月的悦刻速度

    13个月可以做很多事,作为十年阿里巴巴“中供铁军”的程学良,在这段时间里,挖掘市场,以不可思议的速度,开出100家悦刻专卖店,令人叹为观止。从0起步,开出近100家悦刻专卖店。从2015年离开阿里巴巴,进入电子雾化行业独自创业以来,程学良再次感受到了创业初期的激情,事业也再上一个台阶。不过,程学良说,这并不是他最看重的。经销悦刻后,自己的社交圈越变越大,生活更有意思了.而更大的改变在于,除了自己公司团队成员扩充

  • 一文看懂:零代码平台是什么?怎么选?

    在互联网高速发展的今天,工具产品呈现“傻瓜化”趋势,不是设计师也能用美图秀秀把自己相片处理得美美的;不是摄影师也能用抖音、手机剪辑软件制作出很燃的视频。当然,不会编程也能在零代码平台上搭建出一个企业管理系统。那么,零代码平台到底是什么?我们该怎么选择呢?为方便大家理解,本文将从零代码平台的原因、特点、优势、应用实例、局限性、选择要点六个角度分析:零代码平台到底是什么?到底适不适合你来用?一、为什么

  • 贝壳集团正式提交美股IPO文件 股票代码BEKE

    北京时间7月24日晚,贝壳集团正式向美国证监会提交IPO文件,股票代码为BEKE。贝壳集团此次IPO承销商包括高盛、摩根士丹利、华兴资本等。招股书显示,贝壳集团旗下拥有贝壳、链家两大平台。2019年贝壳集团房产及租赁交易总额(GTV)达2.1万亿。就交易额和交易量来看,贝壳集团是国内最大的居住服务平台,是国内居住服务平台第一股。上一家在美国上市筹集超10亿美元的中国公司是腾讯音乐娱乐集团,

  • 贝壳公寓正式提交招股书,股票代码为BEKE

    7月24日,贝壳向美国证券交易委员会公开递交招股书,拟在纽交所上市,股票代码“BEKE”。贝壳将成为中国居住服务平台第一股。2019年贝壳达成21280亿人民币GTV,营收460亿人民币,同比涨60.6%。

  • TikTok新任CEO表示,公司将公开内容审核算法的代码

    前迪士尼高管凯文·梅耶尔(Kevin Mayer)在担任TikTok的CEO之后,发布首份公开声明,该公司将发布驱动其内容审核算法的代码,以便专家可以实时观察其执行情况。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签