chromium/src

Fork 0

Files

android_webview

apps

ash

base

build

build_overrides

buildtools

chrome

chromecast

chromeos

codelabs

components

content

courgette

crypto

dbus

device

docs

accessibility

autofill

design

enterprise

experiments

fuchsia

gpu

images

infra

intl

ios

lacros

linux

mac

media

memory

memory-infra

patterns

privacy

privacy_budget

process

security

speed

speed_metrics

standards

telemetry_extension

testing

updater

webapps

workflow

DIR_METADATA

OWNERS

README.md

accessibility.md

ad_tagging.md

adding_to_third_party.md

android_accessing_cpp_enums_in_java.md

android_accessing_cpp_features_in_java.md

android_accessing_cpp_switches_in_java.md

android_build_instructions.md

android_cast_build_instructions.md

android_debugging_instructions.md

android_dynamic_feature_modules.md

android_emulator.md

android_isolated_splits.md

android_logging.md

android_native_libraries.md

android_studio.md

angle_in_chromium.md

api_keys.md

asan.md

atom.md

bitmap_pipeline.md

branch_sheriff.md

building_old_revisions.md

callback.md

ccache_mac.md

chrome_os_logging.md

chrome_settings.md

chrome_untrusted.md

chromedriver_status.md

chromeos_build_instructions.md

chromeos_glossary.md

chromium_browser_vs_google_chrome.md

cipd_and_3pp.md

cl_respect.md

clang.md

clang_code_coverage_wrapper.md

clang_format.md

clang_sheriffing.md

clang_static_analyzer.md

clang_tidy.md

clang_tool_refactoring.md

clangd.md

clion.md

closure_compilation.md

cocoa_tips_and_tricks.md

code_review_owners.md

code_reviews.md

commit_checklist.md

component_build.md

configuration.md

contributing.md

cq_quick_run.md

cr_respect.md

cr_user_manual.md

cross_platform_ui.md

cygwin_dll_remapping_failure.md

dangling_ptr.md

dangling_ptr_guide.md

dbus_mojo_connection_service.md

debugging_with_crash_keys.md

deterministic_builds.md

disassemble_code.md

documentation_best_practices.md

documentation_guidelines.md

early-hints.md

eclipse.md

emacs.md

erc_irc.md

flag_expiry.md

flag_guarding_guidelines.md

flag_ownership.md

frame_trees.md

gdbinit.md

get_the_code.md

git_cookbook.md

git_tips.md

google_chrome_branded_builds.md

google_play_services.md

graphical_debugging_aid_chromium_views.md

gwp_asan.md

history_manipulation_intervention.md

how_cc_works.md

how_to_add_your_feature_flag.md

how_to_extend_web_test_framework.md

idn.md

initialize_blink_features.md

inlined_stack_traces.md

installation_at_vmware.md

ios_build_instructions.md

ios_infra.md

ios_voiceover.md

kiosk_mode.md

lacros.md

life_of_a_frame.md

lldbinit.md

mac_arm64.md

mac_build_instructions.md

mac_lld.md

modifying_session_history_serialization.md

mojo_and_services.md

mojo_ipc_conversion.md

mojo_testing.md

native_relocations.md

navbar.md

navigation-request-navigation-state.gv

navigation-request-navigation-state.png

navigation.md

navigation_concepts.md

network_traffic_annotations.md

no_sources_assignment_filter.md

optimizing_web_uis.md

origin_trials_integration.md

ozone_overview.md

parsing_test_results.md

pgo.md

piranha_plant.md

process_model_and_site_isolation.md

profiling.md

profiling_content_shell_on_android.md

proxy_auto_config.md

python3_migration.md

qtcreator.md

release_branch_guidance.md

render-frame-host-lifecycle-state.gv

render-frame-host-lifecycle-state.png

render_document.md

rust.md

seccomp_sandbox_crash_dumping.md

servicification.md

session_history.md

sheriff.md

shutdown.md

special_case_urls.md

static_initializers.md

sublime_ide.md

system_hardening_features.md

tab_helpers.md

