bootstrap和性能优化

时间:2019-06-22 05:11来源:计算机教程
Bootstrap建立了一个响应式的12列格网布局系统,它引入了fixed和fluid-with两种布局方式。 1、请减少HTTP请求基本原理: 全局样式(GlobalStyle).Bootstrap要求html5的文件类型,所以必须在每个使用

Bootstrap建立了一个响应式的12列格网布局系统,它引入了fixed和fluid-with两种布局方式。

1、请减少HTTP请求基本原理:

全局样式(Global Style).Bootstrap要求html5的文件类型,所以必须在每个使用bootstrap页面的开头都引用:  

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

<!DOCTYPE html>    
 <html lang="en">      
 ...    
 </html>

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

 

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

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

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

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

解决办法:

 

合并图片(css sprites),合并CSS和JS文件;图片较多的页面也可以使用 lazyLoad 等技术进行优化。

偏移列. 有时候,页面要素前面需要一些空白,bootstrap提供了偏移列来实现

2、请正确理解 Repaint 和 Reflow
注:Repaint 和 Reflow 也就是重绘和重排,请允许我在这卖弄下我有限认识的那么几个英语单词...囧

偏移列(Offset columns)

基本原理:

    以下代码实现了是实现图1-2中,第一列的宽度为4和偏移度为4宽度为4的两个div.

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

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

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

 

减少性能影响的办法:

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

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

嵌套列(Nesting columns) 

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

     <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> 

3、请减少对DOM的操作
基本原理:

嵌套的div长度之和不能大于它的父div,否则会溢出叠加。各位可以试试将第一层的div长度改为其他值,看看效果。

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

流式格网系统(Fluid grid system).它使用%,而不是固定的px,来确定页面要素的宽度.只需要简单的将.row 改成.row-fluid ,就可以将fixed行改为fluid.                                                                                                                                                                      

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

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

解决办法:

 

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

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

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

  • @gridColumns     12     列数
  • @gridColumnWidth     60px     每列的宽
  • @gridGutterWidth     20px     列间距

     
    布局(Layout).本文最后我们讨论创建页面基础模板的布局。如前面所言,Bootstrap提供两种布局方式,包括固定(Fixed)和流式(Fliud)布局。

    ...

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

 

4、使用JSON格式来进行数据交换
基本原理:

流式布局代码如下:   

JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。

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

与XML序列化相比,JSON序列化后产生的数据一般要比XML序列化后数据体积小,所以在Facebook等知名网站中都采用了JSON作为数据交换方式。

 

JS操作JSON:

 

在JSON中,有两种结构: 对象和数组。

前端性能优化

一个对象以 “ { ” 开始,“ } ” 结束。每个“名称”后跟一个 “ : ” ;“名称/值 对”之间使用 “ , ”(逗号)分隔。 名称用引号括起来;值如果是字符串则必须用引号括起来,数值型则不需要。如:
var obj={"name":"darren","age":24,"location":"beijing"}

  1. 请减少HTTP请求  

数组是值(value)的有序集合。一个数组以 “ [ ” 开始, “ ] ” 结束。值之间使用 “ , ” (逗号)分隔。如:
var jsonlist=[{"name":"darren","age":24,"location":"beijing"},{"name":"weidong.nie","age":24,"location":"hunan"}];

  基本原理:

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

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

5、高效使用HTML标签和CSS样式
基本原理:

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

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

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

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

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

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

  解决办法:

  1. <font size="3">HTML: 1
  2. 2
  3. 3 ... 4
  4. 5</font>

  合并图片(css sprites),合并CSS和JS文件;图片较多的页面也可以使用 lazyLoad 等技术进行优化。

复制代码

 

或者这样的CSS:

  **2. 请正确理解 Repaint 和 Reflow  **

  1. <font size="3">body .box .border ul li p strong span{color:#000}</font>

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

复制代码

  基本原理:

以上都是对HTML和CSS非常糟糕的使用方法。 
正确理解:

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

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

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

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

  减少性能影响的办法:

ID选择符 #box

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

类选择符 .box

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

标签 div

 

伪类和伪元素 a:hover

3 请减少对DOM的操作  

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

编辑:计算机教程 本文来源:bootstrap和性能优化

关键词: