首页 web前端 js教程 JS代码优化技巧之通俗版(减少js体积)_javascript技巧

JS代码优化技巧之通俗版(减少js体积)_javascript技巧

May 16, 2016 pm 05:57 PM
代码优化

细读完这篇文章,够你优化大半天的了,关于JS优化方法大都脱离不了这三种方法。

JS代码优化技巧之通俗版

(网页总大小为155.k,而JS就占了100.3K)

是时候优化下JS了

关于JS优化的文章已经很多了,大多技术性很强,像什么变量、字符串、类型,就不做介绍了,也不需要介绍,我也不懂,你知道了也没用。大多数站长都是“拿来主义”,我只需要告诉JS怎么放,删那里就可以了。

现在的网站都加的有统计代码、分享工具、评论列表、相关文章插件等工具,而要实现强大的功能,必须使用JS文件,正是这些JS插件,再增强了网站功能的同时,也给影响了网站速度。

最常用的JS优化办法

通过博客调用JS来看,目前最影响速度的为无觅插件(952ms),拿福能广告(434ms)。如果确实要用可以保留,适当的根据官方教材做做优化,下面卢松松介绍几个最常用的JS优化方法。

方法一:把不重要的JS放在页面最底部

这是最简单,也是效果最好的优化方法,把不重要的JS通通放到页面的最下面body的上面,实现异步加载,也就是等网页都加载完了,最后在加载这些不重要的JS,这样就不影响网页速度了。

如低调与华丽模板中公共的util.js公共文件,默认效果为,浏览网页时会在网页中出现“回顶部、写评论”特效。现在把wumii(无觅插件JS)和jiathis(分享工具JS)统一整合到util.js文件中了。

JS代码优化技巧之通俗版

(不重要的JS都放到页面最底部了)

当然,其他网站也需要这样做:把不重要的JS通通放到页面最底部。

方法二:合并JS文件

合并JS,也就是减少HTTP请求,少给服务器请求一次就加快一点速度,而合并两个原本独立的JS就需要点技术了,但这难不倒我们,告诉大家一个最简单的方法:

不管三七二十一,先把A文件直接粘贴到B文件中,合并后删除网页中的A文件,如果网页运行正常,就OK;如果一些特效失效,那就还原,换C文件合并。总会有两个不冲突的JS文件的。

例如我博客上的百度广告管家,有6个广告位,默认情况是要进行6次HTTP请求的,因为是第三方JS,一次请求最快要花234ms,而6次请求就就需要花2秒,也就是说因为这个广告管家打开网页就要额外增加2秒。

JS代码优化技巧之通俗版

(第二段JS就是把6个请求变成了1个)

按照官方教程把JS合并后,6个广告位的广告请求合并为1次请求,大幅降低js请求次数,有效减少页面渲染被阻塞的情况,提升广告加载速度。

方法三:给JS文件减肥

咱不讨论什么三目运算符、减少对象查找、如何让JS简洁,咱就用“JS减肥工具”。通常这类工具会把JS文件中几百行的代码压缩成一行,使体积变小。推荐工具:http://javascriptcompressor.com/软件版本(容错效果好)

因为空行等问题,有时候使用这类工具会使JS功能失效,而最简单的办法是用Dreamweaver,把压缩后的JS放入DW中,DW会自动提示你那里有误,把错误的地方另起一行,或还原回去即可。

最后再给个网友的现身说法吧:

JS代码优化技巧之通俗版

当你的站点随着时间的推移慢慢地做大的时候,你就会发现很多问题出来的,其中一个就是越来越臃肿庞大,因此运行的速度也就会慢了下来。优化,尽力去优化站点,就变得非常重要了。

这些方法都通俗易懂,希望对大家有用!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何做好Java代码的重构 如何做好Java代码的重构 Jun 15, 2023 pm 09:17 PM

作为世界上最流行的编程语言之一,Java已成为许多企业和开发者的首选语言。然而,代码的重构对于保持代码质量以及开发效率至关重要。Java代码由于其复杂性,随着时间的推移可能会变得越来越难以维护。本文将讨论如何进行Java代码的重构,以提高代码质量和可维护性。了解重构的原则Java代码重构的目的在于改进代码的结构、可读性和可维护性,而不是简单的“改变代码”。因

