bootstrap布局技巧_加快Bootstrap网站的3个技巧

bootstrap布局技巧

Website optimization is a cluster of techniques, both server-side and client-side, which aim at speeding up websites’ loading time and rendering in the browser for a better user experience.

网站优化是服务器端和客户端的一系列技术，旨在加快网站的加载时间和在浏览器中呈现的速度，以提供更好的用户体验。

Today, visitors are used to the immediacy and reactivity typical of native apps. They expect a web page to load within 1000ms. If it takes much longer than this, they’re likely to leave the site.

如今，访问者已经习惯了本机应用程序典型的即时性和React性。 他们希望网页在1000毫秒内加载 。 如果花费的时间比这更长，他们很可能会离开网站。

Search engines have certainly caught up with this trend, and in many ways they’ve contributed to it. In fact, Google has been using page speed as a ranking factor for websites in desktop searches for a while now. Google has announced that, from July 2018, mobile searches will also be super important to achieve top positions in its result list.

搜索引擎肯定已经赶上了这一趋势，并且在许多方面都为这一趋势做出了贡献。 实际上，一段时间以来，Google一直将页面速度用作网站在桌面搜索中的排名因素。 谷歌宣布 ，从2018年7月开始，移动搜索对于在搜索结果列表中排名第一也将至关重要。

Bootstrap has often been criticized for adding unnecessary bloat to websites, so if you use this popular front-end UI library in your project, make sure you pay extra attention to page weight and page speed.

Bootstrap经常被批评为网站增加不必要的膨胀，因此，如果在项目中使用此流行的前端UI库，请确保特别注意页面的权重和页面速度。

In this article, I’ll go through three front-end optimization steps you can take to ensure your Bootstrap-based website is fast-rendering and well optimized.

在本文中，我将经历三个前端优化步骤，您可以采取这些步骤来确保基于Bootstrap的网站能够快速呈现并得到优化。

仅下载您需要的Bootstrap软件包 (Only Download the Bootstrap Package You need)

If you decide to work with the precompiled download package of Bootstrap, you should really have a serious think about which parts of the library you really need.

如果您决定使用Bootstrap的预编译下载包 ，则应该认真考虑一下您真正需要的库的哪些部分。

The download folder contains both the complete CSS library (bootstrap.css and bootstrap.min.css) and JavaScript components library with all its dependencies except for jQuery (bootstrap.bundle.js and bootstrap.bundle.min.js), as well as a number of standalone CSS files containing the code necessary for specific parts of this popular UI kit.

下载文件夹包含完整CSS库( bootstrap.css和bootstrap.min.css )和JavaScript组件库及其所有依赖项，除了jQuery( bootstrap.bundle.js和bootstrap.bundle.min.js )以及许多独立CSS文件，其中包含此流行的UI套件的特定部分所需的代码。

If you just need a nice CSS reset for your project, simply use bootstrap-reboot.min.css. If you only need a flexible and easy-to-use grid system, then go for bootstrap-grid.min.css. There’s no need to download the entire framework. If, on the other hand, you know you’re going to use everything in the library, at least make sure you include the minified version.

如果您只需要对项目进行CSS重置，则只需使用bootstrap-reboot.min.css 。 如果您只需要一个灵活且易于使用的网格系统，请访问bootstrap-grid.min.css 。 无需下载整个框架。 另一方面，如果您知道将使用库中的所有内容，则至少确保包含缩小版本。

Similarly with the JavaScript code. If you know you’re not going to have dropdowns, popovers and tooltips in your project, then use bootstrap.min.js rather than bootstrap.bundle.min.js because you won’t need to include Popper.js.

与JavaScript代码类似。 如果您知道在项目中不会有下拉菜单，弹出窗口和工具提示，请使用bootstrap.min.js而不是bootstrap.bundle.min.js因为您不需要包含Popper.js 。

选择源而不是预编译的下载包 (Opt for the Source rather than the Precompiled Download Package)

As much as the latest release of Bootstrap lets you select parts of it to include in your project, the precompiled files might still contain stuff that you might not actually need.

尽管最新版本的Bootstrap允许您选择要包含在项目中的部分，但预编译的文件可能仍包含您实际上不需要的内容。

Browsers still have to download and process unused code, which could impact on website performance, especially on slow network connections.

浏览器仍然必须下载和处理未使用的代码，这可能会影响网站性能，尤其是网络连接速度慢时。

A better idea would be to download the Bootstrap source code, because:

一个更好的主意是下载Bootstrap源代码 ，因为：

• you’ll be able to include exactly the components you need in your project
  您将能够准确地将项目中需要的组件包括在内
• customizing any part of the library becomes cleaner and more efficient, with no need to override styles over and over
  自定义库的任何部分变得更加干净和高效，而无需一遍又一遍地覆盖样式
• the stylesheet that ends up in production is usually leaner.
  最终用于生产的样式表通常更精简。

利用成熟的客户端优化技术 (Make Use of Proven Client-side Optimization Techniques)

Apart from the points made above, optimizing a website built on top of Bootstrap for performance still has to incorporate front-end performance techniques just like any other website.

