Interface Optimization x Step walk

Source: Internet
Author: User

A while ago, the system interface did some tuning work. Briefly summarize below:

1. js CSS compression Merge, commonplace, the front blog also introduced the assets management automatic compression mechanism.

2. Picture Sprite PNG Merging is the merging of multiple images onto one image, reducing network requests.

3. Picture optimization, Optipng-0.7.5.man.pdf compressed pictures to a relatively good size, after careful comparison, the feeling is actually reduced some of the similar color, unified replacement.

4. Defer parsing JavaScript, in fact, is the JavaScript lag, not prevent page loading, the specific principle can read "High performance JavaScript", I did a simple lecture, introduced the book, Some of the optimization methods mentioned here are slightly expanded.

1) JavaScript block UI is this, lag loading some JS

         2) Programming Related: A) reducing global variables, using local variables (scope Chain principle) b) Reduce DOM operations, bulk DOM operations, cache DOM objects avoiding multiple bridges between JS and Dom   C) Reflow and repaint  reduction, batch, cache. Re-paint the backflow less. d) algorithm control, loop, Duff device algorithm E) string and regular operation BackTrace F) UI thread, responsive Interfaces queue update mechanism, SetTimeout is the line queue time, principle 100 milliseconds, split long task G) Ajax Technology H) Practice: avoid Double Evaluation use object/array literals don ' t Repeat work use the Fast Parts nativemethods

3) deployment, tools-compression merge, gzip, cache JS,CDN, agile deployment

5. Preload pre-loading, such as the first page after the completion of loading, download the part of the internal pages common JS, in advance to let the browser cache up. This approach is primarily to improve the response of the first load.

6. Nginx Mod_gzip Open Note JS mimetype

7. Doing block task in the background Front blog introduces the BEANSTALKD queue system

8. Model layer data request the cache PHP framework generally has some packages, such as those based on APC memcache Filecache, etc.

9. The cache of the view layer

10. Default into the view of similar indexaction, and so on, as little as possible to do some data acquisition and other program logic, and through the page loaded Ajax callback to get local updates, making the page into faster.

CDN jquery jQueryUI, etc.

12. Some common standards, CSS placed in front of the head, to avoid loading after reflow, to add expire header, etc.

SQL optimization, now the project's SQL is fairly simple

YSLOW pagespeed Analysis website: website Speed http://ce.cloud.360.cn/task website security detection http://webscan.360.cn/website Optimization http://gtmetrix.com/


Our project has not yet been done, but also the score is OK

1. HTML compression. Maybe Phalcon did it himself? No research, score clearance.

2. Profiling with XDebug, XDebug before the project used, this project has not been used, the main output of the PHP method of some of the call situation, the use of time what, play bad.

3. Unit testing--PHPunit test code: Wood has resources to do it.


Feel:

1. Page optimization is a Kuibu not even thousands of things, a little bit of improvement, and gradually brought a large increase. Remember not to be good and small.

2. Synchronization can be implemented as well as website security, and SEO needs to be further strengthened

3. Cache optimization can be said to be the largest increase in the high-concurrency multiuser loadrunner test environment fully reflected. Web-side performance testing is also a direction that needs to be further accumulated.


Interface Optimization x Step walk

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.