Java Spring Boot Security性能优化:让你的系统飞起来 Java Spring Boot Security性能优化:让你的系统飞起来 Feb 19, 2024 pm 05:27 PM

一、代码优化避免使用过多的安全注解:在Controller和Service中,尽量减少使用@PreAuthorize和@PostAuthorize等注解,这些注解会增加代码的执行时间。优化查询语句:使用springDataJPA时,优化查询语句可以减少数据库的查询时间,从而提高系统性能。缓存安全信息:将一些常用的安全信息缓存起来,可以减少数据库的访问次数,提高系统的响应速度。二、数据库优化使用索引:在经常被查询的表上创建索引,可以显着提高数据库的查询速度。定期清理日志和临时表:定期清理日志和临时

PHP高并发处理中的代码优化技巧 PHP高并发处理中的代码优化技巧 Aug 11, 2023 pm 12:57 PM

PHP高并发处理中的代码优化技巧随着互联网的快速发展,高并发处理已经成为了web应用程序开发中的重要问题。在PHP开发中,如何优化代码以应对高并发请求成为了程序员需要解决的一个难题。本文将介绍一些PHP高并发处理中的代码优化技巧,并加上代码示例进行说明。合理利用缓存对于高并发的情况,频繁访问数据库会导致系统负载过大,并且访问数据库的速度相对较慢。因此,我们可

程序性能优化有哪些常见的方法? 程序性能优化有哪些常见的方法? May 09, 2024 am 09:57 AM

程序性能优化方法包括:算法优化:选择时间复杂度更低的算法,减少循环和条件语句。数据结构选择:根据数据访问模式选择合适的数据结构,如查找树和哈希表。内存优化:避免创建不必要对象,释放不再使用的内存,使用内存池技术。线程优化:识别可并行化任务,优化线程同步机制。数据库优化:创建索引加快数据检索,优化查询语句,使用缓存或NoSQL数据库提升性能。

Go语言中的该如何进行代码重构 Go语言中的该如何进行代码重构 Jun 02, 2023 am 08:31 AM

随着软件开发的不断深入和代码的不断积累,代码重构已经成为了现代软件开发过程中不可避免的一部分。它是一种对系统的既定代码进行修改,以改善其结构、性能、可读性或其他相关方面的过程。在本文中,我们将探讨如何在Go语言中进行代码重构。定义好重构的目标在开始代码重构之前,我们应该制定一个清晰的重构目标。我们需要问自己一些问题,比如这段代码存在哪些问题?我们要通过重构

如何进行C++代码的重构? 如何进行C++代码的重构? Nov 04, 2023 pm 04:40 PM

C++是一种非常强大、灵活且广泛使用的编程语言,但是随着项目的不断发展和代码的持续相对重用,会存在代码质量的下降、可读性的下降等问题。这时候就需要对代码进行重构,以达到更好的代码质量和更高的可维护性。本文将介绍如何进行C++代码的重构。定义目标在开始重构代码之前,你需要明确需要完成的目标。例如,你可能想改善代码的可读性、减少代码的重复、提高代码的性能等等。无

代码优化在Java框架性能优化中的关键技巧 代码优化在Java框架性能优化中的关键技巧 Jun 03, 2024 pm 01:16 PM

在Java框架性能优化中,代码优化至关重要,包括:1.减少对象创建;2.使用合适的数据结构;3.避免阻塞I/O;4.优化字符串操作;5.避免反射。通过遵循这些技巧,可以提高框架性能,例如优化Hibernate查询以减少数据库调用次数。

Python 性能优化实战:从基础到进阶 Python 性能优化实战:从基础到进阶 Feb 20, 2024 pm 12:00 PM

基础优化使用正确的Python版本:较新版本的python通常性能更高,提供更好的内存管理和内置优化。选择合适的库:使用专门构建的库而不是从头开始编写代码,可以节省时间并提高性能。减少循环次数:如果可能,避免使用嵌套循环。使用列表推导和生成器表达式是更有效的替代方案。数据结构优化选择正确的容器:列表适用于随机访问,字典适用于快速键值查找,元组适用于不可变数据。使用预分配内存:通过预分配数组或列表的大小,可以减少内存分配和碎片整理的开销。利用Numpy和Pandas:对于科学计算和数据分析,Num

See all articles