Optimizing javascript and css requests

2019-02-06 16:50发布

站内问答 / JavaScript
1857 11 6

I need to optimize the loading speed of several existing websites. One of the issues that I have is the amount of requests per page. The websites have 7 or more different types of pages which should load different set of css and javascripts because they contain different widgets or functionality. Currently each widget or functionality has its own javascript file. I am planning to combine and minify the files to have fewer requests.

  1. Would it be a good practice to combine and minify all javascripts necessary on each type of page into one file (and to do the same for css)? e.g.
    • home page has just one homepage.js,
    • list pages have just listing.js,
    • detail pages have just detail.js,
    • etc.
  2. Is it better to combine only those files which are always used together? e.g.
    • jquery.js + jquery.cookie.js + common.js,
    • list.js + paging.js + favorite.js,
    • detail.js + favorite.js,
    • etc.
  3. What about having one file for all javascripts that should load in the head and one file for all javascripts that should load at the end of body, e.g.
    • init.js goes to <head> and do.js goes to <body>.
  4. What about having one file for common functions and one for administrative functions which is loaded if the user has specific permissions?
  5. Are there any strategies how to balance between 1., 2., 3., and 4.?
  6. What is a recommended amount of javascript and css requests for a page?

I am considering large-scale websites a.k.a. portals or social networks.

(BTW, there are some libraries which requests I can't control, e.g. TinyMCE or google maps).

11条回答
放荡不羁爱自由
2楼-- · 2019-02-06 17:28

I think it's necessary to perform the following optimisations:

  • Server-side:

    1. Use fast web-server like nginx or lighttpd for serving js and css files if not using yet.
    2. Enable caching and gziping for the files.

  • And client-side:

    1. Place all common js-files into minified one and enable hardcore caching. If your page don't require running them before "onload", you can add one to page dynamically. It will speed up loading.
    2. Place per-page code into separate files and if it's not necessary to do smth. before onload event, add it dynamically.
    3. If it more than a few Kbytes of css at all, just merge it into one. Else you should split it to common and per-page styles.
    4. If you need best performance on client-side, place into common css file really common styles, that applied to ALL pages. Load rules you need on the page only, it will speed up rendering.
    5. The simplest way to minify js and css together is to use YUI Compress. If you want better speedup, you can remove all evals and other "dynamic" code and use Google Closure Compiler.

If it will not help, than everything's bad and you need more servers to serve js and css files.

查看更多
0人赞 添加讨论(0) 举报
Explosion°爆炸
3楼-- · 2019-02-06 17:28

Minification and combining JS are only part of the battle. The placement of the files is more important. Obtrustive javascript should be the last loaded thing on the page as it will halt page load until it's done loading.

Consolidate what you can but namespacing and using closures may help keep the DOM clean of your function calls until they're needed.

There are tools that can test page load speed.

The Net Panel in Firebug as well as Yslow are handy tools that you can use to help debug page load speed.

Good luck and happy javascripting!

查看更多
0人赞 添加讨论(0) 举报
趁早两清
4楼-- · 2019-02-06 17:29

Assuming its on apache, if not, ignore the answer :)

I have not tried this myself yet but you might want to have a look at mod_pagespeed from google.

Alot of the features you want to do by hand are already in it, take a look here as well.

查看更多
0人赞 添加讨论(0) 举报
迷人小祖宗
5楼-- · 2019-02-06 17:32

Usually you can use the following pattern:

  1. main.js - bundle all scripts here that are used by several pages on the website.
  2. page.js - all js specific to the page. This would mean bundling together js of all widgets on a page.

With this practice, you just have 2 requests for your JS on each page and you get a clear separation/structure in your JS. For all pages except the first one, it will be just one request as main.js would be cached.

You can use the same principle for the CSS as well. This is effective but as mentioned by another answer, you can actually take this further and bundle everything in 1 js only. Its a preference or style. I like to break it into 2 as it keeps things logical for me.

Ensure the following though:

  1. Namespace your JS else you might end up with errors when you bundle them together.
  2. Do your pages a favor and push them at the bottom of the page.

EDIT: I thought I would update the answer to answer some of your points.

Point 2: Is it better to combine only those files which are always used together?

