Bootstrap和性能优化

发表于: 2021-09-15

JavaScript是浏览器中的霸主，为什么这么说，因为在浏览器在执行JavaScript代码时，不能同时做其它事情，即<script>每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的还是外链的），JavaScript代码执行完成后，才继续渲染页面。这个也就是JavaScript的阻塞特性。

因为这个阻塞的特点，建议把JavaScript代码放到标签以前，这样既能有效的防止JavaScript的阻塞，又能使得页面的HTML结构能更快的释放。

HTML规范清楚指出CSS要放包含在页面的区域内。

Bootstrap建立了一个响应式的12列格网布局系统，它引入了fixed和fluid-with两种布局方式。 全局样式(Global Style)
.Bootstrap要求html5的文件类型，所以必须在每个使用bootstrap页面的开头都引用:

1
2
3
4
<!DOCTYPE html>
<html lang="en">
...
</html>

同时，它通过Bootstrap.less文件来设置全局的排版和连接显示风格.其中去掉了Body的margin，使用@baseFontFamily,@baseFontSize,@linkColor等变量来控制基本排版。 格网系统(Grid
System).默认的Bootstrap格网系统提供一个宽达940像素的,12列的格网。这意味着你页面默认宽度是940px,最小的单元要素宽度是940/12px.Bootstrap能够使得你的网页可以更好地适应多种终端设备(
平板电脑，智能手机等)。

1
2
3
4
5
6

<div class="row">
    　　
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

偏移列. 有时候，页面要素前面需要一些空白，bootstrap提供了偏移列来实现 偏移列(Offset columns)
以下代码实现了是实现图1-2中，第一列的宽度为4和偏移度为4和宽度为4的两个div.

1
2
3
4
5

<div class="row">
    <div class="span4">...</div>
    <div class="span4 offset4">...</div>
</div>

嵌套列. 嵌套列是容许用户实现更复杂的页面要素布局。在bootstrap中实现嵌套列非常简单，只需要在原有的div中加入.row 和相应的长度的span* div即可。 嵌套列(Nesting columns)

1
2
3
4
5
6
7
8
9
10

<div class="row">
    <div class="span12">
        Level 1 of column
        <div class="row">
            <div class="span6">Level 2</div>
            <div class="span6">Level 2</div>
        </div>
    </div>
</div>

嵌套的div长度之和不能大于它的父div，否则会溢出叠加。各位可以试试将第一层的div长度改为其他值，看看效果。 流式格网系统(Fluid grid system).它使用%，而不是固定的px,来确定页面要素的宽度.只需要简单的将.row
改成.row-fluid ，就可以将fixed行改为fluid.

1
2
3
4
5

<div class="row-fluid">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

嵌套的流式格网和嵌套的固定格网，稍微有些不同。嵌套流式格网(Fluid nesting)的子要素不用匹配父要素的宽度，子要素用100%来表示占满父要素的页面宽度。 自定义格网(Grid customization)
.Bootstrap允许通过修改variables.less的参数值来自定义格网系统。 变量 默认值 说明

  • @gridColumns 12 列数
  • @gridColumnWidth 60px 每列的宽
  • @gridGutterWidth 20px 列间距 布局(Layout).本文最后我们讨论创建页面基础模板的布局。如前面所言，Bootstrap提供两种布局方式，包括固定(Fixed)和流式(Fluid)布局。
1
2
3
4
5
6

<body>
<div class="container">
    ...
</div>
</body>

流式布局代码如下：

1
2
3
4
5
6
7
8
9
10
11

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            <!--Sidebar content-->
        </div>
        <div class="span10">
            <!--Body content-->
        </div>
    </div>
</div>

前端性能优化

1. 请减少HTTP请求

基本原理： 在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其地突出。

一个正常HTTP请求的流程简述：如在浏览器中输入”www.xxxxxx.com"
并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。

而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。

网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。所以，请减少HTTP请求。

解决办法：

合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。

2. 请正确理解 Repaint 和 Reflow

注：Repaint 和 Reflow 也就是重绘和重排

基本原理：

Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。

Reflow(重排)
就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，所以前端也就有必要知道
Repaint 和 Reflow的知识。

减少性能影响的办法：

上面提到通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式；
有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。

总之，因为 Reflow 有时确实不可避免，所以只能尽可能限制Reflow的影响范围。

3. 请减少对DOM的操作

基本原理：

对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。

天生就慢。在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript(ECMAScript)
看成另一个岛屿，两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费，而访问的次数越多，交的费用也就越多。所以一般建议尽量减少过桥次数。

解决办法：

修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。

减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。

注：在IE中:hover会降低响应速度。

4. 使用JSON格式来进行数据交换

基本原理： JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
与XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后数据体积小，所以在Facebook等知名网站中都采用了JSON作为数据交换方式。

JS操作JSON：

在JSON中，有两种结构：对象和数组。

  1. 一个对象以 “ { ” 开始，“ } ” 结束。每个“名称”后跟一个 “ : ” ；“名称/值 对”之间使用 “ , ”（逗号）分隔。 名称用引号括起来；值如果是字符串则必须用引号括起来，数值型则不需要。如：
1
var obj = {"name": "darren", "age": 24, "location": "beijing"}
  1. 数组是值（value）的有序集合。一个数组以 “ [ ” 开始， “ ] ” 结束。值之间使用 “ , ” （逗号）分隔。如：
1
2
3
4
5
6
7
8
9
10
var jsonlist = [{
    "name": "darren",
    "age": 24,
    "location": "beijing"
},
    {
        "name": "weidong.nie",
        "age": 24,
        "location": "hunan"
    }];

对这种数组和对象字面量的操作是非常方便且高效的。如果预先知道JSON结构的情况下，使用JSON进行数据传递简直是太美妙了，可以写出很实用美观可读性强的代码。如果你是纯粹的前台开发人员，一定会非常喜欢JSON。

5. 高效使用HTML标签和CSS样式

基本原理：

HTML是一门用来描述网页的一种语言，它使用标记标签来描述网页，作为一名合格的前端开发，你有必要去知道其常用标签代表的含义(SEO)和属性(表现形式)。

CSS指层叠样式表 (Cascading Style Sheets)，如果说把页面想象成一个人，HTML就是人的骨架，CSS就是人的衣装，一个人的品味从他的衣装就能一目了然。

一名专业的前端开发也是一名优秀地重构，因为在页面中经常会有各种不合理地嵌套和重复定义的CSS样式，我不是要你重构页面，只是希望你在碰到这种情况的时候解决这些问题。如这样的HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<table>
    <tr>
        <td> 　　
            <table>
                <tr>
                    <td> 　　　　
                        ... 　　
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

或者这样的CSS:

1
2
3
    body .box .border ul li p strong span {
    color: #000
}

以上都是对HTML和CSS非常糟糕的使用方法。

正确理解：

HTML是一门标记语言，使用合理的HTML标签前你必须了解其属性，比如Flow Elements，Metadata Elements ，Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。

CSS是用来渲染页面的，也是存在渲染效率的问题。CSS选择符是从右向左进行匹配的，这里对css选择符按照开销从小到大的顺序梳理一下：

ID选择符 #box 类选择符 .box
标签 div 伪类和伪元素 a:hover

当页面被触发引起回流（reflow）的时候，低效的选择符依然会引发更高的开销，所以请避免低效。

6. 将CSS和JS放到外部文件中引用，CSS放头，JS放尾

基本原理：

引入外部文件好处是显而易见的，而且是项目稍稍复杂一点的时候就有必要了这样做了。

易维护、易扩展，方便管理和重复利用。

转载于:https://www.cnblogs.com/Outyua/p/4678488.html