Example of script merging to improve javascript performance

  • 2020-03-30 02:06:11
  • OfStack

Each < Script> Tags block the page rendering when they are first downloaded, so reduce the number of pages included. Script> The number of tags helps to improve the situation. This is not just for out-of-chain scripts, the number of embedded scripts is also limited. Every time a browser encounters an HTML page as it parses it. Script> Tags can cause some delay due to script execution, so minimizing the delay time will significantly improve the overall performance of the page.

Typically a large web site or web application relies on several javascript files. You can merge multiple files into one, so you only need one reference. Script> Label, can reduce the performance consumption. File merging can be done with an offline packaging tool or similar to YaHoo! Combo handle is implemented as a real-time online service.
 
<!--  Before optimization:  --> 
<html> 
<head> 
<title>Script Example</title> 
</head> 
<body> 
<p>Hello world!</p> 
<script type="http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js"></script> 
<script type="http://yui.yahooapis.com/combo?2.7.0/build/event/event-min.js"></script> 
</body> 
</html> 

<!--  After the optimization:  --> 
<html> 
<head> 
<title>Script Example</title> 
</head> 
<body> 
<p>Hello world!</p> 
<script src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js" type="text/javascript"></script> 
</body> 
</html> 

Related articles: