Web质量优化种类,Bootstrap开拓实战之第一回接触
分类:前端技术

CSS 热门回想第意气风发期

2013/12/30 · CSS · CSS

本文由 伯乐在线 - 黄余粮 翻译。未经许可,制止转发!
爱尔兰语出处:css-weekly。招待加入翻译组。

CSS的热销回想涉及的内容囊括:最新推荐阅读的稿子、业界的动态、最新推荐的工具和种种创新意识。虽然每一期或者迥然不一致,但轮廓是那几个结构。若是您也在跟进CSS那块的技艺,接待投递分享CSS技能作品与谍报到这里,恐怕插足大家的 前端开垦 小组,同大家一块翻译与传播优质的源委。

本文由 伯乐在线 - 压力好大 翻译,sunbiaobiao 校稿。未经许可,幸免转发!
俄文出处:gokulkrishh.github.io。应接插足翻译小组。

本文大家重视领悟一下 Boostrap 历史、特点、用途,以至为何接收 Boostrap 来开荒大家的 Web 项目。

引入阅读

《用Chrome DevTools来为您的网址提速》

Addy 奥斯曼i 通过那篇小说陈说了怎么着使用Chrome DevTools来让您的网址更通畅。

《创制一个总结的响应式HTML邮件》

在这里篇教程中,Nicole Merlin 呈现了怎么样创造三个粗略的响应式HTML邮件,何况保险能够在每一个邮件客商端(满含手提式有线电话机邮件客商端和App)上无误展现。其艺术正是利用最小的Media query和不固定宽度的章程,尽或者地保障包容性。

设若您的网址在1000ms内加载成功,那么会有平均一个客商停留下来。二零一五年,平均网页的大大小小是1.9MB。看下图了然越多计算消息。

读书要点: 1.Bootstrap 概述
2.Bootstrap 特点
3.Bootstrap 结构
4.创办第三个页面
5.读书的各个策画

小说与课程

《透过Emmet来为您的CSS开垦提速》

Josh Medeski 在此篇小说中分享了有个别通过Emmet来扶植您更便捷地写CSS的本领。

《响应式相册》

特里 Mun 写的大器晚成篇教程,介绍了怎么支付贰个用来呈现相册的Wordpress插件。展现照片的功能很好,请参见这么些Demo。

《BEM,多修饰符,尝试选取性质选用器》

汤米 马歇尔在此篇文章中探寻了风华正茂种让您的前端代码保持 DRY 的新措施。不过,这种方式也可能有五个毛病,参见作者的介绍和随笔的议论纷纭。

《Firefox 29支持CSS变量》

Firefox 29 最初扶植CSS变量了,或许叫做自定义属性。你能够定义CSS变量,然后在体制中援用它们。

《Sasstraction》

CSS变量应该承继交给预管理器(比如:Saas, LESS),依旧浏览器?

《什么解决在谷歌Chrome下的难看的书体渲染难点》

Christian Lavie 体现了何等温婉地消除WebFonts的渲染难题。这种方案的独一白玉微瑕就是您不能不本身保留字体相关的文本。

图片 1

一、Bootstrap 概述 Bootstrap 是由 Facebook公司(举世最大的天涯论坛)的两名技巧程序猿研究开发的八个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉杰出,可用来火速、简单地创设基于 PC 及移动端设备的 Web 页面须求。
二〇〇九 年 6 月,推特(TWTR.US)内部的技术员为了消除前端开辟义务中的合作统一难点。经历各个方案后,Bootstrap 最后被鲜明下来,并于 2012 年 8 月公布。经过非常短日子的迭代进级,由最先的 CSS 驱动项目发展产生内置超多 JavaScript 插件和Logo的多效果与利益 Web 前端的开源框架。
Bootstrap 最为根本的有的正是它的响应式布局,通过这种布局能够协作 PC 端、PAD以至手提式有线电话机活动端的页面访谈。

工具

《Myth》

Myth 是一个CSS预管理器。通过它,你能够小心于写纯CSS代码,而无需忧郁浏览器的版本(不扶植新特色)。

