django MTV 静态文件js的添加方式,以及怎么优化js的加载

news2024/9/24 7:12:45

django MTV 静态文件js的添加方式,以及怎么优化js的加载
1:怎么添加js
2:怎么优化js的加载

django MTV 需要用到的js时,使用以下方式

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <script defer src="a.js"></script>  
	<script async src="{% static 'a.js' %}"></script>
	<script defer src="{ %static 'a.js' %}"></script>
</head>  
<body>  
{{ context }}  
</body>  
</html>

上面代码 不继承任何模板,也不继承 base.hmtl

js使用方式

插入js的方式1:

直接写 <script defer src="a.js"></script>
相当于访问后端 http://127.0.0.1:8000/a.js
因为这个[html]文件是在这个项目的[templates]文件夹中,如我把[a.js]文件也放在这个目录中,idea编辑器 会提示 允许写这个目录中的[a.js]文件。
但是,django不会把项目中的templates文件夹中的a.js文件进行映射

插入js的方式2:

直接写<script defer src="/static/a.js"></script>
相当于访问后端 http://127.0.0.1:8000/static/a.js
这时会出现2个状态
DEBUG=True  时,静态文件夹[static/a.js] 会被正常的获取
DEBUG=False 时,静态文件夹[static/a.js] 禁止获取      ---django不建议直接映射静态文件

插入js的方式3:

{% load static %}
<script defer src="{ %static 'a.js' %}"></script>
相当于访问后端 http://127.0.0.1:8000/static/a.js
DEBUG=True  时,django能够进行向浏览器发送 a.js
并且,
1:当a.js文件是在static文件夹中时,是能够被浏览器获取到的
2:当a.js文件不存在static文件夹中时,那么前端无法获取到该文件,并且返回404,就算把a.js文件放到[templates]文件夹中也不行
当然,
DEBUG=True  时,静态文件夹[static/a.js] 会被正常的获取
DEBUG=False 时,静态文件夹[static/a.js] 禁止获取      ---django不建议直接映射静态文件


这里加了 {% static 'a.js'%} 表示
Django使用静态模板标记,通过配置STATICFILES STORAGE为给定的相对路径构建URL。静态模板标签用于引用Django模板中的静态文件,如图像、JavaScript或CSS

一般都指向与manage.py相同等级路径中的static文件夹中

关于script中对js的设定执行时间节点

在这里插入图片描述

后端会按照html中的顺序,从第一行开始发送html文件中的代码给浏览器,直至最后一行

在浏览器接收到head 部分时, 
当浏览器接收到 <script src="a.js"></script>  这行后,会即刻去下载a.js,
1:普通的情况下: 浏览器会先去下载完a.js之后才去继续接收head的后面body部分,并且当下载完a.js后会即刻执行a.js的逻辑,再继续下载body部分。
2:异步情况:a.js 与body 部分同时下载


那么这个异步下载中会出现以下状况:

2.1:a.js 与body 部分同时下载,浏览器先接收到的body部分的一些,或许是前10行,后面还有50行未接收,
这时:浏览器会马上渲染这个10行body部分
当接收到20行body部分时,这时a.js也接收完了,即刻执行a.js中的逻辑

2.2:a.js 与body 部分同时下载,body部分边接收,边渲染,直到body的接收完成,才允许a.js对body进行操作



1<script src="a.js"></script>
2.1<script ansyc src="a.js"></script>
2.2<script defer src="a.js"></script>
  

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

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

相关文章

NACOS在Windows和Linux下的安装教程

目录 1、Windows安装 1.1、下载安装包 1.2、解压 1.3、端口配置 1.4、启动 1.5、访问 2、Linux安装 2.1、安装JDK 2.2、上传安装包 2.3、解压 2.4、端口配置 2.5、启动 3、Nacos的依赖 1、Windows安装 开发阶段采用单机安装即可。 1.1、下载安装包 在Nacos的Git…

LeetCode 面试题 08.09.括号