threading_and_tasks.md

threading_and_tasks_faq.md

threading_and_tasks_testing.md

toolchain_support.md

tour_of_luci_ui.md

tpm_quick_ref.md

translation_screenshots.md

trusted_types_on_webui.md

updating_clang.md

updating_clang_format_binaries.md

use_counter_wiki.md

useful_urls.md

user_data_dir.md

user_data_storage.md

user_handle_mapping.md

vanilla_msysgit_workflow.md

vscode.md

vscode_python.md

webui_build_configuration.md

webui_explainer.md

webui_in_chrome.md

webui_in_components.md

webview_policies.md

win_cross.md

win_order_files.md

windows_build_instructions.md

windows_native_window_occlusion_tracking.md

windows_pwa_integration.md

windows_shortcut_and_taskbar_handling.md

windows_split_dll.md

windows_virtual_desktop_handling.md

wmax_tokens.md

working_remotely_with_android.md

writing_clang_plugins.md

extensions

fuchsia_web

gin

google_apis

google_update

gpu

headless

infra

ios

ipc

media

mojo

native_client_sdk

net

pdf

ppapi

printing

remoting

rlz

sandbox

services

skia

sql

storage

styleguide

testing

third_party

tools

url

weblayer

.clang-format

.clang-tidy

.eslintrc.js

.git-blame-ignore-revs

.gitattributes

.gitignore

.gn

.mailmap

.rustfmt.toml

.vpython3

.yapfignore

ATL_OWNERS

AUTHORS

BUILD.gn

CODE_OF_CONDUCT.md

DEPS

DIR_METADATA

LICENSE

LICENSE.chromium_os

OWNERS

PRESUBMIT.py

PRESUBMIT_test.py

PRESUBMIT_test_mocks.py

README.md

WATCHLISTS

codereview.settings

dpapad 468d67cc44 WebUI: Update a few docs, make it clear that CSS Mixins no longer work.

Bug: 1374865
Change-Id: I4d9e6b40360d2405547d1a2bc6e173d8e3e5f647
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3971059
Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1062396}

2022-10-21 23:06:00 +00:00

2.2 KiB

Raw Blame History

Optimizing Chrome Web UIs

How do I do it?

In order to build with a fast configuration, try setting these options in your GN args:

optimize_webui = true
is_debug = false

How is the code optimized?

Bundling

JS Modules are used heavily throughout the code. Fetching all imports and their transitive dependencies can be slow, especially when there are too many requests during initial page load.

To reduce this latency, Chrome uses Rollup to bundle the code into a couple JS bundle files (usually one or two). This greatly decreases latency of initial load, by eliminating the overhead that is associated with each individual request.

JavaScript Minification

In order to minimize disk size, we run terser on all combined JavaScript. This reduces installer and the size of resources required to load to show a UI.

Code like this:

function fizzBuzz() {
  for (var i = 1; i <= 100; i++) {
    var fizz = i % 3 == 0 ? 'fizz' : '';
    var buzz = i % 5 == 0 ? 'buzz' : '';
    console.log(fizz + buzz || i);
  }
}
fizzBuzz();

would be minified to:

function fizzBuzz(){for(var z=1;100>=z;z++){var f=z%3==0?"fizz":"",o=z%5==0?"buzz":"";console.log(f+o||z)}}fizzBuzz();

If you'd like to more easily debug minified code, click the "{}" prettify button in Chrome's developer tools, which will beautify the code and allow setting breakpoints on the un-minified version.

Gzip compression of web resources

As of r761031 all HTML, JS, CSS and SVG resources are compressed by default with gzip Previously this was only happening if the compress="gzip" attribute was specified as follows in the corresponding .grd file:

<include name="IDR_MY_PAGE" file="my/page.html" type="BINDATA" compress="gzip" />

This is no longer necessary, and should be omitted. Only specify the compress attribute if the value is false or brotli.

Compressed resources are uncompressed at a fairly low layer within ResourceBundle, and WebUI authors typically do not need to do anything special to serve those files to the UI.

2.2 KiB Raw Blame History