HTML and CSS Reference
In-Depth Information
<link href='
http://fonts.googleapis.com/css?family=Arimo' re
l='stylesheet'
type='text/css'>
<link rel="apple-touch-icon-precomposed" href="img/home-screen-icon.png">
</head>
...
Reload your mobile web browser, and everything should be working as
expected.
Concatenating, Minifying, and Caching
Although having several JavaScript files can be useful for development and
debugging purposes, it's not a good idea to send each and every JavaScript file
to the user while in production, as it could create a loading bottleneck in the
application. To get around this and to achieve the best performance, it's a good
idea to concatenate all of the JavaScript files into a single JS file, much like we
have done with the CSS files using SASS.
To improve performance, you can also minify the JavaScript and CSS files. This
is the process of removing as much unused data (such as spaces and carriage
returns) as possible to create a much more compact file.
To further improve performance, you will need to update the cache's manifest
file. This will allow your application to store JavaScript and images on the user's
mobile device, reducing the need to constantly fetch them from the server every
time the page is loaded. This also allows the user to use parts of the web
application while there is no connection to the network or your server.
Concatenating
Concatenating JavaScript can be done in several ways. The most popular is to
use server-side script to automatically combine all of the files and cache the
final result on the server. The least popular is to manually combine all of the files
by copying them all into a single JavaScript file. This section will cover manually
concatenating the application's JavaScript files.
Create a new file within the
js
directory called
app.dev.js
. Begin by copying
and pasting the code from the application's JavaScript file into
app.dev.js
in the
following order, and where the JavaScript file at the top of the list appears at the
top of the file.
js/lib/eligrey/classlist.js
js/lib/cubiq/iscroll.js
