Welcome to Tencent cloud technology community, get more Tencent mass technology practice dry goods oh ~

Guide language: Is engaged in the front-end for 6 + years of time, it is from the beginning of the artists to refactor to bias js logic development of front-end developer, has been groped in front of this industry and study, I will now their years of an experience to a systematic carding wrote an essay about the theme of the performance optimization, hope to be a little help, Comments and suggestions are also welcome.

The author:Yong-gang liu

Front-end engineer is a profession that Internet companies have slowly begun to pay attention to in the recent 5-6 years, which can be said to be an emerging industry. I will use a simple mind map to take you to review the development process of front-end technology and the prospect of the future:

There was nothing to be said for 1.0, when HTML and CSS ruled, and you could develop a calculator using JS. 2.0 era is the best era, new technology, new ideas flourish, can be called the front of the industrial revolution, the status of the front personnel has been fully recognized, the threshold has also been raised. Front end performance optimization involves points from the server to agreement to host environment itself have more deep understanding, summed up the industry at present mainly based on yahoo article 35 gold catch front-end performance optimization (www.cnblogs.com/siqi/p/3655… As a reference. Today I want to give you a bird ‘s-eye view of some of the current practices of front-end performance optimization and the starting point for doing so. The original intention of the article is mainly to review the basic knowledge of some performance optimization and system combing, not to do in-depth analysis of specific technical points, point to the end, personal understanding of the wrong place welcome you big god clap brick, cast a brick to attract others.

I’ll start with a cliche:

“What happens from the time the user enters the URl to the time the page is presented to the user’s browser client?”

Here is a diagram to briefly describe the steps:

The goal of Web optimization is how to make users faster, easier to use and smoother to use our services. For front-end development, it is how to make our resource volume smaller, quantity more concise, content earlier and interaction more humanized.

Web performance optimization of a people is recognized and principle, is the resource from the server processes the issued to the client browser (above step 6) accounts for the proportion of time is about 20% of the whole process, that is to say, the server can optimize the efficiency of the space is not very obvious, the front-end performance optimization become web performance optimization of key areas, I will make my own reflections (with some overlap with the 35 catch-22 rules) and summary from the following dimensions:

First, browser host environment

1. Break the blocking limit for single-threaded parsing rendering

Browser is a single-threaded mode to parse HTML text rendering from the server side, the CSS in the process of loading can cause obstruction to the subsequent script resource loading, script loading will block subsequent parsing the DOM structure cause page space time growth, yahoo’s 35 is a clause in the catch style files in the head, Script files are placed at the end of DOM nodes to reduce blocking. Here are a few more optimizations for script files:

  • Js scripts that do not need DOM manipulation (mainly considering that scripts that need to manipulate DOM often need to obtain some style information) can be loaded by dynamically creating scripts, which do not block the loading of subsequent resources.
  • Script files can be loaded with defer or async attributes to prevent blocking (see the difference between the two)

2. Take advantage of the event bubbling feature

The bubbling feature of the browser’s event model is one of the coolest things I’ve ever seen. It solves the problem where the browser doesn’t parse the DOM model in sync and the developer can’t find the object by registering the event callback to the DOM object.

Browser event registration is defined at three levels: DOM 0-level event registration (registering event callbacks using the DOM element inline event attribute onclick), DOM 1-level event registration (registering event callbacks externally using the DOM element object’s onClick API), DOM level 2 event registration (by using the DOM element object addEventListner/attachEvent API registered in external event callback). The suggestion for performance optimization here is to use DOM2 level to register callbacks in the parent tag of the target DOM (most frameworks register event listeners in the body tag), closing the event listener entry and saving the DOM node reference overhead.

3. Avoid Cookie performance bugs

Cookie is the most commonly used caching scheme for the front end as the front and back login state verification. However, in view of the situation that the browser automatically carries Cookie information to HTTP requests of any resources in the same domain every time, it is necessary to optimize it, because resource requests such as CSS, JS and image do not need Cookie information. This will cause unnecessary waste of request bandwidth (imagine that our cookie size is assumed to be 10K, and 100 requests are nearly 1M in size, which is quite a burden under our current network bandwidth with high concurrency). The Cookie free performance optimization scheme is handled by deploying our front-end CSS, JS and image resources on the CDN foreign domain static resource server.

Take the cross-border remittance in Hong Kong that I am currently in charge of for example

Requests for resources under the page path:

CDN resource loading request:

Resource requests deployed separately by comparing CDNS do not carry cookie information.

4. Break the browser’s concurrent connection limit

Browsers limit concurrent connections to domains rather than pages. The technical optimization of Domain Hash is to divide resources into domains and deploy them separately. However, because excessive domain division will increase the excess DNS overhead, the number of passes is less than 3. At present, our Hong Kong and Philippine remittance business only has two domain names deployed separately, one is the master station and one is the CDN. I personally suggest that it would be better to deploy the image resources in the CDN separately and another domain name. Why to separate the images will be discussed later.

5. Use GPU hardware to accelerate browser rendering

CSS3 attribute :translateZ(0) -webkit-transform:translateZ(0) fake 3D attribute :translateZ(0) Here’s a simple explanation:

For our browsers, take our HTML text strings and start parsing them sequentially into a DOM tree, matching the synced CSS to generate a render tree. (Nodes that do not correspond exactly to each node in the DOM tree, such as display: None, are not inserted into the render tree.)

Photo segmentfault.com/a/119000000…

The browser will render the nodes of the tree as a layer, so that each layer is stacked together to create a layout, which is similar to the concept of Photoshop layer stacking (you can use firefox developer tools 3d to display more intuitive). Under normal circumstances, any size change of nodes will cause layout rearrangement and redrawing (rearrangement and redrawing are the factors that cause the biggest performance loss of browser rendering), but there is a situation that the Composite Layers are directly assigned to the separate synthesizer process in our GPU. Its own changes will not cause the position of other layers to change, will not cause rearrangement redraw. The TranForm 3D property quietly tells our browser to leave element parsing as a composite layer to a separate process.

Note: there is a principle here, can not abuse our acceleration, because too much hardware acceleration will consume more user memory space, but also more power consumption, generally for CSS3 animation recommended to enable

Http dimension

1. Reduce the number of HTTP requests

A. Access solution

  • CSS, script combination: gulp and Webpack can be easily automated through task scripts. At present, our team uses our self-developed front-end construction tools to do the pre-release resource packaging task with our Dust library, and the core is to use gulp.
  • CSS Sprites: integrate some small pictures commonly used on websites into a large picture, and find your own picture through background-position 2d coordinate positioning in the style. A rule of thumb is to reuse ICONS and images that are hard to change, such as buttons and tiles on the background.
  • Font icon: The use of font icon library is a very innovative way, because it is vector, to solve the problem of bitmap pixel amplification and virtual, the experience is very good, compared with the same vector SVG is easier to use, a CSS font-family can be used as usual font setting, Taobao is the pioneer in this aspect. Has its own set of very open vector icon library platform. Many of taobao’s own small ICONS are displayed with font ICONS.

  • Image Base64 encoding transmission: Image Base64 encoding, can let the browser reduce their own HTTP request, but because of some of its own defects, can not be abused (even a small image encoding will have a large string of characters, increasing our CSS volume, performance is not reduced but increased), My advice is to code for ICONS that are site-wide or too small to be integrated into Sprite images, but there are many different scenarios that you can weigh yourself.

  • Image delay loading: Mainly to reduce the loading amount of one-time images on the first screen. This is done by setting a private inline attribute (data-image) for the image or tag to store the address information of the target image, listening for the browser’s scroll event, and displaying the image address in the SRC attribute of the image or in the background image of the tag style when the tag is in the browser’s viewable area. The approach of Taobao home page is to use a div to do delayed picture loading, through the background picture to show the final picture.

Picture before display:

After the pictures are shown:

B. Caching mechanism

  • Protocol cache scheme: use HTTP cache header cache-control to do the 304 cache, or more precise ETAG setting to set the cache scheme based on the resource modification time. However, a more effective or extreme way is to use max-expire-time to set the maximum cache time of resources, assuming that it is a long cache of 1 year. Updating by non-overwrite update is a common practice of large companies at present. Instead of running an HTTP request to the server to get status 304, each request is only read from the client cache (status:200, size:from cache). Or take a screenshot of taobao home page picture long cache as an example:

  • AppCache application cache solution: Offline applicationCache h5 provides a relatively effective offline application solution, using navigator.online, window.applicationCache objects, server. Appcache (formerly.manifest) configuration file to ensure that offline mobile web applications are still available. If you want to do offline data also add window. LocalStorage to do offline data save. Here are the steps to access offline applications:

1. Set the manifest attribute for the HTML tag of the page that needs to be cached offline, and specify the cache configuration file cache.appcahe (any extension can be set, as long as the server is set to text/cache-manifest).

2. Create the cache. appCache profile specified in the previous step and configure the resources as described in the screenshot below

3. On the server, set the MIME-type of the extension mapping of the configuration file to text/cache-manifest

Appcache offline solution is criticized too much, currently access is not much, there is a trend of slowly becoming abandoned, here put forward for everyone to weigh

  • PWA(Progressive Web Apps) solution: Google’s new offline Web solution, which uses manifest.json configuration files and window.serviceWorker objects to implement a natively-like offline app experience, is an upgrade of the browser’s app cache (not covered here for the length of this article).

Reduce the size of HTTP data requests

A. Access solution

  • CSS, Script, image compression: these can be done by defining script tasks in gulp or Webpack automation scripts.

  • Server open GZIP compression: generally now the server has opened gZIP compression, compression rate is usually more than 30%, the effect is good.

The original:

After Gzip compression:

  • Image server dynamic response scheme: this scheme corresponds to the above host environment dimension domain Hash to separate an independent domain to deploy image resources. Image resources are a very large part of the cost of website request resources. In the past, we could build an image directory in the static resource server to store it. With the development of website services, images not only face the pressure of diversification and high concurrency. In the mobile waP site, it is necessary to dynamically adapt the scene of picture size under different screen resolutions in order to save bandwidth. The individual architecture of the image server has a certain complexity (considering the high concurrency disaster recovery and caching mechanism, it is no less than the construction of a large web site cluster, and there is an article recommended for everyone to read). Here we will only discuss the function of the server (referred to as the image server) responsible for the image service part. The cutmap server provides a restful URL call, such as www.xxx.com/xxx image path… /… Tell the cutting graph server to compress the XXX picture under “XXX picture path” into 130*120 picture size and return it. This service can be created by using node, which is familiar with our front end, and of course can also be provided by PHP.

B. Page slice preloading scheme

The last piece of static resource dimension of performance optimization is for pages. How to output page modules as early as possible and reduce white space is a thinking point. The BigPipe scheme of Facebook application is a good idea for reference. There is also a corresponding slicing scheme for taobao’s home page, which divides the page into reasonable blocks and establishes a corresponding mechanism between the server and the client, so that each page block can be spliced together and spitted out in parallel on the server side. At present, I do not have a deep understanding of this. Here just put forward the bigPipe scheme for your reference.

Third, TCP dimension

The three-way handshake and slow start of TCP connections ensure that the utilization efficiency of connection channels is a significant factor that restricts performance. Because HTTP is an application protocol based on TCP, the TCP layer dimension should be considered from the development history of several versions of HTTP:

  • Http1.0 period: TCP connection is based on a single channel sequence waiting for the request response (the client each sent a request to re-establish a connection), specific historical background generated, low efficiency is difficult to keep up with the development of The Times, 1999 revised version 1.1 on the basis of 1.0, and still in use.
  • Http1.1 period: In the request header, the keep Alive function is added (of course, 100 Status is also added to save bandwidth and cache features), which allows different application requests to be sent repeatedly during the lifetime of a connection channel, reducing the connection resource utilization efficiency to a certain extent. However, these requests still need to be re-established when the user’s browsing time is longer than the connection activity cycle. In the context of large technology companies’ efficient utilization of resources under high concurrency and high availability, version 1.1 is still unable to meet the requirements of large companies for efficient utilization of network resources under high performance conditions.

Google (叒 is Google, awesome) took the lead in 09 years based on TCP developed a new SPDY application protocol, to solve the multiplexing request optimization, server push pain point problem, also laid a foundation for the launch of http2.0 behind. Optimization we can do: reduce some unnecessary requests (eliminate 404 dead connections, 304 requests with our long cache mechanism) to optimize, minimize some unnecessary connection requests.

Four, code implementation

In view of the flexibility of JS language itself, as well as everyone’s development habits, it is difficult to have a good way to verify the efficiency of developers’ code implementation (at present, more is to monitor the execution time of the code by means of speed measurement), more is a kind of suggestion, we have better suggestions can be put forward to share.

  • Single thread limit: Using asynchronous callback & multithreading API to break through the problem of insufficient utilization of memory overhead caused by single thread of JS language, Can use some of the existing asynchronous callback can be tried to use settimeout, for example, setinterval, requestAnimationframe (recommended) with it, multithreaded way of API have WebWork. Here I recommend a Japanese developer to develop a multithreaded front-end library concurrent.thread.js (it is the author with setTimeout and setInterval to simulate multithreading, you can search online to learn).

  • Focus on optimizing the loop structure in the code: as far as the code itself is concerned, most of the impact on the execution efficiency is the increase of the time and space complexity caused by the unreasonable design of the loop structure and algorithm. Here are two screenshots of code from the actual project for comparison:

Example function needs: to achieve the effect of each 4 characters of the input field separated by a space

An inefficient way to implement this is with a for loop:

The improved way:

  • Use design patterns to optimize code structure: The proper use (and not abuse) of design patterns can lead to memory optimizations that improve execution efficiency, such as singletons and simple factories for creating XHR request objects: A simple factory is created to supply XHR objects to the outside world. Inside the factory, an array queue singleton is created with closures to store XHR objects. XHR objects with readyState free (0/4) are pulled from the queue when the caller needs them. In applications with a large number of Ajax object requests, the memory cost of creating an XHR can be minimized. Here’s a diagram to illustrate the idea:

  • Other optimizations: reduce the number of frequent DOM node manipulations by JS (which is intended to be placed in the host environment dimension) and reduce browser rearrangement and redrawing; For example, for DOM tag objects (mainly for the problem that references to DOM objects under IE will be missed by GC) and reference type variables inside closures, remember to release them in time when they are used up to avoid memory leaks.

5. Product interaction logic

Performance optimization is usually done from a technical point of view, but one of our goals is to make it easy for users to use. When technical performance defects are difficult to avoid, as the executor of front-end interaction implementation, we should cooperate with the product and interaction designer to put forward a better interactive logic experience scheme to make our data loading less likely to make users feel waiting and our hints more comfortable. (Interaction designers are more professional, so I’m not going to try to teach them how to suck fish.)

The Foreground of Web3.0 era:

At the end of the article, I make my own conjecture about the Web3.0 era. Web3.0 has not been clearly defined in the industry, so we can boldly guess the future form of the front-end industry. I first YY here, artificial intelligence, big data wide application should be the best opportunity to promote the front-end into the era of 3.0, so as to trigger a new front-end revolution:

  • Browser becomes a system ecosystem (as for which browser is not easy to say now, Google Browser PWA program provides front-end app development program has this trend, there is no need to install the system in the future). The front end is no longer the data porter, in the Web field is likely to be in addition to the bottom maintenance database engineers continue to work deeply (mainly into the cloud computing field), the other can be turned to the front end to do browser system ecology (ah ah, there is a kind of serf do master feeling.
  • The traditional HTML semantic hypertext markup language has been difficult to carry more information data, HTML5 continues to develop deeply, no longer just a browser dedicated markup language, may become a cross-platform standard information representation layer, information representation diversity unprecedented, may not be called HTML at that time.
  • Http2.0 became a widely tested standard, and further deepened, security verification layer to do similar blockchain decentralization ideas, do extreme security (HTTPS estimation can be laid off).
  • Js has become the recognized standard implementation language for cross-platform (currently the front-end cross-platform foundation form has already existed), and with the widespread promotion and in-depth improvement of Es6, it may not be as flexible as it is now, but more like a qualified standard “high-level” scripting language.

  • (The above conjecture is purely personal understanding, without authoritative certification, you can speak freely)


reading

Hundreds of millions of visits under the front-end isomorphism straight out of practice

Tencent’s special test way

From 10 Gb to 40 Gb, from millions to tens of millions of forwarding, build high-performance TGW

This article has been published by Tencent Cloud technology community authorized by the author, please indicate the source of the article if reproduced

The original link: https://cloud.tencent.com/community/article/879614