পেজের Resource Requests এবং Timing বের করা

PhantomJS একটি headless WebKit-based ব্রাউজার, যা JavaScript চালানোর ক্ষমতা সহ একটি full-fledged browser প্রদান করে, তবে এটি কোনো UI ছাড়াই কাজ করে। PhantomJS এর মাধ্যমে আপনি ওয়েব পেজগুলির স্ক্রিপ্টিং, অটোমেশন, টেস্টিং, এবং স্ক্রিনশট, পিডিএফ বা অন্যান্য ফরম্যাটে পেজগুলি রেন্ডার করতে পারেন।

PhantomJS দিয়ে পেজের Resource Requests এবং Timing বের করা:

PhantomJS আপনাকে network activity, resource requests, এবং timing সম্পর্কিত ডেটা সংগ্রহ করতে সহায়তা করে। আপনি PhantomJS API ব্যবহার করে এই ডেটা দেখতে এবং লগ করতে পারেন। Resource requests এবং timing বের করার জন্য PhantomJS-এর onResourceRequested এবং onResourceReceived ইভেন্টগুলো ব্যবহার করা হয়।

1. PhantomJS দিয়ে Resource Requests বের করা:

PhantomJS স্ক্রিপ্টে onResourceRequested এবং onResourceReceived ইভেন্ট ব্যবহার করে আপনি ওয়েব পেজে পাঠানো রিসোর্সগুলির তথ্য সংগ্রহ করতে পারেন, যেমন কোন রিসোর্স কখন রিকোয়েস্ট হয়েছে, তার টাইপ, স্ট্যাটাস কোড ইত্যাদি।

Example: Capture Resource Requests and Timing:

var page = require('webpage').create();
var url = 'http://example.com';  // Set your URL

// Track resource requests
page.onResourceRequested = function(requestData, networkRequest) {
    console.log('Requesting ' + requestData.url);
};

// Track resource responses
page.onResourceReceived = function(response) {
    console.log('Received ' + response.url + ' with status: ' + response.status);
};

// Track the time taken to load the page
page.onLoadFinished = function(status) {
    if (status === "success") {
        console.log('Page loaded successfully.');
        var resources = page.resources;
        for (var i = 0; i < resources.length; i++) {
            var resource = resources[i];
            console.log('Resource URL: ' + resource.url);
            console.log('Type: ' + resource.type);
            console.log('Status: ' + resource.status);
            console.log('Time taken: ' + resource.time + ' ms');
        }
    } else {
        console.log('Page loading failed.');
    }
};

// Open the page and start capturing
page.open(url, function(status) {
    if (status === "success") {
        console.log("Page opened successfully.");
    } else {
        console.log("Failed to open page.");
    }
});

Explanation:

1. onResourceRequested: এই ইভেন্টটি তখন ট্রিগার হয় যখন কোনো রিসোর্স (যেমন: CSS, JS, image, font) লোড হওয়ার জন্য রিকোয়েস্ট পাঠানো হয়। এতে আপনি রিসোর্সের URL, টাইপ, ইত্যাদি লগ করতে পারেন।
2. onResourceReceived: এই ইভেন্টটি রিসোর্স লোড হয়ে যাওয়ার পর ট্রিগার হয়, এবং এর মাধ্যমে আপনি রিসোর্সের স্ট্যাটাস কোড, টাইমিং এবং লোডের বিস্তারিত দেখতে পারবেন।
3. onLoadFinished: এই ইভেন্টে, আপনি পুরো পেজের লোডের পরের স্ট্যাটাস এবং সম্পন্ন হওয়া রিসোর্সের তথ্য দেখ सकते।

2. Resource Timing (Page Load Time):

PhantomJS আপনাকে পেজ লোডের time এবং resource timing জানাতে সক্ষম করে, যেটি ওয়েব পেজের লোডিং স্পিড এবং কনটেন্ট রেন্ডারিং এর জন্য খুবই গুরুত্বপূর্ণ। আপনি performance data বের করার জন্য Navigation Timing API বা resource timing API ব্যবহার করতে পারেন।

Example: Capture Performance Timing:

var page = require('webpage').create();

