欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

用bootstrap做的网站有哪些,bootstrap制作网站实例

程序员文章站 2023-11-29 10:19:04
最近几年以来,前端开发人员似乎就一直处在一种特殊的矛盾中,即:越来越庞大的前端代码,以及访问者越来越消失的耐性之间的矛盾,他们习惯了各种如本地应用般的即时性,恨不得所有的网页都能在1秒内加载完毕。如果...

最近几年以来,前端开发人员似乎就一直处在一种特殊的矛盾中,即:越来越庞大的前端代码,以及访问者越来越消失的耐性之间的矛盾,他们习惯了各种如本地应用般的即时性,恨不得所有的网页都能在1秒内加载完毕。

如果花费的时间比这更长,他们可能会不断的刷新,然后在继续一无所获后,离开你精心为他们准备的网站。甚至有时候,这甚至会导致你脆弱服务器的一次小型的奔溃。

用bootstrap做的网站有哪些,bootstrap制作网站实例

而当你分析起,为何你的前端代码会变得如此庞大时,使用了bootstrap,可能是你经常会得到的结果之一。似乎只要在项目中,一使用这种流行的前端ui库,你就得承受这种种的烦恼。

用bootstrap做的网站有哪些,bootstrap制作网站实例

事实果真如此?今天,我将教大家,通过三个前端优化步骤,来确保基于bootstrap的网站能够快速渲染并优化。

1、只需下载您需要的预编译程序包

如果你决定使用由bootstrap进行预编译的下载包,那么,请你仔细的考虑下,哪些库是你真正需要的,下面是一些建议。

(1)如果可能,千万别使用包含完整的css库bootstrap.css或bootstrap.min.css,以及除jquery外的所有依赖项的javascript组件库包bootstrap.bundle.js或bootstrap.bundle.min.js,虽然这很方便,但对于绝大部分的工程而言,这都太大了。

(2)如果你只需要包含bootstrap基本风格的css类库,来写作你的html,以保证他们正常的按bootstrap的原则,在各种不同尺寸的设备上进行合适的排版,那么bootstrap-reboot.min.css就是最合适的,你甚至不需要引入任何的bootstrap javascript文件。而如果此时恰好你除了这些之外,还想使用bootstrap的灵活且易于使用的网格系统,那么您应该去引入bootstrap-grid.min.css。

(3)与css类似,javascript代码的引入也应该采用这一原则,比如说当你知道项目中不会出现下拉菜单,弹出窗口和工具提示时,你就更应该去使用bootstrap.min.js,因为哪些包含在bootstrap.bundle.min.js的popper.js什么的,其实你根本就用不着。

2、如果可能,应该选择从源开始的构建,而不是选择预编译的下载包

用bootstrap做的网站有哪些,bootstrap制作网站实例

比刚才更好的主意,当然是从源代码开始,构建最符合你要求的“自己”的bootstrap。毕竟,官方所给出的预编译的文件,仍可能包含您可能实际上并不需要的内容不是么?

这肯定是需要更多的一些知识和技巧的,因为,这通常就意味着,你需要了解几乎每一个bootstrap所包含的css文件和javascript类库的作用,并且如果你是从less开始进行构建,你还需要非常熟悉和了解grunt这样的工具的使用方式。

但相信我,这些都是值得的,一个最小但高效的,且无需重复覆盖样式的清洁的类库,不仅可以加快加载的速度,也更有利于浏览器进行ui的渲染。

3、千万别忘记,那些在非bootstrap网站开发中,被反复经验验证过了的客户端优化技术

它们包括但不限于:

(1)编写更加精简的css和javascript代码

别忘了,代码中的每个字符,最后都会添加到网页中,并加重它的下载负荷。因此,编写干净简洁的css和javascript代码,同时保持可读性,对于任何一个前端开发人员而言,都是一个挑战。

良好的css实践包括:去除未使用的选择器,重复的风格,并避免过度嵌套等等。因此,在项目开始之初,就对整体页面组织有明确的规划,并真正理解bootstrap的各种风格,以尽量避免自创风格是非常重要的,当然,模式上,在整个项目组推广less,也算是一个不二法门。

此外,还有很多很棒的工具可以帮助您清理代码。比如像css lint和jslint等,它们不仅仅是你检查语法错误的工具,也是你查找那些使用了低效的编码模式,或从未使用过的代码等方面内容的利器。

(2)最小化实践

每次http请求都要进行一次和服务器的握手!因此,别犹豫,尽量的压缩(即从文档中删除无用的注释和空白)和拼合css和javascript文件,现在已经成为一种非常流行的整合实践方式,如果大家对此感兴趣,可以在回复中留言,我也非常乐意和大家分享这些方面的内容。

(3)注意图像文件

网页中最重要的部分,现在通常都是通过图像文件来表示(但也不尽然,尤其是在canvas和webgl技术高度发展的今天,但那个对于普通web前端开发人员而言,难度不小),当然,音频和视频文件也是其中的一部分。因此,优化这些视觉要素,对于提高网站加性能,是至关重要的。

这里提供有两个有用的小贴士:

  • 使用正确的图像格式:图像格式还有正确的?当然,这实际上也是近几年很多厂商竞争的一个热点,好吧,或者你并不关心这个。
  • 在上传它们之前尽可能的进行优化,有很多工具可以干这个活,tinypng、ssvgomg等。

或者您有更好的建议?欢迎您在回复中留言,毕竟,对于技术,我觉得,独乐了不如众乐乐,有时候,讨论会引发新的火花。

又或者您其实刚刚入门bootstrap,并不清楚关于bootstrap,尤其是bootstrap 4的相关细节,欢迎大家关注我,因为我正在考虑就这些方面的内容,为相关初学者,准备一个还算有趣的课程中。