附：词汇表
A
Accelerated Mobile Pages(AMP)
Accelerated Mobile Pages are web pages that load very quickly. AMP pages are built with three core components: AMP HTML, AMP JS, and the AMP Cache. AMP HTML is HTML with some restrictions for reliable performance. AMP JS is a library that ensures the fast rendering of AMP HTML pages. The AMP Cache is a proxy-based content delivery network used to serve cached AMP HTML pages.
add to home screen(A2HS)
Add to home screen is a method where Progressive Web App developers can implement web app install banners to help users quickly and easily (with one touch) add web apps to their Android mobile device’s home screen, making it easy to launch and return to an app.
application shell
An application shell (or app shell) architecture is one way to build a Progressive Web App that reliably and instantly loads on your users' screens, similar to what you see in native applications. The app shell is the minimal HTML, CSS and JavaScript required to power the user interface and when cached offline can ensure instant, reliably good performance to users on repeat visits.
C
content delivery network(CDN)
A CDN is a network of geographically distributed servers that cooperate to satisfy requests for content. CDNs optimize content delivery by distributing copies of files (such as videos, images, HTML, CSS and JavaScript) to multiple servers. This reduces latency by placing the content closer to the requestor. For example, if a user in India requests a web page from a Brazilian website, the request could be rerouted to deliver assets served from a local CDN server in Mumbai.
SeeContent deliver network on Wikipedia
custom element
A Custom Element is a developer defined HTML tag. These elements are the foundation of Web Components and can be used to create any sort of UI.
SeeCustom Elements v1: Reusable Web Components
D
DOMContentLoaded(DCL)
Defined by the HTML specification:
The DOMContentLoaded reports the time when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
SeeDCL on MDN
F
Fast, Integrated, Reliable, Engaging(FIRE)
Progressive Web Apps (PWA's) should be fast, integrated, reliable, and engaging.
fetch API
The fetch API is a promise-based JavaScript interface for requesting resources and reading responses. It provides a global fetch() method that gives an easy, logical way to fetch resources asynchronously across the network. Fetch is a successor to the older XMLHttpRequest.
First Contentful Paint(FCP)
Defined by the Paint Timing API and available in Chrome M60+:
First Contentful Paint reports the time when the browser first rendered any text, image (including background images), non-white canvas or SVG. This includes text with pending webfonts. This is the first time users could start consuming page content.
First Meaningful Paint(FMP)
First Paint(FP)
Defined by the Paint Timing API and available in Chrome M60+:
First Paint reports the time when the browser first rendered after navigation. This excludes the default background paint, but includes non-default background paint. This is the first key moment developers care about in page load – when the browser has started to render the page.
First, Last, Invert, Play(FLIP)
FLIP is a technique to set up high-performance animations using CSS transforms. To avoid janking animations, start and end position are evaluated during the setup so that the animation doesn't have to do any expensive calculations.
flexbox
The Flexible Box Layout Module (Flexbox) is an API that provides tools to make web content responsive. Flexbox provides an efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown and/or dynamic. The API allows the rapid creation of complex, flexible layouts, and features that have historically proved difficult with CSS.
H
Hypertext Transfer Protocol Secure(HTTPS)
HTTPS is a protocol in which the connection between the server and client is encrypted, helping to protect users' information and prevent tampering. APIs such as the Service Worker, Google Maps API, and File API must be served over HTTPS. HTTPS is implemented using the Transport Layer Security (TLS) protocol. Although TLS supersedes Secure Sockets Layer (SSL), it is often referred to as SSL.
L
lifecycle callback
Every Custom Element has a set of built-in lifecycle callbacks, or "reactions" that are called when the element is added/removed from the page, or has an attribute mutated.
SeeCustom elements - lifecycles
Lighthouse
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.
SeeLighthouse
M
mutation observer
Mutation Observers are a web platform API to detect and react to change to the DOM tree. If an element is observed by a MutationObserver, events like appending a new element or removing and existing one will trigger a function to execute.
SeeDetect DOM changes with Mutation Observers
O
onload(OL)
Defined by the HTML specification:
The load event is fired when the page and its dependent resources have finished loading.
SeeOL on MDN
P
Progressive Web App(PWA)
Progressive Web Apps are user experiences that have the reach of the web, and are fast, integrated, reliable and engaging.
promise
A JavaScript promise is an object that is used as a placeholder for the eventual results of a deferred (and possibly asynchronous) computation. JavaScript promises are an addition to ECMAScript 6 that provide a cleaner, more intuitive way to deal with the completion (or failure) of asynchronous tasks.
push notifications
Web push notifications make it easy to re-engage with users by showing relevant, timely, and contextual notifications, even when the browser is closed.
Push, Render, Pre-cache, Lazy-load(PRPL)
PRPL is a pattern for structuring and serving Progressive Web Apps (PWAs), with an emphasis on the performance of app delivery and launch.
R
requestAnimationFrame(rAF)
requestIdleCallback(rIC)
Response, Animation, Idle, Load(RAIL)
RAIL is a user-centric performance model. Every web app has these four distinct aspects to its life cycle, and performance fits into them in different ways.
SeeMeasure Performance with the RAIL Model
responsive design
Responsive web design is an approach to web design aimed at making web pages visually appealing and performant on any form factor. In addition, it is important to understand that responsive web design tasks include offering the same content to a variety of devices for a single website.
SeeResponsive Web Design Basics
S
Service Worker
Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available and updated assets reside on the server. They also allow access to push notifications and background sync APIs.
SeeIntroduction to Service Workers
shadow DOM
Shadow DOM introduces scoped CSS and DOM to the web platform. It lets developers write encapsulated UI components which can be used in any application.
SeeShadow DOM v1: Self-Contained Web Components
single page app(SPA)
A single page app is user-friendly app that performs more like a desktop app. Typically, SPA content is rendered dynamically using JavaScript, rather than opening a new page. As a result, single-page applications typically load only data (e.g. in JSON or XML format) rather than pre-rendered HTML. This decreases the data transferred on the wire.
splash screen
A splash screen is a graphic that is shown to users while an application is loading in the background, giving immediate feedback to the user while the application is launching.
T
Time To First Byte(TTFB)
Time To First Paint(TTFP)
Time To Interactive(TTI)
W
web app manifest
A web app manifest is a JSON-formatted file named manifest.json that is a centralized place to put metadata that controls how the web application appears to the user and how it can be launched. (Do not confuse this with a manifest file used by AppCache.) Some browsers, such as Chrome, use the web app manifest to enable 'add to homescreen'.
web components
Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.