ios wkwebview,监控H5页面css,js,image资源文件的加载时间与页面总加载时间

在WKWebView的代理方法didFinishNavigation中,通过JavaScript获取性能.timing对象和资源.getEntriesByType(resource),过滤出CSS,JS,图片资源,记录其加载时间并输出。此方法能详细监测页面及资源的加载性能。

由于公司提了一的新的任务,需要在web页面监控css,js,image的加载时间,研究一下,下面是可以实现监控的。

在wkwebview代理方法didFinishNavigation中添加以下代码

-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{

NSString *script = @"var result = {\

                            resources: [],\

                            duration: null\

                    };\

                    var timing = performance.timing;\

                    var pageloadtime = timing.loadEventEnd - timing.navigationStart;\

                    var resources = performance.getEn

### 优化 H5 页面在微信浏览器中的加载速度 微信浏览器作为移动端的重要访问入口,其加载性能直接影响用户体验。为提升 H5 页面在微信浏览器中的加载速度,可以从资源优化、加载策略、缓存机制、代码结构等多方面入手。 #### 1. 减少首屏加载资源体积 首屏加载内容应尽可能精简,延迟加载非关键资源。例如,可以将不必要的 JavaScriptCSS 文件延迟加载,优先渲染核心内容。避免在页面头部引入大型框架(如 jQuery),部分场景下可使用原生 JavaScript 替代,以减少加载负担[^1]。 示例:延迟加载非关键脚本 ```html <script> window.addEventListener('load', function () { var script = document.createElement('script'); script.src = 'js/optional-feature.js'; document.body.appendChild(script); }); </script> ``` #### 2. 合理使用浏览器缓存机制 微信浏览器内置缓存机制,合理设置 HTTP 缓存头(如 `Cache-Control`、`ETag`)能有效减少重复请求和加载时间。静态资源(如图片、CSSJS)应设置较长的缓存时间,动态内容则应设置短缓存或不缓存[^2]。 示例:设置 HTTP 缓存头(Nginx 配置) ```nginx location ~ \.(js|css|png|jpg|gif)$ { expires 7d; add_header Cache-Control "public"; } ``` #### 3. 优化 HTML 结构脚本加载顺序 将 JavaScript 脚本尽量放在页面底部或使用 `defer`、`async` 属性异步加载,避免阻塞页面渲染。同时,精简 HTML 中不必要的 `meta` 标签和注释,有助于提升页面解析效率。 示例:异步加载脚本 ```html <script src="js/main.js" async></script> ``` #### 4. 使用 CDN 加速静态资源 将静态资源部署在 CDN 上,利用就近访问的优势加快资源加载速度。阿里云、腾讯云、百度智能云等平台均提供 CDN 服务,可有效降低网络延迟,提升加载性能。 #### 5. 图片多媒体资源优化 使用 WebP 格式图片替代 JPEG/PNG,压缩图片大小。对于音频和视频资源,应避免自动播放,特别是在 iOS 设备上,Safari 浏览器禁止音频自动播放[^4]。可通过用户点击事件触发播放逻辑。 示例:延迟加载图片 ```html <img data-src="images/large-image.jpg" alt="延迟加载图片" class="lazyload"> <script> document.addEventListener("DOMContentLoaded", function () { var images = document.querySelectorAll(".lazyload"); images.forEach(function (img) { img.src = img.dataset.src; }); }); </script> ``` #### 6. 使用服务端 GZIP 压缩 启用 GZIP 压缩可显著减少传输数据量,尤其是 HTML、CSSJS 文件。服务器端配置 GZIP 后,浏览器会自动解压内容,对用户无感知但能显著提升加载速度。 示例:GZIP 压缩配置(Nginx) ```nginx gzip on; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript; ``` #### 7. 利用前端框架的按需加载能力 若使用 uni-app 等跨平台框架开发 H5 页面,应合理划分模块,使用按需加载策略,避免一次性加载全部资源。通过模块化设计和异步加载机制,可有效降低首屏加载时间。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值