Web Performance Optimization Analysis

If your site is in 1000ms Nega, then there will be an average of one user to stay down. In 2014, the average web page size was 1.9MB. Read more about the statistics.

Direct hit scene

"HTML Development macosapp Tutorial" Http://pan.baidu.com/s/1jG1Q58M

The core content of the site needs to be presented within 1000MS. If it fails, the user will never visit your website again. By reducing the time it takes to load pages, many well-known companies have a significant increase in revenue and download volumes. Like what

• Each time the Walmart is reduced by 100ms, their revenue is increased by 1%.
• Each time Yahoo reduced the load by 400ms, they increased their traffic by 9%.
• Mozilla has boosted their page speed by 2.2 seconds, gaining more than 160 million Firefox downloads per year.

Steps for site optimization

1. Set the performance budget.
2. Test the current performance.
3. Identify areas that cause performance problems.
4. Finally, Duang, use optimization stunts.

Here are a few ways to improve your page performance, let's take a look at

Speed Indicator

The speed indicator is the average speed at which the visible part of the page is rendered in the browser. Represents the form of milliseconds, and depends on the size of the viewport. See (Display the page load time in seconds in the form of a video frame).

The lower the speed indicator, the better.

Speed metrics can be tested by webpagetest (maintained by Google)

short story

Webpage test has many features, such as running multiple tests with different browsers in different places. You can also measure other data such as load time, number of DOM elements, first byte time, etc...

For example: View Amazon's test results on webpagetest.

Take a look at this video to learn more about webpagetest (FQ), which is explained by Patrick Meenan .

Render blocking

If you know how the browser works, then you should know how HTML, CSS, JS is parsed by the browser and which block the rendering of the page. If you don't know, please look.

Click how a browser works to learn more about how the browser works (author Tali Garsiel and Paul Irish).

steps for browser rendering

1. First, the browser parses the HTML tag to construct the DOM tree (DOM = Document Object model)
2. Then parse the CSS to construct the CSSOM tree (CSSOM = CSS object model CSS)
3. The JS file is parsed and executed before the DOM and cssom trees are combined into a render tree.

Now that you know how the browser is parsed, let's see what part of the rendering tree is blocking the build.

1. Blocking the rendered CSS

Some people think that CSS blocks rendering. When constructing Cssom, all CSS will be downloaded, regardless of whether they are used in the current page.

To resolve this rendering blocking, follow the two steps below to do

1. Embed the key CSS inside the page and write the style that is used for the most important (the part of the page that is visible at the first load) to the<style></style>里。
2. Remove the unused CSS.

So how do I find out which CSS is useless?

1. Use Pagespeed Insight to get statistics like unused CSS, blocking rendered CSS and JS files, and so on. For example: Flipkart's pagespeed insight statistical results.
2. Use gulp tasks, such as gulp-uncss, or use grunt tasks, such as grunt-uncss. If you don't know what they are, please read my previous article.

# #专业小贴士

1. Use CSS stats to ensure that there are absolutely no unused elements in the page, unique styles and fonts, and so on.
2. Pagespeed Insight Chrome plugin.
3. Tag Counter Chrome plugin.

2. Render blocked JavaScript

If the browser encounters JavaScript while parsing the HTML markup, the parsing stops. The HTML rendering will continue only after the script has finished executing. So this blocks the rendering of the page.

In order to solve it

Use the async or defer feature in the <script></script> tab.

1. <script async> will download the file during HTML parsing and execute it as soon as it finishes downloading.
2. <script defer> will download the file in HTML parsing and execute it after the HTML parsing is complete.

Example: Async and defer are used in Google Analytics

Click to view the browser support for async and defer.

Memory Leaks

Memory leaks and page bloat are one of the problems that front-end developers face. Let's take a look at how to discover and resolve memory leaks.

Looking for memory leaks in JavaScript

Use Chrome Task Manager to detect the memory used by the app and the JS memory (total memory + real-time memory). If your memory continues to increase with each of your operations, you can suspect a memory leak.

The following is the Chrome Task Manager .

Chrome Devtools Analytics

Use the Heap Profiler to view the memory leaks. Open Chrome DevTools and click the Profiles tab, then select Take heap snapshot. If you don't know chrome DevTools, please read the previous article.

Heap Profiler has four snapshot views (snapshot view)

1. Summary View – Shows the total number of objects and their total instances, the shallow (shallow) size (the memory size of the object itself), and the reserved (retained) size (the amount of memory freed after the automatic GC occurs + the memory size of the object that cannot be executed).
2. Comparison view-Used to compare two or more snapshots of an operation before and after a memory leak can be detected.
3. Containment View-Shows the overall view of your app object schema + Domwindow object (under Global object), GC root, local object (from browser).
4. Dominators View-Shows the heap diagram of the Dominators tree.

Click to learn more about HEAP Profiler.

Dom Leaks

A reference to a DOM element causes the DOM to leak and prevents automatic garbage collection (GC) from being made.

Take a look at an example

1 2 3 4 5

<div>    <div id="container">        <h1 id="heading">I am just a heading nothing much</h1>    </div></div>

1 2 3 4 5 6 7 8

var parentEle = document.getElementById(‘container‘); //get parent ele reference 得到父元素的引用 var headingEle = document.getElementById(‘heading‘); //get child ele reference 得到子元素的引用 parentEle.remove(); //removes parent element from DOM 从DOM中移除父元素 //but its child ref still exist, So parentEle won‘t collect GC‘d and causes DOM Leak//但是它的子元素引用仍然存在，所以parentEle不会被GC回收，因此导致了DOM泄漏。

Set its reference to NULL to fix the DOM leak.

1	headingEle = null; //Now parentEle will be GC‘d

This is the problem that front-end developers often encounter. That's all for today. If you like my article, please share or comment below. Thank you!!

Web Performance Optimization Analysis