html-rendering

svg path rendering speed

由 吃可爱长大的小学妹 提交于 2019-12-10 12:18:48
问题 There are about 6000 svg path elements. Each is like: <path fill="none" d="M -1180.753662,3450.687500 C -1183.848267,3258.348389 -899.981628, 2965.197998 -707.642639,2962.103516" stroke="#8f87a8"/> I am using d3 translate and scale events to pan and zoom the whole svg. http://bl.ocks.org/mbostock/3680999 It seems that html page has to re-render all of them with each pan or zoom, and that make the action quite sluggish. Is there anyway that I can make pan and zoom smoother in theory? 回答1: Use

C++, win32 api: How to create an html rendering window so that your application would get callbacks from JS calls?

由 ╄→尐↘猪︶ㄣ 提交于 2019-12-10 10:18:59
问题 What I need is simple: we have a console app project. We want to have such a function that would open a simple window with nothing but html (default system based) html + js rendering window that would read some default html+js string (form string or const char*). we want to have our own api joined with default js api so that when JS calls some our.function(argument); we would have our C++ application performe some function and for example cout argument. How to create such thing on windows?

How do I avoid double URL encoding when rendering URLs in my website?

由 雨燕双飞 提交于 2019-12-10 02:09:36
问题 Users provide both properly escaped URLs and raw URLs to my website in a text input; for example I consider these two URLs equivalent: https://www.cool.com/cool%20beans https://www.cool.com/cool beans Now I want to render these as <a> tags later, when viewing this data. I am stuck between encoding the given text and getting these links: <a href="https://www.cool.com/cool%2520beans"> <!-- This one is broken! --> <a href="https://www.cool.com/cool%20beans"> Or not encoding it and getting this:

Sizes calculation with JavaScript and jQuery

由 ￣綄美尐妖づ 提交于 2019-12-08 09:19:52
问题 Sometimes i'm facing problems, trying to get sizes of an HTML element in question. I'm tracing JavaScript code and see, that width and height of this element are returned as 0. When i do the same piece of code in browser's console, correct sizes are returned. Example code, that demonstrates this problem is following: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8" /> <title>Decorate image with button</title> <script src="https://ajax.googleapis.com

How can I visualize that reading element.offsetWidth causes a recalc/reflow

由 爷，独闯天下 提交于 2019-12-08 01:54:57
问题 It's written everywhere that reading element.offsetWidth causes a recalculation (or even a reflow?) of the element's dimensions. However, I'm struggling with making this effect visible. In chrome I would expect I would be able to make it visible with 3 simple steps: open the Chrome dev tools Go to the element tab and select an element that you want to cause a recalc/reflow on Go to the timeline tab and start recording Go to the console and type $0.offsetWidth Now if I go to the timeline tab I

PageSpeed accuses script of “render-blocking” when using external image

由 烈酒焚心 提交于 2019-12-07 15:43:02
问题 I have placed a script from a CDN just before the closing tag of my page's body (above </body> ). Google's PageSpeed Insights says: Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 1 blocking script resources. This causes a delay in rendering your page. I thought scripts before the end of my </body> don't delay the rendering? After some trial and error I found out that this is caused because my page uses an external image. With the example below you can

How can I visualize that reading element.offsetWidth causes a recalc/reflow

由 你说的曾经没有我的故事 提交于 2019-12-06 11:54:40
It's written everywhere that reading element.offsetWidth causes a recalculation (or even a reflow?) of the element's dimensions. However, I'm struggling with making this effect visible. In chrome I would expect I would be able to make it visible with 3 simple steps: open the Chrome dev tools Go to the element tab and select an element that you want to cause a recalc/reflow on Go to the timeline tab and start recording Go to the console and type $0.offsetWidth Now if I go to the timeline tab I would assume to see a reflow drawn. However, I see nothing. So I must have gotten something wrong.

How to fix inconsistent rendering of adjacent TD borders when they are collapsed?

由 我们两清 提交于 2019-12-06 05:51:37
问题 I have an HTML table with collapsed and adjacent borders and a standard border on all cells and I want to change the border color of a specific row to something else. The problem is that when the borders are collapsed and neighboring cells have different colors (or styles in general I assume) the browser does not render in a visually acceptable manner. Here's my HTML: <table> <tr><td>Lorem</td><td>Ipsum</td></tr> <tr><td>Lorem</td><td>Ipsum</td></tr> <tr id="foo"><td>The border of these cells

PageSpeed accuses script of “render-blocking” when using external image

由 China☆狼群 提交于 2019-12-05 21:40:58
I have placed a script from a CDN just before the closing tag of my page's body (above </body> ). Google's PageSpeed Insights says: Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 1 blocking script resources. This causes a delay in rendering your page. I thought scripts before the end of my </body> don't delay the rendering? After some trial and error I found out that this is caused because my page uses an external image. With the example below you can cause PageSpeed to detect a "render-blocking" script: <body> <img src="http://i.stack.imgur.com/oURrw.png"

How to optimally render large amounts of DOM elements using javascript?

由 坚强是说给别人听的谎言 提交于 2019-12-04 23:17:46
问题 On a web page I have a quite large list of items (say, product cards, each contains image and text) - about 1000 of them. I want to filter this list on client (only those items, which are not filtered away should be shown), but there is a rendering performance problem. I apply a very narrow filter and only 10-20 items remain, then cancel it (so all items have to be shown again), and browser (Chrome on very nice machine) hangs up for a second or two. I re-render the list using following
订阅 html-rendering