In iOS 9 with Swift, the loading speed of HTML content on WKWebView seems to be sluggish

I have been working on integrating the WKWebView as a subview of another webview within a UIViewController. I've successfully loaded the content and established proper communication between swift and JavaScript. However, I've noticed that the loading time for the plain HTML content without any data manipulation is close to 2 seconds.

Even when testing the loading of the WKWebView with just an empty HTML body without any scripts involved, it still takes around 600 milliseconds to load.

The time disparity between the viewDidLoad function and the webView (webView: WKWebView, didFinishNavigation navigation: WKNavigation!)** is 600 ms, even when the HTML only contains an empty body.

ViewController's viewDidLoad Function:

override func viewDidLoad() {
    NSLog("started - %@.%@", String(self.dynamicType), __FUNCTION__)
    super.viewDidLoad()
    
    let wkConfiguration: WKWebViewConfiguration = WKWebViewConfiguration()
    let userController: WKUserContentController = WKUserContentController()
    wkConfiguration.userContentController = userController
    wkConfiguration.processPool = VCWKWebView.wkProcess
    self.wkWebView = VCWKWebView(frame: self.webView.bounds,configuration: wkConfiguration)
    if let wkWebView = self.wkWebView {
        self.webView.addSubview(wkWebView)
        wkWebView.translatesAutoresizingMaskIntoConstraints = false
        let height = NSLayoutConstraint(item: wkWebView, attribute: .Height, relatedBy: .Equal, toItem: self.webView, attribute: .Height, multiplier: 1, constant: 0)
        let width = NSLayoutConstraint(item: wkWebView, attribute: .Width, relatedBy: .Equal, toItem: self.webView, attribute: .Width, multiplier: 1, constant: 0)
        webView.addConstraints([height, width])
        //wkWebView.delegate = self
        wkWebView.navigationDelegate = self
        wkWebView.loadContent()
    }
    
    NSNotificationCenter.defaultCenter().addObserver(self, selector: "keyboardWillShow:", name: UIKeyboardWillShowNotification, object: nil)
    NSNotificationCenter.defaultCenter().addObserver(self, selector: "keyboardWillHide:", name: UIKeyboardWillHideNotification, object: nil)
    
    NSLog("ended - %@.%@", String(self.dynamicType), __FUNCTION__)
}

VCWKWebView Class:

class VCWKWebView: WKWebView  {
    
    static let wkProcess: WKProcessPool = WKProcessPool()
    
    private static let _url: NSURL = NSURL(fileURLWithPath: NSBundle.mainBundle().pathForResource("index", ofType: "html",inDirectory:"www")!)

    private static let _accessUrl: NSURL = NSURL(fileURLWithPath: NSBundle.mainBundle().pathForResource("www", ofType: nil)!)

    
    func loadContent(){
        NSLog("started - %@.%@", String(self.dynamicType), __FUNCTION__)
        if #available(iOS 9.0, *) {
            self.loadFileURL(VCWKWebView._url, allowingReadAccessToURL: VCWKWebView._accessUrl)
        } else {
            // Fallback on earlier versions
        }
        NSLog("ended - %@.%@", String(self.dynamicType), __FUNCTION__)
    }
    
    override init(frame: CGRect, configuration: WKWebViewConfiguration) {
        super.init(frame:frame, configuration:configuration)
    }
    
    convenience init(frame: CGRect){
        let wkConfiguration: WKWebViewConfiguration = WKWebViewConfiguration()
        self.init(frame:frame,configuration:wkConfiguration)
    }
    
    deinit{
        print("deinit of VCWKWebView is called")
    }
}

Answer №1

The issue typically arises due to the CSS applied during the rendering of the webpage. This behavior is usually seen when loading the page from a local source. It's possible that on the initial load, UIWebview doesn't have a cache for the content and generates one accordingly.

If you could provide the HTML snippet related to this, I can further investigate the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The JSON property is not defined

After making an AJAX call to retrieve data, I receive a JSON Object instead of a string. When I log the object, all its properties appear correctly. However, when attempting to log one specific property, it shows up as undefined. Here is a snapshot of my ...

Nodes are currently being loaded in the JIT SpaceTree

