正文

Flutter中使用WebView加载html页面时下载js

cat2007
cat2007 V管理员 /49阅读/0评论
0225

1：WebView 加载HTML页面的资源下载机制：

流程表达方式图1:
流程表达方式图2:

详细说明

  1. 第一阶段：获取HTML文档

    1a. Web视图组件发起HTTP/HTTPS请求

    1b. 请求包含必要的头信息（Headers）

    1c. 服务器处理请求并返回HTML内容

  2. 第二阶段：HTML解析

    2a. 解析HTML文档的DOM结构

    2b. 识别所有外部资源引用：

  1. 第三阶段：资源加载

    3a. 缓存检查：

  // 伪代码示例
  FutureloadResource(String url) async {if (await cache.exists(url)) {  final cached = await cache.get(url);
      if (!cached.isExpired()) {return cached;
      }
    }
    return await downloadAndCache(url);
  }

3b. 资源下载：

CSS文件优先下载（阻塞渲染）

JavaScript文件可能延迟加载

图片等资源按需加载

3c. 缓存存储：

  // 缓存目录结构
  /data/data/[应用包名]/cache/WebView/
  ├── Cache/
  │   ├── css/
  │   ├── js/
  │   └── images/
  └── index.db  // 缓存索引数据库

  1. 第四阶段：页面渲染

    4a. 样式计算：应用CSS规则

    4b. 布局计算：确定元素位置和大小

    4c. JavaScript执行：

  // JavaScript执行顺序示例
  document.addEventListener('DOMContentLoaded', () => {// DOM加载完成后执行
  });
  window.onload = () => {// 所有资源加载完成后执行
  };

  • 4d. 最终渲染：显示页面内容

    • 5.2. 缓存控制：

         webViewController.setWebViewClient(
     shouldInterceptRequest: (request) {   // 自定义缓存策略
     }
   );

    • 6.1. CSS文件会阻塞渲染过程

    • 6.2. JavaScript可能阻塞解析过程

    • 6.3. 图片等资源不会阻塞页面加载

    • 6.4. 缓存策略遵循HTTP标准

    • 6.5. 需要处理离线状态

      这样的资源加载机制确保了：

      高效的资源利用

      更快的页面加载速度

      更好的离线体验

      减少服务器压力

      2 资源下载和使用流程：

      3资源存储位置：

      在Android上：

      /data/data/[应用包名]/cache/WebView/
└── Cache/
    ├── f_000001 (缓存文件)
    ├── f_000002
    └── index (缓存索引)

      在iOS上：

      /Library/Caches/[应用Bundle ID]/WebKit/
└── WebsiteData/
    ├── ResourceCache/
    └── LocalStorage/

      4:详细流程说明：

      5 资源管理策略：

      /// Django后台资源管理器中的资源管理策略
class DjangoAdminResources {// ... 现有代码 ...
    /// 资源加载优先级
    static const MapresourcePriority = {'css': 1,  // CSS优先加载
        'js': 2    // JS后加载
    };
    /// 判断资源类型
    static String getResourceType(String url) {if (url.endsWith('.css')) return 'css';
        if (url.endsWith('.js')) return 'js';
        return 'other';
    }
    /// 获取资源加载优先级
    static int getResourcePriority(String url) {String type = getResourceType(url);
        return resourcePriority[type] ?? 3;
    }
}

      6注意事项：

      这样的资源加载机制确保了：

    • CSS文件会阻塞渲染，优先下载

    • JS文件可能会阻塞解析，根据加载方式决定

    • 资源缓存遵循HTTP缓存规则

    • WebView会自动管理缓存空间

    • 可以通过WebView设置控制缓存行为

      7. 建议优化：

    • 高效的资源利用

    • 更快的页面加载

    • 更好的离线体验

    • 减少服务器压力

      在flutter中怎么称呼这个WebView?

      专业技术文档中的称呼：--内嵌浏览器组件 --网页容器组件  --网页视图组件  --Web视图控件  
功能描述性称呼：     --应用内浏览器   --内嵌网页组件  --网页渲染器   --网页显示组件
场景性称呼：        --内嵌浏览器     --混合视图      --应用内网页  
特性描述性称呼：
混合视图组件（强调原生+网页混合特性）
网页承载组件（强调承载网页的功能）
网页交互组件（强调与网页的交互能力）
网页嵌入组件（强调嵌入到应用中的特性）

         mindmap
    WebView中文称呼
        功能性称呼
            网页浏览组件
            网页显示控件
            网页渲染组件
        技术性称呼
            Web视图组件
            混合渲染控件
            网页容器组件
        场景性称呼
            内嵌浏览器
            应用内网页
            混合视图
        特性性称呼
            网页承载器
            网页交互器
            网页渲染器

                                                               

    • 5.3. 资源优先级：

    • 5.1. 预加载关键资源：

         webViewController.loadUrl(url, headers: { 'Purpose': 'prefetch'
   });

      1. 注意事项

      1. 预加载关键资源

      2. 使用资源压缩

      3. 实现离线缓存策略

      4. 监控资源加载性能

      5. 实现资源加载失败重试

      1. 性能优化建议