Django静态文件偶发Failed to load resource加载失败问题咨询

可能的原因分析 #

1. 依赖加载时机不一致
   你当前的初始化代码很可能在jquery.dataTables.min.js加载完成前就执行了。开发模式下Django的runserver是单线程处理请求，静态资源的加载顺序受磁盘IO、并发请求阻塞的影响会有波动，刚好DataTable库加载慢于初始化代码时就会报错，加载快时就正常，符合你偶发报错的特征。
2. 存在重复的jQuery引入
   如果父模板、子模板或者页面引入的其他片段里重复加载了jQuery，会出现以下情况：第一个jQuery加载完成后，DataTable正常挂载到这个jQuery实例上；第二个jQuery加载完成后会覆盖全局的$变量，导致新的$上没有DataTable方法。两次jQuery的加载速度随机，所以报错偶发。
3. 开发环境静态服务不稳定
   Django自带的静态文件托管服务仅用于开发调试，性能和稳定性都很低，偶尔会出现静态文件加载不完整、超时的情况，导致对应的库没有正常挂载到全局变量。

解决办法 #

1. 保证初始化代码在所有依赖加载完成后执行
   给所有<script>标签加上defer属性，确保脚本严格按照引入顺序执行，同时把DataTable初始化逻辑包裹在DOM加载完成的回调里：

document.addEventListener('DOMContentLoaded', function() {
  $('#table').DataTable({"paging": true});
})

2. 排查所有模板的jQuery引入
   检查父模板、include引入的公共片段、业务模板里的脚本，确保jQuery只引入一次，位置在所有依赖jQuery的库之前。
3. 优化开发环境静态资源缓存
   在settings.py中添加以下配置，给静态资源增加本地缓存，避免重复加载导致的IO卡顿：

if DEBUG:
    from django.views.static import serve
    from functools import wraps
    from django.http import HttpResponseNotModified

    def cached_serve(func):
        @wraps(func)
        def wrapper(request, path, document_root=None, show_indexes=False):
            if 'If-Modified-Since' in request.headers:
                return HttpResponseNotModified()
            response = func(request, path, document_root, show_indexes)
            response['Cache-Control'] = 'max-age=3600'
            return response
        return wrapper

    urlpatterns += [
        path('static/<path:path>', cached_serve(serve), {'document_root': STATICFILES_DIRS[0]}),
    ]

4. 生产环境用专业的静态资源服务
   该类问题基本不会在生产环境出现，生产环境用Nginx托管静态文件，性能和稳定性远高于Django自带的服务。

内容的提问来源于stack exchange，提问作者Satya Prakash