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

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

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

3招加速你的Bootstrap网站

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

3招加速你的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、如果可能,应该选择从源开始的构建,而不是选择预编译的下载包

3招加速你的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的相关细节,欢迎大家关注我,因为我正在考虑就这些方面的内容,为相关初学者,准备一个还算有趣的课程中。

公众号:fuyeying88(长按复制)

本文来自:营销狂徒,不代表展风网立场!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件举报,一经查实,本站将立刻删除。