찾다
웹 프론트엔드JS 튜토리얼JS 코드 최적화 기술의 인기 버전(js 크기 감소)_javascript 기술

이 글을 주의 깊게 읽으면 대부분의 JS 최적화 방법을 이 세 가지 방법과 분리할 수 없습니다.

JS代码优化技巧之通俗版

(웹페이지 전체 크기는 155.k이고, JS는 100.3K를 차지합니다.)

JS를 최적화할 때입니다

JS 최적화에 관한 기사는 이미 많이 있는데, 그 중 대부분은 변수, 문자열, 유형 등 매우 기술적이므로 소개할 필요도 없습니다. .알면 소용없습니다. 대부분의 웹마스터는 "그것을 사용하고 있습니다". 나는 JS에게 그것을 거기에 넣고 삭제하는 방법을 알려주기만 하면 됩니다.

오늘날의 웹사이트에는 통계 코드, 공유 도구, 댓글 목록, 관련 기사 플러그인 및 기타 도구가 갖추어져 있습니다. 강력한 기능을 얻으려면 JS 파일을 사용해야 합니다. 웹사이트. 는 웹사이트 속도에도 영향을 미칩니다.

가장 일반적으로 사용되는 JS 최적화 방법

블로그의 JS 호출로 판단하면 현재 속도에 가장 큰 영향을 미치는 것은 Wumi 플러그인(952ms)과 Nafoneng Ads(434ms)입니다. 정말 사용하고 싶다면 공식 교과서에 따라 적절하게 최적화하여 보관하면 됩니다. 아래에서는 Lu Songsong이 가장 일반적으로 사용되는 JS 최적화 방법 중 일부를 소개합니다.

방법 1: 중요하지 않은 JS는 페이지 하단에 넣기

이것은 가장 간단하고 효과적인 최적화 방법입니다. 페이지 하단에 본문 위의 모든 중요하지 않은 JS를 배치하여 비동기 로딩을 구현합니다. 즉, 웹페이지가 로드될 때까지 기다린 후 마지막으로 중요하지 않은 JS 파일을 로드합니다. .JS이므로 웹 페이지 속도에 영향을 미치지 않습니다.

예를 들어, 은근하고 멋진 템플릿에 있는 util.js 공개 파일의 기본 효과는 웹페이지를 탐색할 때 "맨 위로 돌아가 댓글 쓰기"라는 특수 효과가 웹페이지에 나타나는 것입니다. . 이제 wumii(Wumi 플러그인 JS) 및 jiathis(공유 도구 JS)가 util.js 파일에 통합되었습니다.

JS代码优化技巧之通俗版

(중요하지 않은 JS는 페이지 하단에 배치했습니다)

물론 다른 웹사이트에서도 이 작업을 수행해야 합니다. 중요하지 않은 JS는 모두 페이지 하단에 배치하세요.

방법 2: JS 파일 병합

JS 병합은 프로세스 속도를 높이기 위해 HTTP 요청을 줄이고 서버에 대한 요청을 줄이는 것을 의미합니다. 원래 독립된 두 JS를 병합하려면 약간의 기술이 필요하지만 가장 간단한 방법을 알려드리겠습니다. :

어쨌든 먼저 A 파일을 B 파일에 직접 붙여넣으세요. 병합 후 웹 페이지에서 A 파일을 삭제하세요. 웹 페이지가 정상적으로 실행되면 일부 특수 효과가 실패해도 괜찮습니다. C 파일을 교체하십시오. 충돌하지 않는 JS 파일은 항상 두 개 있습니다.

예를 들어 내 블로그의 Baidu Ad Manager에는 기본적으로 6개의 HTTP 요청이 필요합니다. 타사 JS이므로 요청에 가장 빠른 시간은 234ms가 걸리고 6개의 요청에는 2가 걸립니다. 즉, 이 광고 관리자로 인해 웹페이지를 여는 데 2초가 추가로 소요됩니다.

JS代码优化技巧之通俗版

(JS의 두 번째 부분은 6개의 요청을 1로 바꿉니다)

공식 튜토리얼에 따라 JS를 병합한 후 6개의 광고 슬롯에 대한 광고 요청이 하나의 요청으로 병합되어 JS 요청 수가 크게 줄어들고 페이지 렌더링 차단이 효과적으로 줄어들며 광고 로딩 속도가 향상됩니다.

방법 3: JS 파일의 무게 감량

삼항 연산자, 개체 검색 감소 또는 JS를 간결하게 만드는 방법에 대해서는 "JS 체중 감량 도구"를 사용하지 않습니다. 일반적으로 이러한 도구는 JS 파일의 수백 줄의 코드를 한 줄로 압축하여 크기를 더 작게 만듭니다. 권장 도구: http://javascriptcompressor.com/ 또는 소프트웨어 버전(좋은 내결함성 효과)

빈 줄과 같은 문제로 인해 이러한 도구를 사용하면 JS 기능이 무효화되는 경우가 있습니다. 가장 쉬운 방법은 Dreamweaver를 사용하여 압축된 JS를 DW에 넣으면 자동으로 오류가 있다는 메시지가 표시됩니다. 오류가 발생한 줄을 바꾸거나 복원하세요.

마지막으로 네티즌의 개인적인 경험을 말씀드리겠습니다.

JS代码优化技巧之通俗版

시간이 지남에 따라 사이트가 천천히 성장하면 많은 문제를 발견하게 되는데, 그 중 하나는 사이트가 점점 더 부풀어 오르게 되어 실행 속도도 느려진다는 것입니다. 사이트를 최적화하기 위해 최선을 다하는 최적화가 매우 중요해졌습니다.

이러한 방법은 이해하기 쉽고 모든 사람에게 유용하길 바랍니다!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
如何做好Java代码的重构如何做好Java代码的重构Jun 15, 2023 pm 09:17 PM

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는