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

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

1:怎么添加js

2:怎么优化js的加载

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

html 复制代码
<!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:

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

插入js的方式2:

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

插入js的方式3:

html 复制代码
{% load static %}
<script defer src="{ %static 'a.js' %}"></script>
相当于访问后端 http://127.0.0.1:8000/static/a.js
python 复制代码
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的设定执行时间节点

c 复制代码
后端会按照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>
  
相关推荐
秃头佛爷1 小时前
Python学习大纲总结及注意事项
开发语言·python·学习
待磨的钝刨1 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
深度学习lover2 小时前
<项目代码>YOLOv8 苹果腐烂识别<目标检测>
人工智能·python·yolo·目标检测·计算机视觉·苹果腐烂识别
API快乐传递者3 小时前
淘宝反爬虫机制的主要手段有哪些?
爬虫·python
阡之尘埃5 小时前
Python数据分析案例61——信贷风控评分卡模型(A卡)(scorecardpy 全面解析)
人工智能·python·机器学习·数据分析·智能风控·信贷风控
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
丕羽8 小时前
【Pytorch】基本语法
人工智能·pytorch·python
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
bryant_meng8 小时前
【python】Distribution
开发语言·python·分布函数·常用分布