高性能JavaScript

管理浏览器中的JavaScript代码是个棘手的问题,因为代码执行阻塞了其他浏览器处理过程,注入用户界面回执。每次遇到 < script > 便签,页面必须停下来等待代码下载(如果是外部的)并执行,然后再继续处理页面其他部分。但是,有几种方法可以减少JavaScript对性能的影响:

1、将所有< script > 标签放置在页面的底部,紧靠body关闭标签< /body>的上方。此方法可以保证页面运行之前完成解析。

2、将脚本成组打包。页面的< script > 标签越少,页面的加载速度就越快,响应也更加迅速。不论外部脚本文件还是内联代码都是如此。

几种方法可以使用非阻塞方式下载JavaScript:

1、为< script >标签添加defer属性(有浏览器兼容问题)
补充:defer属性指明元素中所包含的脚本不打算修改DOM,因此代码可以稍后执行。

2、动态创建< script >元素,用它下载并执行代码

3、用xhr对象下载代码,并注入到页面中

小知识:defer和async区别

defer:加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。推迟的脚本原则上按照它们被列出的次序执行。

async:加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。异步脚本不能保证按照它们在页面中出现的次序执行。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/61432.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于战争策略算法优化的BP神经网络(预测应用) - 附代码

基于战争策略算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于战争策略算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.战争策略优化BP神经网络2.1 BP神经网络参数设置2.2 战争策略算法应用 4.测试结果&#xff1a;5…

【Centos8_配置单节点伪分布式Spark环境】

安装centos8 jdk部署伪分布式spark环境 安装Centos8 环境下的JDK 下载jdk linux版本 下载链接&#xff1a; jdk-8u381-linux-x64.tar.gz 将该文件上传到Centos8 主机 部署配置jdk&#xff08;java8&#xff09; # 解压到指定路径 [lhangtigerkeen Downloads]$ sudo tar …

【Apollo学习笔记】——规划模块TASK之SPEED_BOUNDS_PRIORI_DECIDER

文章目录 前言SPEED_BOUNDS_PRIORI_DECIDER功能简介SPEED_BOUNDS_PRIORI_DECIDER相关配置SPEED_BOUNDS_PRIORI_DECIDER流程将障碍物映射到ST图中ComputeSTBoundary(PathDecision* path_decision)ComputeSTBoundary(Obstacle* obstacle)GetOverlapBoundaryPointsComputeSTBounda…

Docker搭建私有仓库并迁移

目录 方案 A、B机器安装docker 设置阿里云镜像源 安装 Docker-CE并设置为开机自动启动 A机器准备数据 拷贝数据 B机器运行redis、mysql镜像 重启docker服务 方案 准备两台机器&#xff1a;A机器&#xff08;可以连接外网&#xff09;&#xff0c;B机器&#xff08;内网机器…

图床项目进度(二)——动态酷炫首页

前言&#xff1a; 前面的文章我不是说我简单copy了站友的一个登录页吗&#xff0c;我感觉还是太单调了&#xff0c;想加一个好看的背景。 但是我前端的水平哪里够啊&#xff0c;于是在网上找了找制作动态背景的插件。 效果如下图。 如何使用 这个插件是particles.js 安装…

使用图集SpriteAtlas时,根据其中的Sprite,给 RawImage 设置 texture 的两种方法

当使用图集 SpriteAtlas 时&#xff0c; 从中获取的 Sprite 的 texture 是图集中整张图片&#xff0c;为了给 RawImage 设置 Texture&#xff0c;有两种方式&#xff1a; 方式1&#xff1a;使用以下扩展函数&#xff0c;其原理是给 RawImage 设置整张纹理&#xff0c;然后设置…

C语言入门篇(九)

前言   本篇分享的是部分操作符的概念与用法&#xff0c;从经典例题入手&#xff0c;带你快速了解和掌握。   收录专栏&#xff1a;浅谈C语言 操作符详解下 10. 逗号表达式11. 下标引用、函数调用和结构成员12. 表达式求值12.1 隐士类型转换12.2 算术转换12.3 操作符的属性…

多项式求逆

已知 F F F&#xff0c;求 G G G 考虑倍增 F ( x ) ∗ H ( x ) ≡ 1 ( m o d x n / 2 ) F(x) * H(x) \equiv 1 \pmod{x^{n/2}} F(x)∗H(x)≡1(modxn/2) F ( x ) ∗ G ( x ) ≡ 1 ( m o d x n / 2 ) F(x) * G(x) \equiv 1 \pmod{x^{n/2}} F(x)∗G(x)≡1(modxn/2) 假设 H H…

