用bootstrap做的网站有哪些,bootstrap制作网站实例
最近几年以来,前端开发人员似乎就一直处在一种特殊的矛盾中,即:越来越庞大的前端代码,以及访问者越来越消失的耐性之间的矛盾,他们习惯了各种如本地应用般的即时性,恨不得所有的网页都能在1秒内加载完毕。
如果花费的时间比这更长,他们可能会不断的刷新,然后在继续一无所获后,离开你精心为他们准备的网站。甚至有时候,这甚至会导致你脆弱服务器的一次小型的奔溃。
而当你分析起,为何你的前端代码会变得如此庞大时,使用了bootstrap,可能是你经常会得到的结果之一。似乎只要在项目中,一使用这种流行的前端ui库,你就得承受这种种的烦恼。
事实果真如此?今天,我将教大家,通过三个前端优化步骤,来确保基于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所包含的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的相关细节,欢迎大家关注我,因为我正在考虑就这些方面的内容,为相关初学者,准备一个还算有趣的课程中。