I am currently trying to implement the SpaceTree from JIT and I could really use some assistance. The issue arises when I attempt to load the tree from another array. json.php <?php $temp = array( 'id' => "node02", 'name&apos ...

ajax stops working due to issues with xmlHttp.readysate

Having recently started working with AJAX, I encountered an issue with my script. Here's the code snippet: var xmlHttp = createXmlHttpRequestObject(); function createXmlHttpRequestObject() { var xmlHttp; if(windows.ActiveXObject) { ...

Can't access innerText in Firefox

This is the code snippet I'm having trouble with: <div id="code">My program<br />It is here!</div> <script type="text/javascript"> var program=document.getElementById('code'); ShowLMCButton(program.innerText); </s ...

Designing an uncomplicated password authentication system without embedding the password itself [Using PHP, Javascript, and MySQL]

I'm in the process of setting up a basic login prompt for my local website. I initially experimented with Javascript, but I'm looking for a way to avoid hardcoding the password. Users receive their passwords via email, so there's no need for ...

Can a Django view be configured to output a JavaScript function?

I need to implement a JavaScript function in my view. The scenario is as follows: If a user clicks on the 'book' button without selecting an article, the book function should check the database and if it finds that no product has been chosen, it ...

The implementation of SetInterval within nested functions in JavaScript appears to be malfunctioning

I am a beginner in the world of JavaScript and I am currently attempting to incorporate the setInterval method within functions in Js. JavaScript Code: var tar = document.getElementById("sample"); function dataSample(tar) { //setInterval ...

Is it common in Node.js to create multiple instances of "server" objects, but only connect one to a port?

After finishing "Node.js in Action", I'm now piecing together the concepts of Node.js, Connect, and Express. My inquiry revolves around the creation of servers in Node. node_server = http.createServer(); connect_app = Connect(); express_app = Express ...

Press the identical button arrangement with selenium using python

How do I click on buttons with the same classes one by one? This is the Python code I am using: clk_but1 = wait(driver, 10).until(EC.presence_of_element_located((By.XPATH, "//button[@class = ('applyBtn btn btn-sm btn-red')]"))) driver.execute_s ...

Progressive rendering of particles in THREE.js

I am new to the world of 3D and I'm trying to render particles as they are created. My goal is to have these 2000 particles render individually as they are created, but with the current code, they only render once all particles have been created. I h ...

The process of triggering an action after three mouse clicks

I'm fairly new to coding and I'm currently trying to solve a problem where a div should disappear after being clicked three times. I've managed to achieve this for one or two clicks, but getting it to work for three clicks is proving to be a ...

Delete specific rows within a grid view exclusively on the user's browser

I need to implement a feature where users can remove individual rows from a gridview on the screen without affecting the database. The gridview is populated based on the index selected from a dropdown list. Each row in the gridview should have a remove bu ...

Converting Python Class Structures into JavaScript

I currently have some Python classes structured like this: class Customer { constructor(name, fullName, gender, age, instruments, paid) { this.name = name; this.fullName = fullName; this.gender= gender; this.age= age; ...

Form Validator unable to properly validate option selection and checkbox

I am encountering an issue with this script. I require the Form Validator, as programmed at the bottom, to first verify if the radio button is selected and then proceed to request a time from the specific radio button's dropdown menu. It appears that ...

Navigating through various arrays within objects on a JSON API with JavaScript: A walkthrough

I am currently working on fetching and displaying data from an API. The specific data I am interested in is located within the 'equipments' array. You can see an example of this array in the image linked below: https://i.sstatic.net/QeBhc.jpg M ...

Change the layout of the launch screen storyboard

After implementing a launch screen storyboard in my project, I encountered an issue with iOS caching the images created from the storyboard. The UIImageView displays a .png image downloaded from a server, which changes daily. However, the app consistently ...

Using PHP Ajax to populate FullCalendar's eventSources

Currently, I am encountering an issue with Fullcalendar V4 related to the eventSources option when using PHP Ajax. My JavaScript code looks like this: var eventSource = "data.php?value1=" + item_id; calendar.addEventSource(eventSource); In my PHP scrip ...

Vue.js components experiencing issues with updating data

My Vue list is generated from an array where each item renders a component with bound array item properties. <div v-for="item in items"> <item v-bind:item="item"></item> </div> This component contains mixed data based on ...

Ways to showcase additional content

When I receive a JSON Object containing posts from a WordPress account, it only includes about 15 posts. What steps can I take to retrieve more than that amount? The structure of the JSON data is as follows: { ID: 4164, title: "24 Hour Non-Stop with Ma ...

Steps for triggering the material-ui menu to appear on hover of a button

I attempted to implement the following code without success. I was able to achieve it using plain CSS, but I need to utilize the makeStyles function provided by material-ui. My goal is to display a drop-down list of items when a user hovers over the butto ...