The first 18 - Performance Optimization movement end

Performance optimization of key indicators

• Page load
• Image optimization
• CSS Optimization
• Scripts optimization

H5 performance considerations

• Browser performance
  • Traditional ways of website performance testing
    • With traditional development tools View network requests, that use the browser's developer tools
    • Use happen intrusive JavaScript code detection DOM events
    • The use of third-party service tools, such as: webPagetest Pingdom
  • This measure over several test mode is relatively simple, but the basic timing and flow calculation functions, for some other indicators, such as the status of the battery and other aspects of the test does not detect reflected, and is in a conventional manner difficult to achieve
  • To solve this problem, W3c introduced a performance test standard API, present the browsers support this standard are very mature, the purpose of this standard is to simplify the developer of the site performance analysis and precise control of process improve, and ultimately performance
  • For example: Navigation Timing API(Navigation Timing) to help web developers to determine the actual user data, such as: bandwidth, delay or the home page of the overall load time
• Network Performance
  • Savings for the user traffic is mobile development issues to be considered, in the front-end technology, it is necessary not only to save bandwidth while still allowing some of the pages experience a good strategy.
  • Common network performance problems are the following:
    • DNS issues:
      • DNS failure or hijacked
      • DNS resolution is slow or fails
    • TCP connection problems: DNS is obtained after a successful destination IP address, you can initiate a TCP connection, so successful and time-consuming TCP connection has also become a factor in network performance. A common problem in TCP connections on TCP port have been closed and TCP connection timeout
    • Transmission load is too large: more than just pass pass slow, if not do special optimization, traffic load may be much larger than the actual need for time-consuming overall network impact is very large, requiring special attention to volume control page size, avoid overload
    • Complex network at home and abroad, domestic and foreign carriers access to low domestic Internet bandwidth and slow transmission problems is very difficult.
• Development efficiency
  • Development efficiency can be considered from several aspects: better code reuse, simple page, modular
  • Selection libraries and frameworks: a common Animate.csslibrary: jquery, Vue.js, React.js, underscore.js, Bootstrap, backbone.js, Font Awesome（字体图标库）, zepto.js(主要针对于移动端，和jquery非常相似), jade | ejs, normalize.css, compass(Sass的工具库), ,Angular
  • Building tools
    • webpack: packer module, the most widely used one
    • gulp.js: build tool based automation flow
  • JavaScript / CSS module for exploitation: Divide and conquer is software engineering important idea is the cornerstone of development and maintenance of complex systems
  • Component-based development: component-based development with high versatility, no matter how vociferous the front page of the application or back-end single-page template rendering, component development ideas can all be used.

Load optimization

• For a mobile terminal product features and add speed is an integral part of the user experience, the best open time 1-2s. For developers site for enhanced user experience is a core value of the entire site, increase site loading speed is the most basic user experience.
• Reduce http requests to start from the following two aspects
  • The domain of convergence: the number of domain name to resolve a page generated under normal circumstances can not be more than 5
  • Reduce the number of requests
    • The scripts and stylesheets merger, which is the development of thinking in governance, when the release of multiple modules need to be merged into a single file, which has helped us achieve webpack
    • CSS Sprites: CSS image synthesis technology, a plurality of small images can be combined into a composite image, to locate desired image by way of background positioned
• Make full use of cache
  • Use cache can reduce the number of requests to the server, saving load times, so all static resources must set the cache on the server side, and try to use long-cache, cache resources to update long can use a different time stamp to update. Longer reasonable to set the expiration time of resources, especially for some static resources do not need to change, it is time to set the cache
  • Use CDN
  • Adding cache headers: browser cache by reducing the number of HTTP requests, making web pages load faster, for real-time resources is not high, set the cache server via its header information, tell the client browser can use another browser cache local components.
