Bad performance when inserting a large amount of <object> tags |
|||||||
Issue description
Chrome Version: 66.0.3359.139 (Official Build) (64-bit)
OS: Linux
What steps will reproduce the problem?
(1) Create a page that dynamically adds .svg images to itself via dom.createElement('object')
(2) Load the page and let it add 400 such elements
(3) Observe the page becoming unresponsive.
What is the expected result?
The page renders at similar speed to what it would render at, if it were adding bitmap graphics (.gif or .png) via dom.createElement('img')
What happens instead?
Chrome becomes unresponsive and it takes several minutes to render the page. After each call to add such element, the Chrome performance profiler shows an entry labeled "Layout", and the time it spends doing this seems to be in higher than linear relation to the number of SVG elements already present on the page.
For example, rendering pages with 100, 200, and 400 SVGs was taking 5.5s, 21.6s and 99s respectively. Rendering 1000 SVGs didn't finish in 10 minutes.
Replacing the SVGs by PNGs, or rendering the page in Firefox (52.6.0 (64-bit) on Linux) doesn't seem to show this problem.
GPU information follows
==================================================================
Graphics Feature Status
Canvas: Hardware accelerated
CheckerImaging: Disabled
Flash: Hardware accelerated
Flash Stage3D: Hardware accelerated
Flash Stage3D Baseline profile: Hardware accelerated
Compositing: Hardware accelerated
Multiple Raster Threads: Enabled
Native GpuMemoryBuffers: Software only. Hardware acceleration disabled
Rasterization: Software only. Hardware acceleration disabled
Surface Synchronization: Enabled
Video Decode: Unavailable
WebGL: Hardware accelerated
WebGL2: Hardware accelerated
Driver Bug Workarounds
clear_uniforms_before_first_program_use
disable_discard_framebuffer
disable_framebuffer_cmaa
force_cube_complete
init_gl_position_in_vertex_shader
init_vertex_attributes
pack_parameters_workaround_with_pack_buffer
scalarize_vec_and_mat_constructor_args
unpack_alignment_workaround_with_unpack_buffer
unpack_overlapping_rows_separately_unpack_buffer
use_virtualized_gl_contexts
Problems Detected
Accelerated video decode is unavailable on Linux: 137247
Disabled Features: accelerated_video_decode
Program link fails in NVIDIA Linux if gl_Position is not set: 286468
Applied Workarounds: init_gl_position_in_vertex_shader
Clear uniforms before first program use on all platforms: 124764, 349137
Applied Workarounds: clear_uniforms_before_first_program_use
Linux NVIDIA drivers don't have the correct defaults for vertex attributes: 351528
Applied Workarounds: init_vertex_attributes
Always rewrite vec/mat constructors to be consistent: 398694
Applied Workarounds: scalarize_vec_and_mat_constructor_args
MakeCurrent is slow on Linux with NVIDIA drivers: 449150, 514510
Applied Workarounds: use_virtualized_gl_contexts
NVIDIA fails glReadPixels from incomplete cube map texture: 518889
Applied Workarounds: force_cube_complete
Pack parameters work incorrectly with pack buffer bound: 563714
Applied Workarounds: pack_parameters_workaround_with_pack_buffer
Alignment works incorrectly with unpack buffer bound: 563714
Applied Workarounds: unpack_alignment_workaround_with_unpack_buffer
Framebuffer discarding can hurt performance on non-tilers: 570897
Applied Workarounds: disable_discard_framebuffer
Unpacking overlapping rows from unpack buffers is unstable on NVIDIA GL driver: 596774
Applied Workarounds: unpack_overlapping_rows_separately_unpack_buffer
Use GL_INTEL_framebuffer_CMAA on ChromeOS: 535198
Applied Workarounds: disable_framebuffer_cmaa
Disable KHR_blend_equation_advanced until cc shaders are updated: 661715
Applied Workarounds: disable(GL_KHR_blend_equation_advanced), disable(GL_KHR_blend_equation_advanced_coherent)
Don't expose disjoint_timer_query extensions to WebGL: 808744
Native GpuMemoryBuffers have been disabled, either via about:flags or command line.
Disabled Features: native_gpu_memory_buffers
Checker-imaging has been disabled via finch trial or the command line.
Disabled Features: checker_imaging
Version Information
Data exported 2018-06-04T23:31:23.755Z
Chrome version Chrome/66.0.3359.139
Operating system Linux 4.9.0-6-amd64
Software rendering list URL https://chromium.googlesource.com/chromium/src/+/a020eddf0d85fe84d4a6787b304f50aafb670969/gpu/config/software_rendering_list.json
Driver bug list URL https://chromium.googlesource.com/chromium/src/+/a020eddf0d85fe84d4a6787b304f50aafb670969/gpu/config/gpu_driver_bug_list.json
ANGLE commit id 22c768fbda54
2D graphics backend Skia/66 773868fdade5f9f0e7697e6d09c9bd80aaa9b402-
Command Line /usr/bin/google-chrome-stable --flag-switches-begin --flag-switches-end --isolate-origins=https://chromium.org/,https://corp.googleapis.com/,https://storage.googleapis.com,https://ajax.googleapis.com,https://fonts.googleapis.com,https://googleplex.com/,https://googlesource.com/,https://youtube.com/,https://google.com/,https://googleacquisitionmigration.com/,https://googleusercontent.com/,https://googleprod.com/,https://nest.com/,https://myworkday.com/,https://chromiumapp.org/,https://lucidchart.com/,https://service-now.com/,https://concursolutions.com/,https://salesforce.com/,https://gcorppartners.com/,https://morganstanley.com/,https://schwab.com/,https://qualtrics.com/,https://ultipro.com/,https://google.secure2-enroll.com/,https://googlegroups.com/,https://google.secure.force.com/,https://ebenefitsnow.com/,https://firebase.com/,https://elo.plusrelocation.com/,https://anthem.com/,https://g.viapeople.net/,https://gdjap.com/,https://asana.com/,https://perquisite.net/,https://postini.com/,https://perkhub.com/,https://gstave.us/,https://geolearning.com/,https://lecorpio.com/,https://inverify.net/,https://preceda.com.au/,https://secureacceptance.cybersource.com/,https://solium.com/,https://fgvms.com/,https://ridecell.com/,https://tds.ie/,https://sprinklr.com/,https://smartsheet.com/,https://fieldglass.net/,https://dochub.com/
Driver Information
Initialization time 687
In-process GPU false
Passthrough Command Decoder false
Direct Composition false
Supports overlays false
Sandboxed true
GPU0 VENDOR = 0x10de, DEVICE= 0x13ba *ACTIVE*
Optimus false
Optimus false
AMD switchable false
Driver vendor Nvidia
Driver version 384.111
Driver date
Pixel shader version 4.50
Vertex shader version 4.50
Max. MSAA samples 64
Machine model name
Machine model version
GL_VENDOR NVIDIA Corporation
GL_RENDERER Quadro K2200/PCIe/SSE2
GL_VERSION 4.5.0 NVIDIA 384.111
GL_EXTENSIONS GL_AMD_multi_draw_indirect GL_AMD_seamless_cubemap_per_texture GL_ARB_arrays_of_arrays GL_ARB_base_instance GL_ARB_bindless_texture GL_ARB_blend_func_extended GL_ARB_buffer_storage GL_ARB_cl_event GL_ARB_clear_buffer_object GL_ARB_clear_texture GL_ARB_clip_control GL_ARB_color_buffer_float GL_ARB_compatibility GL_ARB_compressed_texture_pixel_storage GL_ARB_conservative_depth GL_ARB_compute_shader GL_ARB_compute_variable_group_size GL_ARB_conditional_render_inverted GL_ARB_copy_buffer GL_ARB_copy_image GL_ARB_cull_distance GL_ARB_debug_output GL_ARB_depth_buffer_float GL_ARB_depth_clamp GL_ARB_depth_texture GL_ARB_derivative_control GL_ARB_direct_state_access GL_ARB_draw_buffers GL_ARB_draw_buffers_blend GL_ARB_draw_indirect GL_ARB_draw_elements_base_vertex GL_ARB_draw_instanced GL_ARB_enhanced_layouts GL_ARB_ES2_compatibility GL_ARB_ES3_compatibility GL_ARB_ES3_1_compatibility GL_ARB_ES3_2_compatibility GL_ARB_explicit_attrib_location GL_ARB_explicit_uniform_location GL_ARB_fragment_coord_conventions GL_ARB_fragment_layer_viewport GL_ARB_fragment_program GL_ARB_fragment_program_shadow GL_ARB_fragment_shader GL_ARB_framebuffer_no_attachments GL_ARB_framebuffer_object GL_ARB_framebuffer_sRGB GL_ARB_geometry_shader4 GL_ARB_get_program_binary GL_ARB_get_texture_sub_image GL_ARB_gl_spirv GL_ARB_gpu_shader5 GL_ARB_gpu_shader_fp64 GL_ARB_gpu_shader_int64 GL_ARB_half_float_pixel GL_ARB_half_float_vertex GL_ARB_imaging GL_ARB_indirect_parameters GL_ARB_instanced_arrays GL_ARB_internalformat_query GL_ARB_internalformat_query2 GL_ARB_invalidate_subdata GL_ARB_map_buffer_alignment GL_ARB_map_buffer_range GL_ARB_multi_bind GL_ARB_multi_draw_indirect GL_ARB_multisample GL_ARB_multitexture GL_ARB_occlusion_query GL_ARB_occlusion_query2 GL_ARB_parallel_shader_compile GL_ARB_pipeline_statistics_query GL_ARB_pixel_buffer_object GL_ARB_point_parameters GL_ARB_point_sprite GL_ARB_program_interface_query GL_ARB_provoking_vertex GL_ARB_query_buffer_object GL_ARB_robust_buffer_access_behavior GL_ARB_robustness GL_ARB_sample_shading GL_ARB_sampler_objects GL_ARB_seamless_cube_map GL_ARB_seamless_cubemap_per_texture GL_ARB_separate_shader_objects GL_ARB_shader_atomic_counter_ops GL_ARB_shader_atomic_counters GL_ARB_shader_ballot GL_ARB_shader_bit_encoding GL_ARB_shader_clock GL_ARB_shader_draw_parameters GL_ARB_shader_group_vote GL_ARB_shader_image_load_store GL_ARB_shader_image_size GL_ARB_shader_objects GL_ARB_shader_precision GL_ARB_shader_storage_buffer_object GL_ARB_shader_subroutine GL_ARB_shader_texture_image_samples GL_ARB_shader_texture_lod GL_ARB_shading_language_100 GL_ARB_shading_language_420pack GL_ARB_shading_language_include GL_ARB_shading_language_packing GL_ARB_shadow GL_ARB_sparse_buffer GL_ARB_sparse_texture GL_ARB_stencil_texturing GL_ARB_sync GL_ARB_tessellation_shader GL_ARB_texture_barrier GL_ARB_texture_border_clamp GL_ARB_texture_buffer_object GL_ARB_texture_buffer_object_rgb32 GL_ARB_texture_buffer_range GL_ARB_texture_compression GL_ARB_texture_compression_bptc GL_ARB_texture_compression_rgtc GL_ARB_texture_cube_map GL_ARB_texture_cube_map_array GL_ARB_texture_env_add GL_ARB_texture_env_combine GL_ARB_texture_env_crossbar GL_ARB_texture_env_dot3 GL_ARB_texture_float GL_ARB_texture_gather GL_ARB_texture_mirror_clamp_to_edge GL_ARB_texture_mirrored_repeat GL_ARB_texture_multisample GL_ARB_texture_non_power_of_two GL_ARB_texture_query_levels GL_ARB_texture_query_lod GL_ARB_texture_rectangle GL_ARB_texture_rg GL_ARB_texture_rgb10_a2ui GL_ARB_texture_stencil8 GL_ARB_texture_storage GL_ARB_texture_storage_multisample GL_ARB_texture_swizzle GL_ARB_texture_view GL_ARB_timer_query GL_ARB_transform_feedback2 GL_ARB_transform_feedback3 GL_ARB_transform_feedback_instanced GL_ARB_transform_feedback_overflow_query GL_ARB_transpose_matrix GL_ARB_uniform_buffer_object GL_ARB_vertex_array_bgra GL_ARB_vertex_array_object GL_ARB_vertex_attrib_64bit GL_ARB_vertex_attrib_binding GL_ARB_vertex_buffer_object GL_ARB_vertex_program GL_ARB_vertex_shader GL_ARB_vertex_type_10f_11f_11f_rev GL_ARB_vertex_type_2_10_10_10_rev GL_ARB_viewport_array GL_ARB_window_pos GL_ATI_draw_buffers GL_ATI_texture_float GL_ATI_texture_mirror_once GL_S3_s3tc GL_EXT_texture_env_add GL_EXT_abgr GL_EXT_bgra GL_EXT_bindable_uniform GL_EXT_blend_color GL_EXT_blend_equation_separate GL_EXT_blend_func_separate GL_EXT_blend_minmax GL_EXT_blend_subtract GL_EXT_compiled_vertex_array GL_EXT_Cg_shader GL_EXT_depth_bounds_test GL_EXT_direct_state_access GL_EXT_draw_buffers2 GL_EXT_draw_instanced GL_EXT_draw_range_elements GL_EXT_fog_coord GL_EXT_framebuffer_blit GL_EXT_framebuffer_multisample GL_EXTX_framebuffer_mixed_formats GL_EXT_framebuffer_multisample_blit_scaled GL_EXT_framebuffer_object GL_EXT_framebuffer_sRGB GL_EXT_geometry_shader4 GL_EXT_gpu_program_parameters GL_EXT_gpu_shader4 GL_EXT_multi_draw_arrays GL_EXT_packed_depth_stencil GL_EXT_packed_float GL_EXT_packed_pixels GL_EXT_pixel_buffer_object GL_EXT_point_parameters GL_EXT_polygon_offset_clamp GL_EXT_provoking_vertex GL_EXT_rescale_normal GL_EXT_secondary_color GL_EXT_separate_shader_objects GL_EXT_separate_specular_color GL_EXT_shader_image_load_formatted GL_EXT_shader_image_load_store GL_EXT_shader_integer_mix GL_EXT_shadow_funcs GL_EXT_stencil_two_side GL_EXT_stencil_wrap GL_EXT_texture3D GL_EXT_texture_array GL_EXT_texture_buffer_object GL_EXT_texture_compression_dxt1 GL_EXT_texture_compression_latc GL_EXT_texture_compression_rgtc GL_EXT_texture_compression_s3tc GL_EXT_texture_cube_map GL_EXT_texture_edge_clamp GL_EXT_texture_env_combine GL_EXT_texture_env_dot3 GL_EXT_texture_filter_anisotropic GL_EXT_texture_integer GL_EXT_texture_lod GL_EXT_texture_lod_bias GL_EXT_texture_mirror_clamp GL_EXT_texture_object GL_EXT_texture_shared_exponent GL_EXT_texture_sRGB GL_EXT_texture_sRGB_decode GL_EXT_texture_storage GL_EXT_texture_swizzle GL_EXT_timer_query GL_EXT_transform_feedback2 GL_EXT_vertex_array GL_EXT_vertex_array_bgra GL_EXT_vertex_attrib_64bit GL_EXT_window_rectangles GL_EXT_x11_sync_object GL_EXT_import_sync_object GL_NV_robustness_video_memory_purge GL_IBM_rasterpos_clip GL_IBM_texture_mirrored_repeat GL_KHR_context_flush_control GL_KHR_debug GL_EXT_memory_object GL_EXT_memory_object_fd GL_KHR_no_error GL_KHR_robust_buffer_access_behavior GL_KHR_robustness GL_EXT_semaphore GL_EXT_semaphore_fd GL_KTX_buffer_region GL_NV_alpha_to_coverage_dither_control GL_NV_bindless_multi_draw_indirect GL_NV_bindless_multi_draw_indirect_count GL_NV_bindless_texture GL_NV_blend_equation_advanced GL_NV_blend_equation_advanced_coherent GL_NV_blend_square GL_NV_command_list GL_NV_compute_program5 GL_NV_conditional_render GL_NV_copy_depth_to_color GL_NV_copy_image GL_NV_deep_texture3D GL_NV_depth_buffer_float GL_NV_depth_clamp GL_NV_draw_texture GL_NV_draw_vulkan_image GL_NV_ES1_1_compatibility GL_NV_ES3_1_compatibility GL_NV_explicit_multisample GL_NV_fence GL_NV_float_buffer GL_NV_fog_distance GL_NV_fragment_program GL_NV_fragment_program_option GL_NV_fragment_program2 GL_NV_framebuffer_multisample_coverage GL_NV_geometry_shader4 GL_NV_gpu_program4 GL_NV_internalformat_sample_query GL_NV_gpu_program4_1 GL_NV_gpu_program5 GL_NV_gpu_program5_mem_extended GL_NV_gpu_program_fp64 GL_NV_gpu_shader5 GL_NV_half_float GL_NV_light_max_exponent GL_NV_multisample_coverage GL_NV_multisample_filter_hint GL_NV_occlusion_query GL_NV_packed_depth_stencil GL_NV_parameter_buffer_object GL_NV_parameter_buffer_object2 GL_NV_path_rendering GL_NV_pixel_data_range GL_NV_point_sprite GL_NV_primitive_restart GL_NV_register_combiners GL_NV_register_combiners2 GL_NV_shader_atomic_counters GL_NV_shader_atomic_float GL_NV_shader_atomic_int64 GL_NV_shader_buffer_load GL_NV_shader_storage_buffer_object GL_NV_texgen_reflection GL_NV_texture_barrier GL_NV_texture_compression_vtc GL_NV_texture_env_combine4 GL_NV_texture_multisample GL_NV_texture_rectangle GL_NV_texture_shader GL_NV_texture_shader2 GL_NV_texture_shader3 GL_NV_transform_feedback GL_NV_transform_feedback2 GL_NV_uniform_buffer_unified_memory GL_NV_vdpau_interop GL_NV_vertex_array_range GL_NV_vertex_array_range2 GL_NV_vertex_attrib_integer_64bit GL_NV_vertex_buffer_unified_memory GL_NV_vertex_program GL_NV_vertex_program1_1 GL_NV_vertex_program2 GL_NV_vertex_program2_option GL_NV_vertex_program3 GL_NVX_conditional_render GL_NVX_gpu_memory_info GL_NVX_nvenc_interop GL_NV_shader_thread_group GL_NV_shader_thread_shuffle GL_KHR_blend_equation_advanced GL_KHR_blend_equation_advanced_coherent GL_SGIS_generate_mipmap GL_SGIS_texture_lod GL_SGIX_depth_texture GL_SGIX_shadow GL_SUN_slice_accum
Disabled Extensions GL_KHR_blend_equation_advanced GL_KHR_blend_equation_advanced_coherent
Disabled WebGL Extensions EXT_disjoint_timer_query EXT_disjoint_timer_query_webgl2
Window system binding vendor NVIDIA Corporation
Window system binding version 1.4
Window system binding extensions GLX_EXT_visual_info GLX_EXT_visual_rating GLX_EXT_import_context GLX_SGIX_fbconfig GLX_SGIX_pbuffer GLX_SGI_video_sync GLX_SGI_swap_control GLX_EXT_swap_control GLX_EXT_swap_control_tear GLX_EXT_texture_from_pixmap GLX_EXT_buffer_age GLX_ARB_create_context GLX_ARB_create_context_profile GLX_EXT_create_context_es_profile GLX_EXT_create_context_es2_profile GLX_ARB_create_context_robustness GLX_NV_delay_before_swap GLX_EXT_stereo_tree GLX_EXT_libglvnd GLX_ARB_context_flush_control GLX_NV_robustness_video_memory_purge GLX_ARB_multisample GLX_NV_float_buffer GLX_ARB_fbconfig_float GLX_NV_swap_group GLX_EXT_framebuffer_sRGB GLX_NV_copy_image GLX_NV_copy_buffer GLX_NV_video_capture
Window manager Mutter (Muffin)
XDG_CURRENT_DESKTOP X-Cinnamon
GDMSESSION cinnamon
Compositing manager Yes
Direct rendering Yes
Reset notification strategy 0x8261
GPU process crash count 14
System visual ID 33
RGBA visual ID 162
Compositor Information
Tile Update Mode One-copy
Partial Raster Enabled
GpuMemoryBuffers Status
ATC Software only
ATCIA Software only
DXT1 Software only
DXT5 Software only
ETC1 Software only
R_8 Software only
R_16 Software only
RG_88 Software only
BGR_565 Software only
RGBA_4444 Software only
RGBX_8888 Software only
RGBA_8888 Software only
BGRX_8888 Software only
BGRX_1010102 Software only
RGBX_1010102 Software only
BGRA_8888 Software only
RGBA_F16 Software only
YVU_420 Software only
YUV_420_BIPLANAR Software only
UYVY_422 Software only
Display(s) Information
Info Display[9834799315992837] bounds=0,0 3840x2160, workarea=0,0 3840x2134, scale=1, external
Color space information {primaries:INVALID, transfer:INVALID, matrix:INVALID, range:INVALID}
Bits per color component 8
Bits per pixel 24
,
Jun 5 2018
Thanks for the report. Could you attach a HTML file that demonstrates the problem? Maybe it's trivial to repro but it might also be dependent on some specific detail of the way you did it.
,
Jun 5 2018
SVG-as-image requires layout be performed on every single SVG at paint time. The underlying reason is explained in the duplicate bug,
,
Jun 5 2018
This is a trivial code I created for it that shows the issue clearly:
=========================================
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
function onLoad() {
for (let i = 0; i < 300; i++) {
let svg = document.createElement("OBJECT");
svg.className = "svg";
svg.type = 'image/svg+xml';
svg.data = "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg";
document.body.appendChild(svg);
}
}
</script>
<style>.svg { width:24px; height: 24px }</style>
</head>
<body id="body" onload="onLoad()">
</body>
</html>
,
Jun 5 2018
,
Jun 5 2018
,
Jun 7 2018
Removing DOM component as this seems unrelated to DOM but please re-add if that's wrong.
,
Jun 7 2018
I've not managed to reproduce the long times from the description, but it seems the time is mostly spent in frame creation. Because of how the code above is written - and how certain things are implemented - layout will be forced over and over for each <object> element created (and updated) in the loop.
Replacing the for-loop with the slightly more convoluted:
let setAttr = Element.prototype.setAttribute;
for (let i = 0; i < 300; i++) {
let svg = document.createElement("OBJECT");
setAttr.call(svg, "class", "svg");
setAttr.call(svg, "type", 'image/svg+xml');
setAttr.call(svg, "data", "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg");
document.body.appendChild(svg);
}
should get rid of those "unnecessary" layouts, and also avoid instantiating all the frames within the 'load' handler.
So it would appear this boils down to bunch of fallacies with <object> (and <embed>) loading.
,
Jun 7 2018
Thank you for the suggestion! This is way faster. Would you mind pointing me to some information on why it's faster? I don't know how it differs from what I was doing. svg.className = "svg"; vs Element.prototype.setAttribute.call(svg, "class", "svg"); I also tried replacing OBJECT by IMG as suggested here: https://bugs.chromium.org/p/chromium/issues/detail?id=613662 That's the fastest of the approaches I've tried, but doesn't allow external styling of the SVG, which is why we use SVG in the first place.
,
Jun 7 2018
It's faster because it avoids forcing a layout. The reason a layout is forced is because there's a (special) named getter/setter on HTMLObjectElement which does this in an attempt to instantiate a possible plugin (because plugins can in turn provide/expose properties on the HTMLObjectElement.) This is of course a bit heavy-handed (and also unnecessary if .data doesn't actually point to a plugin...) So getting the function object for setAttribute and explicitly call()-ing it avoids the property accesses which would trigger said layout. As you may imagine this way of doing things is not something I'd recommend in general... As for external styling of SVG-in-img, it's possible to do in somewhat limited ways (:target and similar.)
,
Jun 7 2018
Aaah, that makes sense. Thank you so much for the explanation! In the light of that, I guess a better summary for the issue is in order, as this is not actually related to SVGs at all(?)
,
Jun 7 2018
|
|||||||
►
Sign in to add a comment |
|||||||
![https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg";](https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg";){kind=link}
![https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg");](https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg");){kind=link}
Comment 1 by pbomm...@chromium.org
, Jun 4 2018Components: Blink>SVG Blink>DOM
Labels: Performance-Browser OS-Mac OS-Windows