First, the request for reduction in size or number of resources
1, and as far as possible and compression and css and js files. (The css files and js into one will be merged into one)
reason: http primarily to reduce the number of requests and to reduce the size of the requested resource
packaging tool:
WebPACK
GULP
Grunt
. ....
2, try to use the font icon or SVG icon to replace the traditional png chart
because the font icon or SVG is a vector, write out the code, Fangda will not be deformed, and fast rendering speed
3, using the image lazy loading (lazy loading)
purposes, to reduce the number of the first page of http requests during a loading
specific steps:
1, do not send an http request when the page begins loading by placing a placeholder FIG
2 when finished loading the page, and the image area visible again requests loading image
4, the effect can css do, do not use js, use native js do, not easy to use third-party plug-ins.
Avoiding the introduction of a large number of third-party libraries. While only use a small function inside
5, using a map or Sprite picture sprite is to say
all relatively small resource image, drawn on a large map, only need to download large image, then use the
pictures show a small map in terms of positioning on the page (background-position : percentage value)
6, reduce the use of the cookie (the most important is to reduce the size of the cookie store content locally), because the client operating cookie when that information is always delivered in client and server. If the set properly, each time send
A request will carry the cookie
7, front and rear ends for data exchange, based on data as to the number of transmit json format. With respect to the use xml
for transport have this advantage
Objective: is to facilitate data processing, small resources
8, the front end and back-end negotiation, rational use of keep-alive
9, front-end and server negotiate the use of compression response resources
10. Avoid using iframe
is not only bad management and control style, and is equivalent to nesting on this page and other pages, consumption will be even greater performance. Because resources also go back to load the nested page
11, when requests get ajax based data exchange, according to the requirements can be configured to generate cache (note: the
cache is not we often see the status code 304, a local browser to fetch data), so that the next address from the same data acquisition
, the acquired data is cached on time. (Note: rarely used, usually emptied on demand to do.)
Second, the code optimization related
1, in js minimize the use of closures
reasons: the use of closures, where the context of the closure will not be released
2, reducing the DOM operations, mainly to reduce the DOM redraw reflux (rearrangement)
Separate Read rearrangement on (reflux) is: If a plurality of styles, the style is provided exclusively on the set together, not one by one setting. Use document fragments or string concatenation to do data binding (dynamic creation of DOM)
3, nested loops and avoid "endless loop" in js in (in the event of an infinite loop, the browser will direct card out)
4, put on the body css, js on the body below the
allowed to load css (Note: This does not matter much on optimization)
5, reducing the use css expressions
6, css selector parsing rules resolved from right to left in FIG. After reducing the tab element as a selection object
7, try to set up a separate animated elements to a layer (or avoid redrawing reflux size)
Note: Layers not too many settings, otherwise not only the effect but did not reach even worse
8, js the packaging process, as far as possible a low coupling high polymer. Reduce redundant code page
Plane 9, after a positioning css, the z-index is preferably used to change the hierarchy of the box, so that the box is not the same
10, when introduced css @import minimize introduction of formula, as @import synchronous operation, only the pattern corresponding to the introduction, will continue Jiazi An down, and the operation is asynchronous link
11, using window.requestAnimationFrame (js frame animation) instead of the traditional animation timer
if you want to use from time to time perform the animation, you should avoid using setInterval, setTimeout to make use
instead of setInterval timer. Because there are drawbacks setInterval timer: May cause two animation interval
shortened
12, minimize the use of recursion. Avoid dead recursively
resolve: We recommend using tail recursion
13, based script tag download js files, can be used to defer or asynchronously load async
14, in the event binding, as far as possible the use of event delegation, reduce cycle DOM element is bound to the event handler.
15, js the packaging process, as far as possible a low coupling high polymer. Reduce redundant code page
16, to reduce the use of Flash
Third, storage
1, combined with the back-end, use your browser's cache technology, to do some caching (let returned by the backend 304, telling the browser to pull data locally). (Note: there are drawbacks) can make some static resources less likely to change as cache. For example: some pictures, js, cs
2, using the new features h5 (localStorage, sessionStorage) to do some simple data storage,
to avoid the requested data to the background or to do some data appear offline.
Fourth, other optimization
1, avoid using iframe is not only bad management and control style, and is equivalent to nesting on this page and other pages, consumption will be even greater performance. Because resources also go back to load the nested page
2, the page is the use of asynchronous programming and data acquisition delayed batch loading, use asynchronous loading of data primarily in order to avoid the browser unresponsive. If you use synchronization, large and very slow to load data
then, the page is blocked for some time. Objective: To address the requested data is not delayed rendering, improve page
rendering efficiency. Solution: need dynamic binding of data hidden area first, and so returned data and bind it to appear after
a delay similar picture batch loading lazy loading. The first page load time reduce the number of http requests
3, audio and video tab page appears, when we do not let the page load to load these resources (or the first time will be very slow to load)
Resolution: To simply preload = none to audio and video.
Objective: To wait for page loads, and when you want to play audio and video audio and video resources to Jia Zian
4, try to set up a separate animated elements to a layer (or avoid redrawing reflux size)
Note: Layers not too many settings, otherwise not only the effect but did not reach even worse