Focus point indicator test record

"Loading speed," the main concern as follows:

• The internet
  • WIFI/4G/3G/2G
• start up
  • White screen time
  • The first screen time
  • Interactive time
• Cache
  • There Cache
  • Unbuffered
• Shorten the response time
  • CDN deployment
  • Reasonable sub domain
• HTTP requests
  • The combined resources
• HTTP status
  • Resources to deal with failure
• Optimization of single request
  • Caching mechanism
  • Compressed content
• Rational combination of resources
  • Preloading
  • Page Load
  • CSS put the top
  • js put at the bottom

 

 

Test attention indicators:

• [HTTP request number request if there is excess, an example: the rear end of the front section can do to achieve on request (note: except public add)]
  • A web page to reach the final end-user, 80% of the time in http request resources js, CSS, images, mp3, flash and so on. On the other hand, the number of http requests is also limited, browsers limit the number of connections on the same domain, different browser kernel, the number of requests different versions vary, the most number of concurrent requests is six.
  • Question: What kind of request should be done by the back end? What kind of request must be implemented by the front-end?
• Whether compression assembly
  • Compression: Sets the compression in the http request is received, the end of the Response Server resources are compressed and then passed to the browser. GZIP disposed generally used content-Encoding field. Transfer-Encoding: chunked
  • Compression objects: return resources from html http request, js, CSS, xml and so can set the compression, it is worth noting that we do not need pictures of the resource settings such as compressed music, because these resources themselves already compressed, the compression gains again It is not high, and increased CPU burden.
  • Question: Under what circumstances would do the compression? What documents support compression? Compression of the pros and cons?
• Image format and size is appropriate
  • Image Format: display better picture format, there webp, jpg and png24 / 32 that several common image formats, webp picture minimum
  • Image size: Size Image acquisition should be considered when a scene showing a specific image, such as a current mobile device commonly used sizes of 480 × 800,600 × 1024,720 × 1280,800 × 1280, etc., to ensure that the original image can be presentation, rather than by code images zoom in or out.
  • Image compression: For jpg, png format picture in itself has been compressed, which for scarce bandwidth resources is not enough, we also need to be more optimized compression algorithm, through a series of picture compression tools such as TinyPNG, Smush.it you can get better picture quality and compression unchanged.
  • Question: difference jpeg format pictures with jpg image format? Image size effect on the performance of large load is not? Size of the picture is generally recommended not to exceed the number of KB?
• css on top (CSS and js code if there is a separation):
  • In the browser rendering process comes, dom tree building when finished. CSS beginning of the end to put the head of the html code label. If the page is dynamically generated, you can page output after the head code completion, so the browser will parse out the contents of head of faster start downloading CSS file resources. The CSS at the bottom will cause redraw the user-side feel the "splash screen" bad experience.
  • Question: Under what circumstances CSS and js code suitable for the separation? Under what circumstances can not be done separate?
• js at the bottom
  • JS download time can cause two problems: to prevent and stop the show page content downloading other resources. In "reduce the number of http" part, we talked about all kinds of resources are downloaded in parallel, differ according to the number of domain names in different browsers different cores in parallel, so js download time, parallel downloads mechanisms fail. And may include an operating document.write js change the page layout, etc., so the rendering engine will wait before starting the download is complete js rendering. So the user side of the page load time because of the wait becomes longer.
• js & css compression
  • It is compressed from the source js & CSS file, http reduced transmission data size.
• Whether to add cache
  • Cache advantages: data cache interface, in some sensitive data is not new and high scenarios useful when data is first loaded in the non-priority request to use the last cached data, you can make the page more quickly rendered without waiting a new HTTP request again after the end of the rendering. 
  • Two ways to set the cache, pay attention to common resources when testing whether the cache settings Cache-Control whether the requested resource:
    • "No-cache" indicates a request or response message can not cache (HTTP / 1.0 is replaced by the Pragma no-cache)
    • "No-store" to prevent important information being inadvertently released. Sending the request message so that the request and response messages do not use the cache. The cache timeout indicates the presence Expires time, not allowing the client to check (Request) before this time, the max-age equivalent effect.
    • Question: What type of request caching will do? What documents suitable for caching? General caching options?
• To avoid non-return value 200
  • If there is a non-http request returns a status code of 200, we believe that this meaningless when the first request, taking up scarce network resources, the state should avoid returning non-code 200.
• Use CDN
  • CDN CDN (Content Delivery Network) to publish content to the source station closest to the user's "edge" node, so that users can go to obtain the desired content, improve response time and success rate of user access. Address the distribution, bandwidth, server brings the ability to access high latency problem.

  • Question: What will be used cdn distribution?

• Loading page? (Is there a lazy loading, pre-loaded)
• time
  • Time black and white: the user first page to see the content of the time, that is, the first time the rendering process is complete.
  • The first screen time: is the first screen the user sees that the entire top of the page size of the area of ​​the current window display the full time.
  • The first time Download: Free download is complete from the beginning of time to first download a resource, not including page rendering time.
  • The total resource download time: Free download is complete from the beginning of time to download all resources, not including page rendering time.
  • User operable time: the time to start loading the page from the user's response operation.