最大子数组和【贪心算法】

最大子数组和 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 class Solution {public int maxSubArray(int[] nums) {//记录最大结果&…

Linux土遁术之监测监测进程打开文件

分析问题过程中&#xff0c;追踪进程打开的文件可以在许多不同情况下有用&#xff0c;体现在以下几个方面&#xff1a; 故障排除和调试&#xff1a; 当程序出现问题、崩溃或异常行为时&#xff0c;追踪进程打开的文件可以帮助您找出问题的根本原因。这有助于快速定位错误&…

基于Spring Boot的住院病人管理系统设计与实现(Java+spring boot+MySQL)

获取源码或者论文请私信博主 演示视频&#xff1a; 基于Spring Boot的住院病人管理系统设计与实现&#xff08;Javaspring bootMySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java spring…

前列腺小体外泄蛋白(PSEP)——博迈伦

前列腺小体外泄蛋白&#xff08;Prostate-specific extracellular vesicle protein&#xff0c;简称PSEP&#xff09;是一种在前列腺细胞分泌的小体外囊泡中出现的蛋白质。小体外泌物指的是由细胞分泌的膜包裹小体&#xff0c;其中包含多种生物活性物质&#xff0c;如蛋白质、R…

springboot aop实现接口防重复操作

一、前言 有时在项目开发中某些接口逻辑比较复杂&#xff0c;响应时间长&#xff0c;那么可能导致重复提交问题。 二、如何解决 1.先定义一个防重复提交的注解。 import java.lang.annotation.*;Inherited Target(ElementType.METHOD) Retention(RetentionPolicy.RUNTIME) Do…

vue三级市区联动

默认返回值格式&#xff1a;all:code、name都返回 name:只返回name code:只返回code&#xff0c;level&#xff1a;可设置显示层级 1&#xff1a; 省 2&#xff1a; 省、市 3&#xff1a; 省、市、区 v-model 默认值 可以是 name: [ "天津市", "天津市",…

Debian 30 周年,生日快乐!

导读近日是 Debian 日&#xff0c;也是由伊恩-默多克&#xff08;Ian Murdock&#xff09;创立的 Debian GNU/Linux 通用操作系统和社区支持的 Debian 项目 30 周年纪念日。 不管你信不信&#xff0c;从已故的伊恩-默多克于 1993 年 8 月 16 日宣布成立 Debian 项目&#xff0c…

C# 练习题

26. Enum(枚举) /*枚举是一组命名整型常量。枚举类型是使用 enum 关键字声明的。C# 枚举是值类型。换句话说&#xff0c;枚举包含自己的值&#xff0c;且不能继承或传递继承。 */using System;public class EnumTest {enum Day { Sun, Mon, Tue, Wed, Thu, Fri, Sat };static…

CentOS 7 Nacos 设置开机自动重启

一、说明 Nacos如果是手动启动的话&#xff0c;在服务器宕机或者重启后&#xff0c;没有自动运行&#xff0c;影响很多业务系统&#xff0c;需要每次手动执行命令 startup.sh -m standalone&#xff0c;才能启动 Nacos 服务&#xff0c;不能像docker服务一样&#xff0c;使用 …

博客系统后端(项目系列2)

目录 前言 &#xff1a; 1.准备工作 1.1创建项目 1.2引入依赖 1.3创建必要的目录 2.数据库设计 2.1博客数据 2.2用户数据 3.封装数据库 3.1封装数据库的连接操作 3.2创建两个表对应的实体类 3.3封装一些必要的增删改查操作 4.前后端交互逻辑的实现 4.1博客列表页 …

【ES】elasticsearch8.3.3

这里仅实践操作并根据实际问题进行记录笔记。 运行 ES8 我们需要在自己的电脑上安装好 Docker Desktop。接着我们运行如下的命令&#xff1a;出现两个异常&#xff0c;一个是需要使用winpty因为我使用win的docker desktop&#xff0c;另外一个问题是docker启动elasticsearchE…

跨屏无界 | ZlongGames 携手 Google Play Games 打造无缝游戏体验

一款经典游戏&#xff0c;会在时间的沉淀中被每一代玩家所怀念&#xff0c;经久不衰。对于紫龙游戏来讲&#xff0c;他们就是这样一群怀揣着创作出经典游戏的初心而聚集在一起的团队&#xff0c;致力于研发出被广大玩家喜爱的作品。 从 2015 年团队成立&#xff0c;到 2019 年走…