《Unison.js – 在CSS、JS和HTML中联合断点》

Unison.js是多少个插件,它同意你在叁个地方定义断点,然后自动同步到JS、CSS和HTML中。

赞 收藏 评论

网址的宗旨内容须要在1000ms内显示出来。假诺失利了,客户将生生世世不会再拜望你的网址。通过降落页面加载的岁月,比相当多老品牌集团的收益和下载量有分明的晋级换代。比方

Bootstrap 下载及示范: 境内文书档案翻译官方网站:
瓢城 Web 俱乐部官方网站:

关于我:黄余粮

图片 2

伯乐在线发起人。热爱才具和成品,崇尚极客文化。 个人主页 · 作者的文章 · 13 ·  

图片 3

  • Walmart 每下落100ms的加载时间, 他们的纯收入就升高1%.
  • Yahoo 每下跌400ms的加载时间,他们的访谈量就进级9%。
  • Mozilla 将她们的页面速度升高了2.2秒,每年每度多收获了1.6亿firefox的下载量。

二、Bootstrap 特点 Bootstrap 非常的火,得益于它充足实用的意义和特点。首要骨干功用特色如下:

网址优化的手续

  1. 设定品质预算。
  2. 测量检验当前的性质。
  3. 找寻导致品质难点的地点。
  4. 末段,duang,使用优化特殊手艺。

上面有二种办法能够升官你的页面品质,让大家来看看

(1).跨设备、跨浏览器 能够宽容全部今世浏览器,包括比较诟病的 IE7、8。当然,本学科不再思索 IE9 以下浏览器。
(2).响应式布局 不仅能够扶助 PC 端的各个分辨率的显得,还帮助移动端 PAD、手提式有线电话机等显示屏的响应式切换突显。
(3).提供的周详的零件 Bootstrap 提供了实用性很强的组件,包含:导航、标签、工具条、按键等大器晚成多级组件,方便开辟者调用。
(4).内置 jQuery 插件 Bootstrap 提供了许多实用性的 jquery 插件,那么些插件方便开荒者完毕 Web 中种种健康特效。
(5).支持 HTML5、CSS3 HTML5 语义化标签和 CSS3 属性,都取得很好的援救。
(6).扶持 LESS 动态样式 LESS 使用变量、嵌套、操作混合编码,编写更加快、越来越灵敏的 CSS。它和 Bootstrap 能很好的极其开拓。

速度目的

速度目的是指页面包车型大巴可视部分被呈现在浏览器中的平均速度。表示为阿秒的情势,何况决计于viewport的轻重。请看下图(用录制帧的款式展现页面加载时间,以秒为单位)。

进程指标越低越好。

图片 4

速度目标能够由此Webpagetest 来测试(由Google维护)

三、Bootstrap 结构
先是,想要精通 Boostrap 的文书档案结构,须要在官方网址先把它下载到当地。Bootstrap下载地址如下:
Bootstrap 下载地址: (选取生产意况就能够,v3.3.4)

切中时弊

Webpage test 有好多特征,举个例子在差异的位置用差异的浏览器跑两个测量检验。 还足以测算其余的数目例如加载时间,dom成分的数码,首字节岁月等等…

例如:查看amazon在webpagetest上的测量检验结果 。

能够看看这些视频,了解由 Patrick Meenan 任课的关于webpagetest的越多新闻(供给FQ)。

解压后,目录突显那样的组织:

渲染阻塞

要是您通晓浏览器怎么样运转,那么您应有精晓HTML, CSS, JS是怎么被浏览器深入解析的以致中间哪个阻塞了页面包车型地铁渲染。倘使你不知晓,请看下图。

图片 5