括号。设计一种算法&#xff0c;打印n对括号的所有合法的&#xff08;例如&#xff0c;开闭一一对应&#xff09;组合。 说明&#xff1a;解集不能包含重复的子集。 例如&#xff0c;给出 n 3&#xff0c;生成结果为&#xff1a; [ “((()))”, “(()())”, “(())()”, “…

【多模态融合】CRN 多视角相机与Radar融合 实现3D检测、目标跟踪、BEV分割 ICCV2023

前言 本文介绍使用雷达与多视角相机融合&#xff0c;实现3D目标检测、3D目标跟踪、道路环境BEV分割&#xff0c;它是来自ICCV2023的。 会讲解论文整体思路、输入数据分析、模型框架、设计理念、损失函数等。 论文地址&#xff1a;CRN: Camera Radar Net for Accurate, Robus…

重读 Java 设计模式: 探索经典之道与 Spring 框架的设计

写在开头 记得大学刚毕业那会儿&#xff0c;想学点东西&#xff0c;于是拿出了《Head First 设计模式》这本书&#xff0c;就开始了阅读&#xff0c;我曾对这些模式感到晦涩难懂。然而&#xff0c;随着工作岁月的增长&#xff0c;我逐渐领悟到设计模式的价值&#xff0c;尤其是…

鸿蒙实战项目开发:【短信服务】

概述 本示例展示了电话服务中发送短信的功能。 样例展示 涉及OpenHarmony技术特性 网络通信 难度级别 中级 基础信息 使用ohos.telephony.sms接口展示了电话服务中发送短信的功能。 效果预览 新建联系人首页短信页 使用说明&#xff1a; 首页点击创建联系人&am…

智能驾驶及相关零部件摄像头毫米波雷达激光雷达和芯片渗透率

一、总体情况 乘联会数据显示&#xff0c;1月1日至1月28日&#xff0c;全国乘用车厂商新能源车批发销量为56.7万辆&#xff0c;同比增长76%&#xff0c;环比下降38%&#xff1b;国内新能源车市场零售销量为59.6万辆&#xff0c;同比增长92%&#xff0c;环比下降24%。 二、销…

如何在手机上中恢复已删除的照片

市场上有大量用于恢复手机已删除照片的应用程序。您可以尝试任何合法的应用程序来恢复意外删除的视频。其中一些应用程序包括 奇客数据恢复、Disk Drill等。 恢复已删除的 Android 照片 如果您不小心从 Android 设备中删除了任何重要视频&#xff0c;无需惊慌。您可以按照这些…

java基础题库详解

目录 1 JDK和JRE有什么区别&#xff1f; 1.1、JRE 1.2、JDK 2、和equals的区别是什么? 3、比较 4、装箱&#xff0c;拆箱 4.1、什么是装箱&#xff1f;什么是拆箱&#xff1f; 4.2、装箱和拆箱的执行过程&#xff1f; 4.3、常见问题 5、hashCode()相同&#xff0c;e…

【ESP32 IDF】key按键与EXTI中断

文章目录 前言一、按键的使用1.1 按键的简介1.2 读取按键的高低电平1.3 读取按键具体代码 二、中断二、EXIT外部中断2.1 EXIT外部中断简介2.2 外部中断基础知识2.3 设置外部中断注册外部中断服务函数设置触发方式添加中断函数 2.4 示例代码 总结 前言 在嵌入式系统开发中&…

【基于Matlab GUI的语音降噪系统设计】

客户不要了&#xff0c;挂网上吧&#xff0c;有需要自行下载~ 赚点辛苦费 ** 功能实现: ** 1、导入音频文件/录入音频&#xff0c;能实现播放功能。 2、对导入/录入的音频信号进行时域和频域分析&#xff0c;并制图。 3、可在导入/录入的音频信号上加入噪声&#xff0c;并能够播…

《异常检测——从经典算法到深度学习》26 Time-LLM:基于大语言模型的时间序列预测