Ans: Personally, I don't think so. If you are serving all files which are being used together, it doesn't matter which group they belong to or how they land up on the page.This is because we combine JS files to reduce the amount of HTTP Requests.

Once your JS is combined & minified & in PROD, you are not expect to debug or make sense out of it. So to bind together logically related JS files is a moot point. Its in your DEV environment where you would like to have all these logically related code files together.

Point 3: What about having one file for all javascripts that should load in the head and one file for all javascripts that should load at the end of body?

Ans: There are certain cases where you are somehow forced to inject JS in the HEAD. Ideally, you shouldn't do it as SCRIPT tags are blocking in nature. So unless you really need to, place all your JS ( 1 or multiple files ) at the end of the BODY tag.

Point 4: What about having one file for common functions and one for administrative functions which is loaded if the user has specific permissions?

Ans: This seems like a reasonable approach to split your JS code. Depending upon the user privileges, you can fork your JS code.

Point 6: What is a recommended amount of javascript and css requests for a page?

Ans: This is a very subjective question. It depends on what you are building. If you are worried about too much JS being loaded on page load, you can always split it and use on-demand SCRIPT injection methods to split the load.

查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
6楼-- · 2019-02-06 17:35

In general, I concatenate and minify all the scripts on the site and serve only two requests - one for JS and one for CSS. The exception to that rule is if a certain page has a significantly sized script that is only run there - in that case it should be loaded separately.

Load all the JS scripts at the bottom of the your page to prevent scripts from blocking page load.

查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
7楼-- · 2019-02-06 17:40

There are a multitude of things to consider while deciding how to combine your JS and CSS files.

  1. Do you use CDN to serve your resources. If you do, you might get away with more requests per page then otherwise. Biggest killer of performance with multiple downloads is latency. CND will lower your latency.

  2. What are your target browsers. If you are audience is mostly using IE8+, FF3 and WebKit browsers that will allow 6+ simultaneous connections to a given sub-domain, you can get away with more CSS files (but not JS). More than that, in the case of modern browsers, you actually would want to avoid combining all CSS into one big file, because even though overall time spent on downloading 1 large file is going to be shorter then time spent on downloading 6 smaller files of equal sumed size in sequence, you can download multiple files simultaneously, and download for 6 smaller files will finish before the download of one large file (because your users will not max out their bandwidth on CSS file download alone).

  3. How many other assets do you serve from the same domain. Images, Flash, etc. will all count against connection limit of the browser per sub-domain. If possible, you want to move those to a separate sub-domain.

  4. Do you heavily rely on caching. Deciding how to combine files is always a tradeoff between number of connections and caching. If you combine all files on one page and 90% of those files are used on other pages, your users will be forced to re-download combined file on every page of the site, because of ever-changing last 10%.

  5. Do you use domain-splitting. If you do, again for CSS you can get away with more files if you serve them from multiple sub-domains. More available connections - faster download.

  6. How often do you update your site after it goes life. If you do a patch every few days that will modify CSS/JS files, you defiantly want to avoid combining everything into one file, cause it will destroy caching.

Overall, my generic suggestion, not knowing all the facts about what your situation, is to combine files that are used on all pages (jquery, jquery-ui, etc.) into one file, after that if there are multiple widgets that are used on all pages, or almost all pages, combine those. And then combine files that are either unique to the page, or used only on one-two pages into another group. That should give you the biggest bang for your buck, without having to resort to calculating size of each file, hit numbers on each page and projected standard path of the user on the site to achieve ultimate combining strategy (yeah, I had to do all of the above for very large sites).

Also, one other comment unrelated to your question, but about something you mentioned. Avoid adding Javascript files to the head of the document. Javascript download, parsing and execution will block all other activates in the browser (except for IE9, I believe), so you want your CSS to be included as early as possible on the page, and you want your JavaScripts to be included as late as possible, right before closing body tag, if possible at all.

And one more comment, if you are so interested in getting the best performance from your site, I suggest looking at some more obscure optimization techniques, such as preloading assets for the next page after page completion, or possibly even more obscure, like using Comet to serve only required javascript files (or chunks of js code) when they are requested.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)