除了上述要点外，优化基于Bootstrap构建的网站以提高性能仍然需要像其他任何网站一样采用前端性能技术。

Below are just some of the critical factors you could pay attention to for effective front-end optimization of your website.

以下是您可能需要注意的一些关键因素，以有效地优化网站的前端。

编写精益CSS和JavaScript (Write Lean CSS and JavaScript)

Each character in your code adds up to the final weight of the web page. Writing clean and concise CSS and JavaScript code while keeping it readable is not always easy. However, it should be something to strive for in every project.

代码中的每个字符加起来就是网页的最终重量。 编写简洁CSS和JavaScript代码同时保持可读性并不总是那么容易。 但是，在每个项目中都应为之奋斗。

Good CSS practices include getting rid of unused selectors, duplicate code, and overly-nested rules. It’s good to keep your code well organized at the beginning of a project. For example, using style guides can really benefit your development process and the quality of your code.

良好CSS惯例包括摆脱未使用的选择器，重复的代码和过度嵌套的规则。 在项目开始时最好将代码井井有条。 例如，使用样式指南确实可以使您的开发过程和代码质量受益。

Also, there are great tools out there to help you clean up you code. A linter like CSS Lint and JSLint can check your document for syntax errors, inefficient coding patterns, unused code, etc.

此外，还有一些很棒的工具可以帮助您清理代码。 诸如CSS Lint和JSLint之类的linter可以检查您的文档是否存在语法错误，效率低下的编码模式，未使用的代码等。

缩小并连接CSS和JavaScript代码 (Minify and Concatenate CSS and JavaScript Code)

An important optimization step is to limit the number of HTTP requests a website has to make to render its content. Each round trip to the server and back to fetch resources takes time, thereby negatively impacting on the user experience.

一个重要的优化步骤是限制网站为呈现其内容而必须进行的HTTP请求的数量。 每次往返服务器并返回以获取资源都需要时间，从而对用户体验产生负面影响。

Minifying (that is, removing comments and white space from your document) and concatenating CSS and JavaScript files have now become a consolidated practice that aims to keep file size small and decrease the number of HTTP requests.

最小化 (即，从文档中删除注释和空白)以及连接 CSS和JavaScript文件现已成为一种合并的做法，目的是使文件大小变小并减少HTTP请求的数量。

If you’d like to delve deeper, How to Optimize CSS and JS for Faster Sites by Gary Stevens is a great read.

如果您想更深入地研究，Gary Stevens撰写的“ 如何为更快的站点优化CSS和JS”是一本好书。

当心您的图像文件大小 (Watch Out for Your Images File Size)

The weightiest part of a web page is often represented by image files, but also audio and video files play their part. Optimizing visual assets is therefore crucial to website performance.

网页中最重要的部分通常由图像文件表示，但是音频和视频文件也发挥了作用。 因此，优化视觉资产对于网站性能至关重要。

Doing so involves two aspects:

这样做涉及两个方面：

• Making sure you use the right image format for the job at hand.

  确保为当前作业使用正确的图像格式 。

• Squeezing excess bytes from your assets before uploading them for production. There are great tools out there that can help you. Check out online tools like TinyPNG for raster images (PNG, JPG, etc.) and Jake Archibald’s SSVGOMG for SVG optimization. Also, consider tools you can install locally like your favorite task runner (Grunt, Gulp, etc.).

  从资产中压缩多余的字节，然后再将其上传以进行生产。 有很多很棒的工具可以为您提供帮助。 看看喜欢的在线工具TinyPNG光栅图像(PNG，JPG等)和杰克阿奇博尔德的SSVGOMG SVG的优化。 另外，请考虑可以在本地安装的工具，例如您喜欢的任务运行器 (Grunt，Gulp等)。

结论 (Conclusion)

A fast-rendering website is a core factor in determining great user experience on websites. This becomes even more crucial when it comes to evaluating web user experience on mobile devices.

快速呈现的网站是确定网站上良好用户体验的核心因素。 在评估移动设备上的Web用户体验时，这一点变得尤为重要。

In this article, I’ve listed a number of techniques that play a role in optimizing a Bootstrap website for performance from the point of view of front-end development.

在本文中，我列出了许多技术，它们从前端开发的角度对优化Bootstrap网站的性能发挥作用。

What are your front-end optimization techniques for a fast-loading Bootstrap website? Let me know in the comments!

对于快速加载的Bootstrap网站，您有哪些前端优化技术？ 在评论中让我知道！

If you’ve got the basics of Bootstrap under your belt but are wondering how to take your Bootstrap skills to the next level, check out our Building Your First Website with Bootstrap 4 course for a quick and fun introduction to the power of Bootstrap.

如果您掌握了Bootstrap的基础知识，但又想知道如何将Bootstrap技能提高到一个新的水平，请查看我们的使用Bootstrap 4建立您的第一个网站课程，以快速，有趣地介绍Bootstrap的功能。

翻译自: https://www.sitepoint.com/3-tips-to-speed-up-your-bootstrap-website/

bootstrap布局技巧