0
Files
android_webview
apps
ash
base
blink
build
build_overrides
cc
chrome
chrome_elf
chromecast
chromeos
cloud_print
components
content
courgette
crypto
dbus
device
docs
accessibility
design
images
ios
media
memory
memory-infra
process
security
speed
sync
testing
ui
OWNERS
README.md
accessibility.md
adding_to_third_party.md
android_accessing_cpp_enums_in_java.md
android_build_instructions.md
android_cast_build_instructions.md
android_debugging_instructions.md
android_logging.md
android_studio.md
android_test_instructions.md
angle_in_chromium.md
atom.md
bitmap_pipeline.md
browser_view_resizer.md
callback.md
ccache_mac.md
chrome_settings.md
chromedriver_status.md
chromium_browser_vs_google_chrome.md
chromoting_android_hacking.md
cl_respect.md
clang.md
clang_format.md
clang_static_analyzer.md
clang_tidy.md
clang_tool_refactoring.md
closure_compilation.md
cocoa_tips_and_tricks.md
code_reviews.md
component_build.md
cr_respect.md
cr_user_manual.md
cygwin_dll_remapping_failure.md
documentation_best_practices.md
documentation_guidelines.md
eclipse.md
emacs.md
erc_irc.md
es6_chromium.md
fuchsia_build_instructions.md
fuchsia_sdk_updates.md
get_the_code.md
git_cookbook.md
git_tips.md
google_play_services.md
graphical_debugging_aid_chromium_views.md
gtk_vs_views_gtk.md
how_to_add_your_feature_flag.md
how_to_extend_layout_test_framework.md
installation_at_vmware.md
ios_build_instructions.md
ios_infra.md
ios_voiceover.md
ipc_fuzzer.md
jumbo.md
kiosk_mode.md
layout_tests_linux.md
linux_build_instructions.md
linux_build_instructions_prerequisites.md
linux_building_debug_gtk.md
linux_cast_build_instructions.md
linux_cert_management.md
linux_chromium_arm.md
linux_chromium_packages.md
linux_crash_dumping.md
linux_debugging.md
linux_debugging_gtk.md
linux_debugging_ssl.md
linux_dev_build_as_default_browser.md
linux_development.md
linux_eclipse_dev.md
linux_graphics_pipeline.md
linux_gtk_theme_integration.md
linux_hw_video_decode.md
linux_minidump_to_core.md
linux_password_storage.md
linux_pid_namespace_support.md
linux_plugins.md
linux_profiling.md
linux_proxy_config.md
linux_sandbox_ipc.md
linux_sandboxing.md
linux_suid_sandbox.md
linux_suid_sandbox_development.md
linux_sysroot.md
linux_zygote.md
mac_build_instructions.md
mandriva_msttcorefonts.md
network_traffic_annotations.md
new_port_policy.md
old_chromeos_build_instructions.md
old_chromoting_build_instructions.md
optimizing_web_uis.md
optional.md
origin_trials_integration.md
ozone_overview.md
piranha_plant.md
profiling_content_shell_on_android.md
proxy_auto_config.md
qtcreator.md
release_branch_guidance.md
retrieving_code_analysis_warnings.md
seccomp_sandbox_crash_dumping.md
servicification.md
static_initializers.md
sublime_ide.md
subtle_threading_bugs.md
system_hardening_features.md
tab_helpers.md
task_scheduler_migration.md
test_descriptions.md
threading_and_tasks.md
tour_of_luci_ui.md
tpm_quick_ref.md
updating_clang.md
updating_clang_format_binaries.md
useful_urls.md
user_data_dir.md
user_handle_mapping.md
using_a_linux_chroot.md
using_build_runner.md
vanilla_msysgit_workflow.md
vscode.md
webui_explainer.md
webui_in_components.md
webview_policies.md
win_cross.md
win_order_files.md
windows_build_instructions.md
windows_split_dll.md
working_remotely_with_android.md
writing_clang_plugins.md
extensions
gin
google_apis
google_update
gpu
headless
infra
ios
ipc
jingle
mash
media
mojo
native_client_sdk
net
pdf
ppapi
printing
remoting
rlz
sandbox
services
skia
sql
storage
styleguide
testing
third_party
tools
ui
url
.clang-format
.eslintrc.js
.git-blame-ignore-revs
.gitattributes
.gitignore
.gn
.vpython
AUTHORS
BUILD.gn
CODE_OF_CONDUCT.md
DEPS
ENG_REVIEW_OWNERS
LICENSE
LICENSE.chromium_os
OWNERS
PRESUBMIT.py
PRESUBMIT_test.py
PRESUBMIT_test_mocks.py
README.md
WATCHLISTS
codereview.settings
src/docs/optimizing_web_uis.md
dpapad d0ef1a9772 WebUI cleanup: Rename use_vulcanize GN flag to optimize_webui
Vulcanize tool has been replaced with polymer-bundler. But also several
other optimization tools are invoked when this flag is used
(polymer-css-build, crisper, uglify), therefore the more generic
"optimize_webui" name seems more appropriate. This is addressing an
already existing TODO in the code.

Bug: 731881
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I0d25b1306141ef01f4d40a0cb9c0b79cccb6837f
Reviewed-on: https://chromium-review.googlesource.com/663215
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Dan Beam (no longer on Chrome) <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#502639}
2017-09-18 19:32:12 +00:00

3.4 KiB

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?

Resource combination

HTML imports are a swell technology, but can be used is slow ways. Each import may also contain additional imports, which must be satisfied before certain things can continue (i.e. script execution may be paused).

<!-- If a.html contains more imports... -->
<link rel="import" href="a.html">
<!-- This script is blocked until done. -->
<script> startThePageUp(); </script>

To reduce this latency, Chrome uses a tool created by the Polymer project named polymer-bundler. It processes a page starting from a URL entry point and inlines resources the first time they're encountered. This greatly decreases latency due to HTML imports.

<!-- Contents of a.html and all its dependencies. -->
<script> startThePageUp(); </script>

CSS @apply to --var transformation

We also use polymer-css-build to transform CSS @apply mixins (which are not yet natively supported) into faster --css-variables. This turns something like this:

:host {
  --mixin-name: {
    color: red;
    display: block;
  };
}
/* In a different place */
.red-thing {
  @apply(--mixin-name);
}

into the more performant:

:host {
  --mixin-name_-_color: red;
  --mixin-name_-_display: block;
}
/* In a different place */
.red-thing {
  color: var(--mixin-name_-_color);
  display: var(--mixin-name_-_display);
}

JavaScript Minification

In order to minimize disk size, we run uglifyjs 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

In certain cases, it might be preferable to leave web resources compressed on disk and inflate them when needed (i.e. when a user wants to see a page).

In this case, you can run gzip --rsyncable on a resource before it's put into a .pak file via GRIT with this syntax:

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

Gzip is currently set up to apply to a whole WebUI's data source, though it's possible to exclude specific paths for things like dynamically generated content (i.e. many pages load translations dynamically from a path named "strings.js").

To mark a WebUI's resources compressed, you'll need to do something like:

WebUIDataSource* data_source = WebUIDataSource::Create(...);
data_source->SetDefaultResource(IDR_MY_PAGE);
data_source->UseGzip({"strings.js", ...});  // Omit arg to compress everything