Chrome struggles with performance issues, particularly when compared to the smoother experiences offered by Firefox and

As I work on developing a web browser game, I've noticed significant FPS drops during animations, especially draggable ones in Chrome. This was concerning to me, as it seemed like the game might become too heavy. However, when I tested the app in Firefox or IE11, it ran smoothly without any noticeable lags!

I'm surprised that Chrome is struggling with this type of rendering. Could there be something in the console settings causing Chrome to lag so severely? Perhaps some logging or other issues?

The application uses a lot of opacities, text, box shadows, and more.

Thanks

Fox

-- PROFILE UPDATE --

Here's what's happening:

When a user opens the inventory

_theatre('sub', '.character-panel', 1);
$('.character-panel').show()
_loadInventory();
_loadPlayerStats();
_loadEquipment();

I suspect the issue lies within the _theatre() function. It creates a full-page fixed div with 0.8 opacity.

function _theatre(t, e, a){

if(a == 1){

    window.paused = 1;

    $('html').css('overflow', 'hidden');

    $(e).wrap('<div class="theatre-' + t + '"></div>');

}
else{

    window.paused = 0;

    $('html').css('overflow', 'auto');

    $(e).unwrap('<div class="theatre-' + t + '"></div>');

}

}

Removing the _theatre() function significantly improves dragging performance. I even tried removing the opacity from the div, but saw no better results. What could be causing this issue?

div.theatre-sub {top:0; left:0; right:0; bottom:0; position:fixed; z-index:9996; background-color:rgba(0,0,0,0.8)}
div.theatre-dom {top:0; left:0; right:0; bottom:0; position:fixed; z-index:9998; background-color:rgba(0,0,0,0.8)}

Profiler data

jqueryhtmlcssgoogle-chromefirefox

Answer №1

If you're experiencing performance issues with your code, try utilizing console.profile() to analyze the efficiency of your script and identify any bottlenecks.

Here is an example:

console.profile("Profile One");

function yourCode()
{
   // your code here
}

console.profileEnd("Profile One");

Check out the DEMO:

http://jsfiddle.net/NMbG4/5/

You can also use console.time() in a similar manner to measure the execution time of specific functions in milliseconds.

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

How can we style the <a> link once it has been downloaded?

Is there a way to change the color of a download link after it has been clicked on? I've attempted using the visited attribute, but it only seems to work with regular links and not with download documents: Appreciate any help ...

javascripthtmlcssreactjs

The JQuery Twitter client is experiencing issues in Firefox and is currently not functioning properly

I have created a small script to retrieve my most recent tweets using JQuery's $.getJSON() method. Interestingly, this script functions perfectly in Chrome and Safari, but it fails to display anything in Firefox! Take a look at the code snippet belo ...

jqueryajaxjsontwitterjsonp

One particular page is having trouble loading CSS, whereas it loads perfectly fine on a different page

I have two pages, 403.html and 404.html, both of which need to load the same style.css file. Strangely, when I visit the 403.html page, the CSS loads perfectly fine. However, when I navigate to the 404.html page, even though it has identical code with only ...

htmlcss

What are some effective methods for creating a sidebar that allows content to scroll beneath it seamlessly?

My goal is to create a webpage with the following structure: I want to display content in a large scrolling slideshow while allowing it to scroll left under a white sidebar. Although this may seem simple, I have experimented with various structures and am ...

htmlcssz-index

Retrieve data from an Observable containing JSON objects

