Flutter Web Performansını Artırmak: Webview Optimizasyon Teknikleri

1import 'package:webview_flutter/webview_flutter.dart';
2
3class OptimizedWebView extends StatefulWidget {
4@override
5_OptimizedWebViewState createState() => _OptimizedWebViewState();
6}
7
8class _OptimizedWebViewState extends State<OptimizedWebView> {
9late WebViewController _controller;
10
11@override
12void initState() {
13super.initState();
14_initializeWebView();
15}
16
17void _initializeWebView() {
18_controller = WebViewController()..setJavaScriptMode(JavaScriptMode.unrestricted)..setBackgroundColor(const Color(0xffffffff))..setNavigationDelegate(
19NavigationDelegate(
20onPageStarted: (String url) {
21print('Sayfa yükleniyor: $url');
22},
23onPageFinished: (String url) {
24print('Sayfa yüklendi: $url');
25},
26),
27);
28}
29
30@override
31Widget build(BuildContext context) {
32return WebViewWidget(controller: _controller);
33}
34}

1// HTML içeriğinde resim ve iframe'ler için
2const htmlContent = '''
3<html>
4<body>
5<img src="image1.jpg" loading="lazy" />
6<iframe src="content.html" loading="lazy"></iframe>
7<script>
8// DOM güncellemelerini batch yap
9const fragment = document.createDocumentFragment();
10for(let i = 0; i < 100; i++) {
11const el = document.createElement('div');
12el.textContent = 'Item ' + i;
13fragment.appendChild(el);
14}
15document.body.appendChild(fragment);
16</script>
17</body>
18</html>
19''';
20
21_controller.loadHtmlString(htmlContent);

1// Webview'da performans izleme
2_controller.runJavaScript('''
3const observer = new PerformanceObserver((list) => {
4for (const entry of list.getEntries()) {
5console.log('Render süresi: ' + entry.duration + 'ms');
6}
7});
8observer.observe({entryTypes: ['measure', 'navigation']});
9''');