《异常检测——从经典算法到深度学习》 0 概论1 基于隔离森林的异常检测算法 2 基于LOF的异常检测算法3 基于One-Class SVM的异常检测算法4 基于高斯概率密度异常检测算法5 Opprentice——异常检测经典算法最终篇6 基于重构概率的 VAE 异常检测7 基于条件VAE异常检测8 Donut: …

使用ES检索PDF或Word等格式文件方案

#大数据/ES #经验 #方案架构 ES检索PDF/Word等格式文件方案 插件安装 ES有文档预处理插件&#xff0c;但是7.x版本默认发版包不包含这个ingest attachment plugin 。 通过摄取附件插件&#xff0c;Elasticsearch 可以使用 Apache 文本提取库 Tika 提取常见格式的文件附件&a…

go 命令行框架cobra

go 命令行框架cobra go 拉取依赖包go get github.com/spf13/cobra 认识spf13/cobra-cli. cobra 命令行框架在golang中的地位也算得上是大明星级别。像k8s,docker都有使用这个框架构建自己命令行这块的功能. 最最最简单的开始----使用命令行工具cobra-cli来初始化你的demo c…

模糊搜索小案例

C#窗体实现数据录入与模糊搜索小案例 记录一下 主要代码 private void button1_Click(object sender, EventArgs e){string name textBox1.Text;string hometown textBox4.Text;string school textBox6.Text;string sex textBox5.Text;string lat textBox3.Text;string …

STM32 (2)

1.stm32编程模型 将C语言程序烧录到芯片中会存储在单片机的flsah存储器中&#xff0c;给芯片上电后&#xff0c;Flash中的程序会逐条进入到CPU中去执行&#xff0c;进而CPU去控制各种模块&#xff08;即外设&#xff09;去实现各种功能。 2.寄存器和寄存器编程 CPU通过控制其…

图像处理ASIC设计方法 笔记6 数据拼接和帧格式校正

第四章大模板卷积ASIC设计方案 P80 实时图SPRM 数据位宽64bit&#xff0c;4个SPRAM&#xff0c;同时得到4行数据 绘制卷积芯片数据路径图&#xff0c;卷积芯片内部模块图 根据这个图&#xff0c;本书后续对各个模块都进行介绍。 P81 第一个模块 图像输入前端FIFO 学习图像处…

【Linux】软件管理yum | 编辑器vim | vim插件安装

目录 1. Linux软件管理yum 1.1 什么是软件包 1.2 查看软件包 1.3 如何安装软件 1.4 如何卸载软件 2. Linux编辑器vim 2.1 vim的基本概念 2.2 vim的基本操作 2.3 vim正常模式命令集 2.4 vim末行模式命令集 2.5 简单vim配置 2.6 插件安装 1. Vim-Plug 3. coc.nvim …

如何保护服务器的安全

互联网的迅速发展&#xff0c;让很多企业都很重视网络技术的使用&#xff0c;但是网络的传播速度比较快&#xff0c;同时容易造成数据、隐私方面的泄露现在每个企业基本有自己的服务器。有几点需要注意&#xff0c;可以参考&#xff1a; 1.基础密码安全 最基本的安全就是密码安…

蜻蜓FM语音下载(mediadown)

一、介绍 蜻蜓FM语音下载&#xff08;mediadown&#xff09;&#xff0c;能够帮助你下载蜻蜓FM音频节目。如果你是蜻蜓FM会员&#xff0c;它还能帮你下载会员节目。 二、下载地址 本站下载&#xff1a;蜻蜓FM语音下载&#xff08;mediadown&#xff09; 百度网盘下载&#…

嵌入式Qt 对话框及其类型 QDialog

一.对话框的概念 对话框是与用户进行简短交互的顶层窗口。 QDialog是Qt中所有对话框窗口的基类。 QDialog继承与QWidfet是一种容器类型的组件。 QDialog的意义&#xff1a; QDialog作为一种专业的交互窗口而存在。 QDialog不能作为子部部件嵌入其他容器中。 QDialog是定制…