bootstrap和性能优化

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

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

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

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

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

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

偏移列(Offset columns)

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

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

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

嵌套列(Nesting columns)

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

<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)和流式(Fliud)布局。

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

流式布局代码如下:

   <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. 一个对象以 “ { ”  开始,“ } ” 结束。每个“名称”后跟一个 “ : ” ;“名称/值 对”之间使用 “ ,  ”(逗号)分隔。 名称用引号括起来;值如果是字符串则必须用引号括起来,数值型则不需要。如:

var obj={"name":"darren","age":24,"location":"beijing"}

  2. 数组是值(value)的有序集合。一个数组以 “ [ ” 开始, “ ] ” 结束。值之间使用 “ , ” (逗号)分隔。如:

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:

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

或者这样的CSS:

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

  基本原理:

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

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

  正确的方式:

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

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

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

时间: 2024-12-16 12:36:00

bootstrap和性能优化的相关文章

AngularJS模块规范和性能优化

模块化规范 概念:根据我们写的不同的功能按照不同的类型划分,分工协作 作用:辅助的作用,能将我们编写好的js分为模块,是我们代码的编写更加专业 come on js 引入模块是同步进行的:前面记载以后,后面才能使用,所以不适合前端,主要是适用于后台 nodejs用的最多 amd 概念:a异步,m模块,d定义(异步模块化规范),引入模块可以异步加载 jquery和bootstrap都支持amd requirejs运用的最多 require js 主模块引入:data-main="url"

前端project与性能优化(长文)

原文链接:http://fex.baidu.com/blog/2014/03/fis-optimize/ 每一个參与过开发企业级 web 应用的前端project师也许都曾思考过前端性能优化方面的问题.我们有雅虎 14 条性能优化原则.还有两本非常经典的性能优化指导书:<高性能站点建设指南>.<高性能站点建设指南>.经验丰富的project师对于前端性能优化方法耳濡目染.基本都能一一列举出来.这些性能优化原则大概是在 7 年前提出的.对于 web 性能优化至今都有很重要的指导意义.

前端工程与性能优化

每个参与过开发企业级 web 应用的前端工程师或许都曾思考过前端性能优化方面的问题.我们有雅虎 14 条性能优化原则,还有两本很经典的性能优化指导书:<高性能网站建设指南>.<高性能网站建设进阶指南>.经验丰富的工程师对于前端性能优化方法耳濡目染,基本都能一一列举出来.这些性能优化原则大概是在 7 年前提出的,对于 web 性能优化至今都有非常重要的指导意义. 然而,对于构建大型 web 应用的团队来说,要坚持贯彻这些优化原则并不是一件十分容易的事.因为优化原则中很多要求与工程管理

推荐:Java性能优化系列集锦

Java性能问题一直困扰着广大程序员,由于平台复杂性,要定位问题,找出其根源确实很难.随着10多年Java平台的改进以及新出现的多核多处理器,Java软件的性能和扩展性已经今非昔比了.现代JVM持续演进,内建了更为成熟的优化技术.运行时技术和垃圾收集器.与此同时,底层的硬件平台和操作系统也在演化. 目录: 一.Java性能优化系列之一--设计优化 二.Java性能优化系列之二--程序优化 三.Java性能优化系列之三--并发程序设计详解 四.Java性能优化系列之四--Java内存管理与垃圾回收

Tomcat多实例集群架构 安全优化和性能优化

Tomcat多实例 复制tomcat目录 #将tar解压出来的tomcat复制出两个实例来cp -a /usr/local/apache-tomcat-8.0.46 /usr/local/tomcat1 cp -a /usr/local/apache-tomcat-8.0.46 /usr/local/tomcat2 修改多实例配置文件 #创建多实例的网页根目录 mkdir -p /data/www/www/ROOT #修改多实例配置文件的以下三行 vim /usr/local/tomcat/co

【朝花夕拾】Android性能优化篇之(一)序言及JVM篇

序言        笔者从事Anroid开发有些年头了,深知掌握Anroid性能优化方面的知识的必要性,这是一个程序员必须修炼的内功.在面试中,它是面试官的挚爱,在工作中,它是代码质量的拦路虎,其重要性可见一斑.在团队中,性能优化的工作又往往由经验丰富的老师傅来完成,可见要做好性能优化,绝不是一件容易的事情. 性能优化方面涉及的知识点比较广,有理论基础知识,也有实际操作技能,笔者将通过一系列的文章来进行整理,将主要包括Java虚拟机.内存分配.垃圾回收,android虚拟机.进程管理.内存优化.

iOS开发——项目实战总结&amp;UITableView性能优化与卡顿问题

UITableView性能优化与卡顿问题 1.最常用的就是cell的重用, 注册重用标识符 如果不重用cell时,每当一个cell显示到屏幕上时,就会重新创建一个新的cell 如果有很多数据的时候,就会堆积很多cell.如果重用cell,为cell创建一个ID 每当需要显示cell 的时候,都会先去缓冲池中寻找可循环利用的cell,如果没有再重新创建cell 2.避免cell的重新布局 cell的布局填充等操作 比较耗时,一般创建时就布局好 如可以将cell单独放到一个自定义类,初始化时就布局好

Java性能优化之JVM GC(垃圾回收机制)

Java的性能优化,整理出一篇文章,供以后温故知新. JVM GC(垃圾回收机制) 在学习Java GC 之前,我们需要记住一个单词:stop-the-world .它会在任何一种GC算法中发生.stop-the-world 意味着JVM因为需要执行GC而停止了应用程序的执行.当stop-the-world 发生时,除GC所需的线程外,所有的线程都进入等待状态,直到GC任务完成.GC优化很多时候就是减少stop-the-world 的发生. JVM GC回收哪个区域内的垃圾? 需要注意的是,JV

Spark性能优化指南——高级篇

Spark性能优化指南--高级篇 [TOC] 前言 继基础篇讲解了每个Spark开发人员都必须熟知的开发调优与资源调优之后,本文作为<Spark性能优化指南>的高级篇,将深入分析数据倾斜调优与shuffle调优,以解决更加棘手的性能问题. 数据倾斜调优 调优概述 有的时候,我们可能会遇到大数据计算中一个最棘手的问题--数据倾斜,此时Spark作业的性能会比期望差很多.数据倾斜调优,就是使用各种技术方案解决不同类型的数据倾斜问题,以保证Spark作业的性能. 数据倾斜发生时的现象 绝大多数tas