点击how a browser works刺探更加多浏览器职业原理(小编为Tali Garsiel 和Paul Irish).

      bootstrap/
                              ├── css/
                              │├── bootstrap.css
                              │├── bootstrap.css.map
                              │├── bootstrap.min.css
                              │├── bootstrap-theme.css
                              │├── bootstrap-theme.css.map
                              │└── bootstrap-theme.min.css
                              ├── js/
                              │├── bootstrap.js
                              │└── bootstrap.min.js
                              └── fonts/
                                  ├── glyphicons-halflings-regular.eot
                                  ├── glyphicons-halflings-regular.svg
                                  ├── glyphicons-halflings-regular.ttf
                                  ├── glyphicons-halflings-regular.woff
                                  └── glyphicons-halflings-regular.woff2

浏览器渲染的步子

  1. 率先浏览器解析HTML标识去组织DOM树(DOM = Document Object Model 文书档案对象模型)
  2. 接下来拆解解析CSS去组织CSSOM树( CSSOM = CSS Object Model CSS对象模型)
  3. 在将DOM和CSSOM树结合成渲染树在此之前,JS文件被剖判和奉行。

今昔您精通浏览器怎样实行剖判了,让大家看看是哪部分梗阻了渲染树的转变。

入眼分为三大宗旨目录:css(样式)、js(脚本)、fonts(字体)
1.css 索引中有七个 css 后缀的文书,在那之中富含 min 字样的,是压缩版本,经常采用那么些;不包罗的属于尚未滑坡的,能够学习掌握css 代码的文本;而 map 后缀的公文则是css 源码映射表,在一部分特定的浏览器工具中应用。
2.js 索引包蕴多少个文本,是未压缩和裁减的 js 文件。
3.fonts 目录富含了不一致后缀的书体文件。

1. 封堵渲染的CSS

有人以为CSS阻塞了渲染。在结构CSSOM时,全部的CSS都会被下载,无论它们是还是不是在当前页面中被使用。

为通晓决那个渲染阻塞,跟着下边包车型大巴八个步骤做

  1. 将重要CSS内放置页面中,将要最重大的(第一遍加载时可以预知的局地页面所运用到的)style写入head中的 <style></style>里。
  2. 移除没用到的CSS。

那正是说作者是怎么寻找没用到的CSS的吧。

  1. 使用Pagespeed Insight 去获得像未利用的CSS,阻塞渲染的CSS和JS文件等等的总括数据。举例:Flipkart的Pagespeed Insight总结结果。
  2. 使用Gulp任务,如gulp-uncss也许使用Grunt 职务,如grunt-uncss。借令你不亮堂他们是何许,请阅读作者后面包车型地铁文章。

四、成立第三个页面 大家创制叁个 HTML5 的页面,何况将 Bootstrap 的主干文件引进,然后测验是还是不是平常彰显。
//第一个 Bootstrap

##标准小贴士

  1. 使用CSS Stats担保页面中全然未有未被用到的因素,唯风度翩翩的体裁和字体等等。
  2. Pagespeed Insight Chrome 插件.
  3. Tag Counter Chrome 插件.
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 介绍</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <button class="btn btn-info">Bootstrap</button>
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

2. 渲染阻塞的JavaScript

固然在分析HTML标志时,浏览器境遇了JavaScript,解析会甘休。只有在该脚本实践实现后,HTML渲染才会三番五次开展。所以那阻塞了页面包车型客车渲染。

为掌握决它

在<script></script>标签中运用 async或defer天性。

  1. <script async>将会在HTML拆解解析时下载该文件并在下载达成后及时试行。
  2. <script defer> 将会在HTML深入分析式下载该公文并在HTML深入分析实现后实行。

例如: async and defer都在Google Analytics中使用

点击查阅async 和defer的浏览器扶助。

五、学习的种种计划
1.开垦工具, 大家使用Sublime Text3充当Bootstrap的开辟工具, 並且安装了Emmet代码生成插件;
2.测验工具,除了常规的现代浏览器,其次正是作为移动端的测验工具,我们这里运用的是 Opera Mobile Emulator,和 Chrome 的移动 Web 测量试验工具。
3.所需基础,至稀有 HTML5 第生机勃勃季课程的根底,Bootstrap 内置了成都百货上千 jQuery 插件,纵然应用起来比 jQuery 或 JS 本身要轻巧的多,但要是有 jQuery 和 JS 课程的基本功,那学习精通力就一发浓烈;
4.课程分辨率:基础教程,大家采纳1024 x 768 来录像,但一些特殊部分,比方响应式和种类课程,供给大分辨率摄像,会利用 1440 x 900 来录像。