I am currently working with a Http request that returns Json data, which I then store in an observable. { "proyecto":{ "nombre": "Mercado de Ideas", "tecnologias": [ { "nombre": ".NET", "icono": "http://getsetwebsit ...

htmlangularjsjsonionic2observable

The onBlur event attached to a div is triggered when transitioning from one input element to another within the same div

Here's a scenario: I have a div with two input fields nested inside, like this: <div> <input placeholder="Input1"/> <input placeholder="Input2"/> </div> I have a requirement to trigger a specific ...

javascripthtmlreactjsdom-eventsonblur

CSS animation using a series of linked elements

Is there a way to make my buttons animate sequentially? For example, the second button should start animating only after the first one has finished. Any assistance would be greatly appreciated! a { padding: 6px; display: block; width: 50px ...

htmlcssanimation

Disorganized HTML Elements

If you visit diartefloral.tech and use a cellphone in the "Sobre Nosotros" section of the menu, the footer overlaps an image. I'm not sure how to fix this issue. The most relevant code is shown below; I am using Bootstrap. Previously, I had an issue w ...

htmlcssbootstrap-4

In order to implement the functionality in JavaScript, the .slider::-webkit-slider

I need to create a slider that adjusts the size of the dot based on the value input. For example, when the value is 1, the dot size should be 10px and for a value of 100, it should be 100px. Is there a way to dynamically change the height of .slider::-web ...

javascripthtmlcsswebkit

What is the best way to achieve synchronicity with $.each function in jQuery?

I am working on an AJAX request that returns an array of objects upon success. The issue I am facing is with asynchronous looping using $.each. Inside the loop, there is a function that should execute for each object individually, but currently, it loops ...

javascriptjqueryajax

Modifying the Button component does not affect the hover color

I'm currently attempting to modify the color of all the buttons in my project by overriding the theme CSS. Although I successfully changed the button color, the hover color remains transparent. Any suggestions on how to override this? Are there any a ...

cssreactjsmaterial-ui

A guide on creating a downward animation of an object using CSS3

I am currently working on practicing CSS 3 animation. I am facing a challenge in figuring out how to make the item fall down the page at full speed without needing the user to track it downward with the mouse, all without using javascript. Ideally, I want ...

css

Ways to enable this feature to function

I am working with a div that contains multiple tables structured like this: <div id="div1"> <div id="div2"> <div id="div3"> <table id="table1"><tr><td></td></tr></table> ...

csshtml

The select2 multi-select box has a peculiar behavior where it only stores the last selected value in the array

After implementing the select2 multi-select box in my django application, I encountered an issue with how the selected values were being handled when passed into an array. Below is the code snippet : HTML Page: <head> <link href="https://cdnjs. ...

javascriptpythonjquerydjangojquery-select2

What is the process for integrating Socket io into an external JavaScript file that is connected to an HTML file?

Currently, I am utilizing node js, socket io, and express to develop a multiplayer web game. To begin, the server initiates and listens on port 2000. Upon visiting localhost:2000, the file lobby.html is transmitted using: //app.js const express = require ...

javascripthtmlnode.jsexpresssocket.io

What is the process for requesting a specific condition using jscript and jquery?

I'm experimenting with the following code: while (true) { $(document).ready(function() { setInterval(function () { if ($("h2").text() == "What is a light-year?") { $("#choice2").delay(200).queue ...

javascriptjquery

The accuracy of VW and VH units is questionable

width: 100vw;/* Taking up the entire viewport width */ height: 100vh;/* Occupying the full height of the viewport*/ Despite my efforts to make this CSS match the exact dimensions of the viewport at 100%, it seems to be too large and causing overflow on th ...

htmlcssviewport-units

jQuery: Select the parent element of a focused form input and apply styling

Recently, I encountered a situation where I have a form containing a DIV along with 3 INPUTS, each enclosed within a LABEL element. My goal is to alter the background image of the DIV whenever an INPUT receives focus. Due to limitations in navigating up t ...

jquerycssfocusbackgroundselector

Sending an Ajax request within another Ajax request does not return any SQL data

I need to dynamically update the upvotes when someone interacts with the content. After an initial AJAX call is completed, I trigger another AJAX request to update the upvote count on the webpage. $.post( "../ajax/add_interet.php", {'idregle' : ...

phpjquerymysqlsqlajax

Ensure that only one button can be selected at a time for non-radio button elements in the

This is the code snippet I am working with $(document).ready(function(){ $("a.btn1").click(function() { $(this).find("i").toggleClass("fa-thumbs-o-up fa-thumbs-o-down"); }); $("a.btn2").click(function(){ $(this).fi ...

javascripthtmlcss