// Open the page
page.open('http://example.com', function(status) {
    if (status === "success") {
        // Getting page load performance timing
        var timings = page.evaluate(function() {
            return {
                navigationStart: window.performance.timing.navigationStart,
                domContentLoaded: window.performance.timing.domContentLoadedEventEnd,
                loadEventEnd: window.performance.timing.loadEventEnd
            };
        });

        console.log('Navigation Start: ' + timings.navigationStart);
        console.log('DOM Content Loaded: ' + timings.domContentLoaded);
        console.log('Load Event End: ' + timings.loadEventEnd);
        console.log('Page Load Time: ' + (timings.loadEventEnd - timings.navigationStart) + ' ms');
    } else {
        console.log("Failed to load the page");
    }

    phantom.exit();
});

Explanation:

1. window.performance.timing: এই API ব্যবহৃত হয়েছে পেজ লোডের বিস্তারিত সময় পরিমাপ করার জন্য।
   • navigationStart: পেজ লোডের শুরু সময়।
   • domContentLoaded: যখন DOM কনটেন্ট পুরোপুরি লোড হয়ে যায়।
   • loadEventEnd: যখন পুরো পেজ সম্পূর্ণ লোড হয়।

এগুলো থেকে আপনি পেজের লোড টাইম, DOM কনটেন্ট লোডের সময়, এবং সম্পূর্ণ লোডিং সময় বের করতে পারবেন।

3. Full Example to Capture All Resources Timing:

var page = require('webpage').create();
var url = 'http://example.com';

page.onResourceRequested = function(requestData) {
    console.log('Requesting ' + requestData.url);
};

page.onResourceReceived = function(response) {
    console.log('Received: ' + response.url);
    console.log('Status: ' + response.status);
    console.log('Time: ' + response.time + ' ms');
};

// Capture page load timing
page.onLoadFinished = function(status) {
    if (status === "success") {
        var performanceData = page.evaluate(function() {
            return {
                navigationStart: window.performance.timing.navigationStart,
                domContentLoaded: window.performance.timing.domContentLoadedEventEnd,
                loadEventEnd: window.performance.timing.loadEventEnd
            };
        });

        console.log('Navigation Start: ' + performanceData.navigationStart);
        console.log('DOM Loaded: ' + performanceData.domContentLoaded);
        console.log('Load Event End: ' + performanceData.loadEventEnd);
        console.log('Total Load Time: ' + (performanceData.loadEventEnd - performanceData.navigationStart) + ' ms');
    }
    phantom.exit();
};

// Open the URL and start measuring
page.open(url, function(status) {
    if (status === "success") {
        console.log("Page loaded successfully.");
    } else {
        console.log("Failed to load the page.");
    }
});

Explanation:

• এখানে, রিসোর্স রিকোয়েস্ট, রিসোর্স রিসিভ, এবং পেজ লোড টাইমিং এর জন্য পৃথকভাবে লগ করা হচ্ছে। আপনি network requests, resource timings, এবং load performance সহ সম্পূর্ণ পেজের লোডিং প্রক্রিয়া পরিমাপ করতে পারেন।

4. Capturing Timing for Different Resources (Images, CSS, JS):

var page = require('webpage').create();
var url = 'http://example.com';

page.onResourceReceived = function(response) {
    if (response.status === 200) {
        console.log('Received ' + response.url + ' of type ' + response.type + ' in ' + response.time + ' ms');
    }
};

page.open(url, function(status) {
    if (status === "success") {
        console.log("Page loaded successfully");
    } else {
        console.log("Failed to load page");
    }

    phantom.exit();
});

Explanation:

• Resource Timing: এখানে, onResourceReceived ফাংশনটি ব্যবহৃত হয়েছে সমস্ত সফল রিসোর্সের টাইপ এবং টাইমিং লগ করার জন্য (যেমন: ছবি, CSS, JS ফাইলগুলি)।

PhantomJS ব্যবহার করে আপনি resource requests এবং timing সম্পর্কিত ডেটা খুব সহজে ক্যাপচার করতে পারেন। এটি web scraping, page load performance measurement, এবং network request analysis এর জন্য খুবই কার্যকরী। আপনি onResourceRequested, onResourceReceived, এবং onLoadFinished ইভেন্টগুলি ব্যবহার করে ওয়েব পেজের রিসোর্স লোডিং টাইম, রিকোয়েস্ট, এবং রেসপন্স ডেটা ট্র্যাক করতে পারেন, যা আপনাকে ওয়েব পেজের লোড পারফরম্যান্স এবং রিসোর্স ব্যবস্থাপনা ভালোভাবে বিশ্লেষণ করতে সহায়তা করবে।