• compression
  • Fewer resources can not only reduce the size of storage space, you can also transfer less time in the network to transfer files, to speed up the web page display speed, and therefore to HTML CSS JavaScript code compression and other resources
  • Text Data Compression: text data (HTML CSS JavaScript) optimization and compression is divided into three stages, namely the publication ready (to remove comments, merged css remove JavaScript code is not executed), compile-time compression (merge files, remove spaces, confusion ) and transmission compression (gzip). Precautions: gzip using a lossless compression algorithm, Unix file system for the first compression, it belongs to server-side code compression, the compressible generally plain text content to 40% of its original size
  • Image compression: Common Image Format.jpeg/.jpg .png .gif webp
  • JavaScript load performance optimization
    • A page from start to finish presenting four main stages experienced by

    • Non-blocking load: The key is after the page has finished loading the JavaScript code, which means that the onload event of the window object triggers and then download the script, defer and async is also possible to program, but very old browsers do not support these two property, should be noted that in the case of async, but download a good js script will be executed immediately, if there are dependent js script before and after, is likely to be wrong, so use caution.
  • The first screen load optimization, demand loading
    • The first screen to load due to follow a "seconds out of law"
    • Demand loading of two implementations
      • Lazy Load: lazy accomplished by the associated load library
      • Responsive Load: JavaScript is determined by the resolution or the media query, in order to achieve different sizes of pictures corresponding to resources introduced loading
  • Preload: determine the next user operation can be carried out by user behavior, ahead of the pre-load the appropriate resources after the end of the first screen rendering implementation: pre-load a page: <link rel = "prefetch" href= "www.example.com">, a pre-loaded picture: <link rel="prefetch" href="image.jpg">. And preloaded Another technique corresponds to the DNS and analytical techniques (DNS Prefetch) When users browse the Web, the browser will be resolved in the domain name cache load pages, so connected in a user clicks on a web page when there is no need again DNS resolution, reducing user wait achieved to improve the user experience
• Other load optimization
  • Optimization cookie
    • As we all know, http is a stateless protocol, so every time the client makes a request, the next request can not be a state request data contained on that, how to associate a user's status, cookie is a way to solve this problem of a lower figure is between the server and the browser cookie processing and transmission

    • By the figure we can see that, when the cookie in accessing the corresponding domain name sent through http request to the server, the cookie through rational design, to reduce the volume of the cookie, it is possible to reduce the size of the http request packet, response speed
    • We know that a problem, the browser initiates an http request that they will be imposed once the cookie is sent in the past, we have no way to solve, no cookie is required, do not send it in the past. The solution is to use a dedicated host storage corresponding file. For example, with a host of specialized storage-related resources, such as: the use of the pictures are gw.example.coomstored, and use JavaScript resource g.example.comstorage, ajax request to use api.m.example.comstorage, so it will not send extra cookie when accessing these resources
  • Avoid redirects
    • Redirect is used to re-route users from one URL to another URL.
    • 301: permanent redirection, the status code indicates that the user requested resource has been moved to another location, the client receives this response, additional resources need to initiate a request to download the desired
    • 302: Temporary Redirect: also you need to initiate a request to download the additional resources required
    • 304: Not Modify: When the browser is mainly used to retain a copy of a component in the device cache, while the component has expired, this is the browser will generate a conditional get request, if the server component is not modified, it will return a 304 status code, but do not carry the body that tells the browser can reuse this copy, reduce response size
    • The figure is red directional influence on the page

CSS Optimization

• CSS optimization purposes: not only reduce the size of the CSS file, but also make CSS code better organized, more efficient, writing good CSS code help to improve the rendering speed of the page. In fact, the browser rendering engine to parse CSS rules, the less the better the performance.
• Page rendering process:

• Avoid writing style attributes in HTML tags, under normal circumstances are the HTML, CSS written separately, otherwise it will increase the volume of HTML Note: If the desired user access only once the page, for example, is not some temporary activities visitors can expect to have back appear, use inline styles can help reduce http request, but this time to increase the volume of HTML

Reproduced in: https: //juejin.im/post/5cfcb12851882502f9490f71