Bootstrap optimize site resources, responsive pictures, conveyor belt use of detailed 3_javascript tips

Optimize the bootstrap site resources, complete the bootstrap response picture, and let the conveyor support gestures, details as follows

A. Optimizing site resources

Speed is very important. Users are very concerned about. Our site must be loaded fast enough, otherwise the user will leave. SEO is also very important. Our site must be loaded fast enough, no search rankings will fall.

That's it, let's take a look at the "Bootstrap" 2. The resources in the works show the site. In particular, take a look at the key factors we can control that affect the speed of the page-file size, including pictures, CSS, and JavaScript files. With a few simple steps, we can "slim down" the files and shorten the load time.

A.1 Optimized picture

These images are optimized to a certain extent through Photoshop's "Save As Web" format. However, all pictures are loaded in one piece and also 719 KB.

These works are very important. (comparison is a personal work site.) However, these individuals are indeed a bit bigger. The file size can be reduced by more efficient compression.

To reduce the size of the file, without compromising the quality of the picture, you can use some tools, such as Yahoo! 's Smushit:http://www.smushit.com/(seemingly inaccessible at home)

For MAC users, free imageoptim applications (Https://imageoptim.com/mac) can achieve similar goals. The author uses this application to reduce the overall size by 50.2 KB.

A.2 CSS Optimization

First look at the size of the Main.css file for the optimized stylesheet:

134 kb! Any responsible developer will not let such a small web site bring such a large style sheet.

The good news is that we can easily halve this size. Using Bootstrap's modular less solution, you can immediately reduce the CSS, as follows:

(1) Developing less/__main.less;

(2) Comment out unwanted less files, such as these:

@import "Bootstrap/glyphicons.less";
...
@import "Bootstrap/dropdowns.less";
@import "Bootstrap/button-groups.less";
@import "Bootstrap/input-groups.less";
...
@import "Bootstrap/breadcrumbs.less";
@import "Bootstrap/pagination.less";
@import "Bootstrap/pager.less";
@import "Bootstrap/labels.less";
@import "Bootstrap/badges.less";
@import "Bootstrap/jumbotron.less";
@import "Bootstrap/thumbnails.less";
@import "Bootstrap/alerts.less";
@import "Bootstrap/progress-bars.less";
@import "Bootstrap/media.less";
@import "Bootstrap/list-group.less";
@import "Bootstrap/panels.less";
@import "Bootstrap/responsive-embed.less";
@import "Bootstrap/wells.less";
@import "Bootstrap/close.less";
...
@import "Bootstrap/modals.less";
@import "Bootstrap/tooltip.less";
@import "Bootstrap/popovers.less";

(3) Be careful, of course, or you may note out the necessary documents in an inattentive. Because time will take a little time to recompile, comprehensive test.

(4) After commenting out the unnecessary files, select the minimized (or compressed output) option in the compiler, and then recompile so that you can save and ask Css/main.css.

(5) and see how big the file is. My result here is 91KB. Reduced by 43KB.

Of course, you can also optimize a little bit more. For example, you can open each reserved less file and then annotate it with one line of code that is not necessary.

Finally, let's look at how to optimize JavaScript.

A.3 optimize JavaScript

To optimize JavaScript, we're going to replace the Bootstrap plugin in the Plugins.js file with just a few of the ones we use. And then compress the file again.

(1) Open js/plugins.js

(2) Delete code blocks belonging to Bootstrap.min.js

(3) Open the Js/bootstrap folder, which holds the standalone file of the Bootstrap plug-in. Group Open Series files, copy their code into the Plugins.js file, these three plug-ins are used in my site:

-carousel.js

-collapse.js

-transition.js

(4) Save the "slimming" version of the Plugins.js file, refresh the browser to try

-Make sure that the response navigation bar folds in a narrow viewport and click the button to expand the Drop-down list;

-Make sure the conveyor is as usual.

If there is no problem, it means that the JavaScript is needed for the voyage.

(5) The next step can be narrowed (minify) or "demonize" (uglify) plugins.js files. The following online tools are recommended for use.

-uglify JS:HTTPS://MARIJNHAVERBEKE.NL/UGLIFYJS

-yui compressor:http://refresh-sf.com/yui/

-Google's Closure compiler:http://closure-compiler.appspot.com

Open these online tools, copy the Plugins.js code to the past, run it, and then copy the resulting code back to plugins.js.

Here is the choice of uglify JS.

(6) After saving the compressed file.

(7) Comparison size.

For ease of comparison, a backup is saved for all files:

-plugins-all contains the complete bootstrap.min.js code;

-plugins-uncompressed.js contains the three plugins we need, uncompressed;

-plugins.js is the final file, narrowing and removing the space-concatenated version.

The final file is equal to the original One-fourth.

A.4 Optimization Results

Overall, our optimization efforts have yielded results. The picture, CSS and JavaScript are counted together, the original size is 885 KB.

After optimization, it became 769 KB, saving 116 kb, more than 10%,

In fact, we can continue to optimize, especially for small screen devices, the way is to implement response-style pictures.

B. Implementing a response-style picture

If we uphold the purpose of mobile friendly development, then we need to choose a response-style picture technology.

B.1 Analysis Works Conveyor belt

In "Bootstrap" 2. the personal works site of the work show site, the picture in the conveyor belt is designed for a full width layout, 1600px in width and 135~189 KB in size. Sending such a large picture to a cell phone and a non-retinal screen is overkill. In the era of mobile priority-response design, this is irresponsible.

Also, if you look at the display in the small screen, you may find that the picture in the conveyor belt should be higher and narrower, because the narrow screen has a relatively high vertical upward space.

In the wide view of the phone screen, our pictures, the pictures for the big screen, can be displayed, but if you can make more use of vertical space, the effect will be better. This can be seen through the screenshot below:

A good response-style picture technology should allow us to provide appropriate images for small screens, to meet small files, fast loading, and to improve design requirements.

B.2 Selection Scheme

The author of this book recommends Picturefill technology. The Picturefill scheme balances performance and design issues well, and the solution is fairly simple.

PS: Related article: https://www.smashingmagazine.com/2013/07/choosing-a-responsive-image-solution/(This article is earlier, suggest or directly read the official document)

Picturefill realize want to eat picture only a few simple steps:

(1) Prepare the ideal picture for the target viewport;

(2) Download and include Picturefill JavaScript files;

(3) using Picturefill tag mode to introduce the image.

As always, there are two more steps in the actual development process:

Test

-Adjust as needed.

Let's do it step-by-step.

b.2.1 prepare a response-style picture

The source of this book has been prepared with special size and optimized pictures, for convenience, we copy them directly to our IMG folder:

When you open the picture, you will find that they are narrower and the aspect ratio is smaller. This is to make more use of vertical space in narrow viewing mouth like this:

Of course, the picture is also smaller, 900pxx600px, to ensure that the retina screen can also have enough pixels, but compared to the original 1600pxx800px is much smaller. These small pictures on average are smaller than the original big picture 50% or more.

When the picture is ready, it's time for JavaScript to play.

b.2.2 using JavaScript

Picturefill files and documents are located in GitHub, address is:Https://github.com/scottjehl/picturefill

You can take some time to look at the documentation. We'll use the recommended elements in the document in a few minutes. We'll download the file first, unzip it, find Picturefill.min.js, and then copy it to the Plugins.js file.

Next, prepare the tag according to the Picturefill convention.

b.2.3 MODIFY TAG structure

In an HTML document, modify the markup for each picture and use the pattern of the Picturefill image element. The logo here defaults to a small picture, but the viewport is 640px and above with browsers and IE8 exceptions.

One is the mark of the first picture after the modification.

<picture>
 <source srcset= "Img/okwu.jpg media=" (min-width:640px) "/> 

Then you can modify the remaining picture tags in turn.

b.2.4 Test and adjustment

Save and test, you will find that this time the picture of the conveyor belt will not adjust to screen width. This is because the Picturefill tag does not use the selector in the Bootstrap conveyor style.

We modify the corresponding selector in the _carousel.less file so that the picture fills up with free space, as follows:

(1) Open _carousel.less

(2) Search to comment//account for jankitude on images, replace the > IMG and >a >img sub-selector with a simple dot's descendant img selector to select now nested deeper in the Picturefill tag Image:

Account for jankitude on images
//> img,
//> a > IMG,
img {//added to apply to Picturefill Respon sive Image Solution
 &:extend (. img-responsive);
 line-height:1;
 min-width:100%; Added
 height:auto;//added
 ...

The problem is solved.

B.3 The final result

When the viewport is less than 640ps, the conveyor belt should use a smaller but relatively high picture.

Take this as a starting point, you can refer to Picturefill's documentation, adjust and adapt to the needs of their own version.

C. Let the conveyor belt support gestures

In touch screen devices, it is a very useful function to support gesture light sweep to switch conveyor picture.

C1, what's the choice?

Just a JavaScript plugin and a few lines of code are all you need to do to make the conveyor belt lightly sweep the gesture. Justin Lazanowski wrote an article about three options for implementing the Bootstrap 3 conveyor belt gesture interaction. Article address:http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/

Here you will use the Jquery plugin touchswipe, whose github address is:https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

Using this plugin, you can use the following steps to allow the conveyor to support a light sweep gesture:

(1) The TouchSwipe plugin is included in our plugin file;

(2) write several lines of call code in the Main.js file.

C.2 get and include TouchSwipe plugins

After downloading, unzip, find the Jquery.touchSwipe.min.js file, and copy the code into the plugins.js. In this way, the plugin is in position. Next you need to call it.

C.3 Call TouchSwipe

You need to write a line of code that commands TouchSwipe to listen for a light sweep event on the conveyor belt and then convert it to a Bootstrap method call:. Carousel (' prev ') and. Carousel (' Next '). For these methods, you can refer to Bootstrap's documentation:http://getbootstrap.com/javascript/.

The next thing is simple, just the following steps:

(1) Open the Main.js file in the project.

(2) Add the following code:

Enable swiping
 ... $ (". Carousel-inner"). Swipe ({
 swipe:function (event, direction, distance, duration, Fingercount, fingerdata) {
 if (direction = = ' right ') {////cycles to the
 next item.
 $ (this). Parent (). Carousel ("prev");
 else if (direction = = "Left") {//Leftwards
 //cycles to the previous item.
 $ (this). Parent (). Carousel ("Next");}}
 ;

(3) After the Save refresh, you can switch the picture through the left and right light sweep. The effect chart is as follows:

Display effect Address:http://ycdoit.com/show/bootstrap-code-02.html

"Bootstrap" PDF documents and Source Links: http://xiazai.jb51.net/201610/yuanma/BootstrapSite (jb51.net). rar

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.