内部存款和储蓄器泄漏

内存泄漏和页面臃肿 是前者开垦者所要面对的难题之风流倜傥。让我们来看看哪些开采并减轻内部存款和储蓄器泄漏。

在JavaScript中找找内部存款和储蓄器泄漏

动用Chrome Task Manager(职责管理器)去检查实验app所运用的内部存款和储蓄器以至js内部存款和储蓄器(总体内部存款和储蓄器 实时内存)。若是您的内部存款和储蓄器一向随着你的历次操作而增加,那么你能够疑心有内部存款和储蓄器泄漏了。

下面是Chrome Task Manager的截图。

图片 6

假使大家还想深刻学习,可以点击这里展开课习,再为大家附二个可观的专项论题:Bootstrap学习课程 Bootstrap实战教程

Chrome DevTools分析

应用 Heap Profiler 去查看内部存款和储蓄器泄漏。展开Chrome devTools 然后点击profiles 标签,接着选中 take heap snapshot。要是您不停解Chrome DevTools,请阅读事先的篇章.

图片 7

Heap Profiler有八个快速照相视图(snapshot view)

  1. Summary 视图 – 展现对象的完整数量以至它们的实例总量,浅部(Shallow)大小(对象自己的内部存款和储蓄器大小)以致保留(Retained)大小(自动GC发生后所释放的内部存款和储蓄器大小 不可能执行到的对象的内存大小)。
  2. Comparison 视图- 用于相比二个操作的左右的三个或多少个快速照相,能够检查实验内部存款和储蓄器泄漏。
  3. Containment 视图- 彰显了您的app对象架构的完全视图 DOMWindow 对象(全局对象下的), GC 根部, 当地对象 (来自浏览器)。
  4. Dominators 视图- 展示了 dominators 树的堆图。

点击驾驭愈来愈多 Heap profiler。

如上就是本文的全部内容,希望对我们的上学抱有助于,也指望大家多多指教脚本之家。

DOM泄漏

对DOM成分的援引会变成DOM泄漏何况阻碍自动垃圾回笼(GC)的拓宽。

来看三个例证

1
2
3
4
5
<div>
    <div id="container">
        <h1 id="heading">I am just a heading nothing much</h1>
    </div>
</div>
1
2
3
4
5
6
7
8
var parentEle = document.getElementById('container'); //get parent ele reference 得到父元素的引用
 
var headingEle = document.getElementById('heading'); //get child ele reference 得到子元素的引用
 
parentEle.remove(); //removes parent element from DOM 从DOM中移除父元素
 
//but its child ref still exist, So parentEle won't collect GC'd and causes DOM Leak
//但是它的子元素引用仍然存在,所以parentEle不会被GC回收,因此导致了DOM泄漏。

将它的援用设置为null就可以修复DOM泄漏。

1
headingEle = null; //Now parentEle will be GC'd

地点便是前面贰个开拓者常碰到的主题材料。前不久就讲到那。假如你欢畅作者的稿子,请共享或然在底下斟酌。多谢!!

你大概感兴趣的文章:

  • vue中怎么着引入jQuery和Bootstrap
  • 什么样接受Bootstrap创立表单
  • Bootstrap怎么着激活导航状态
  • Bootstrap怎么样创造表单
  • Bootstrap每一天必学之基础排版
  • bootstrap基础知识学习笔记
  • 首先次接触Bootstrap框架
  • 先是次接触美妙的Bootstrap
  • 全系IE扶植Bootstrap的消除措施
  • 怎样选择bootstrap框架 bootstrap入门必供给看!

本文由pc28.am发布于前端技术,转载请注明出处:Web质量优化种类,Bootstrap开拓实战之第一回接触

上一篇:网页设计师必备的10个CSS技巧,常用前端代码资源 下一篇:没有了
猜你喜欢
热门排行
精彩图文