前端工程师必知的机能优化技能

2019年9月1日 166次阅读 来源: 逐风随想

机能与构造

当能够踏实的明白并编写HTML和CSS这门专业知识。跟着网站代码量和流量的增进，另一种新技能也最先发挥作用，
这关于开辟效力和用户体验都至关重要。我们在相识网站机能和构造的基础知识上还要继续勤奋。

代码库的构造和体系构造不仅极大的影响开辟速率，还极大的影响页面显现的速率。这两者对用户和开辟人员来讲都是个大题目。
我们须要花时候为代码库设想准确的构造，肯定一切差别组件怎样协同事情，加速开辟效力并制造更好的用户体验。

别的，一些小技能也能够改良网站的机能。网站机能相似于二八定律，其中20%的优化将带来网站80%的机能提拔。

战略与构造

改良网站的机能和构造起首缭绕怎样构想优越的战略和构造的项目代码库构造。详细来讲，就是构建优越的目次体系构造和设想形式，
并找出项目中重用的大众代码的要领。

款式的构造

什么样的构造架构才是最有用的呢？ 平常来讲，能够遵照以下要领。 这类做法包含集合化的款式星散，还包含依据大众基础款式、用户交互组件、营业逻辑模块。

# Base              // 基础款式目次
  - normalize.css   // 通例的
  - layout.css      // 规划的
  - typography.css  // 排版的

# Components        // 组件款式目次
  - alerts.css
  - buttons.css
  - forms.css
  - list.css
  - nav.css
  - tables.css

# Modules          // 模块款式目次
  - aside.css
  - footer.css
  - header.css

上面展现的体系构造包含三个目次，每一个目次都具有自力的款式组。 我们的设想目的就是将网站是为一个体系而不是单个页面，
代码架构应当反应出这类形状。请注重这里没有触及到任何页面的特定款式。

Base目次包含了全部网站的规划和排版款式中运用的大众款式和变量。components目次包含了特定用户界面元素的款式，
这些元素分为差别的组件文件，比方正告提醒和按钮。末了，modules目次包含页面差别部份的款式，这些款式由详细的营业需求来决议。

组件款式纯粹是接口驱动的，与网站的中心营业逻辑无关。然后，模块包含特定于营业逻辑的款式。在HTML中标记模块时，一般在页面
运用差别的用户界面组件。比方，页面的侧边栏能够具有在组件款式中定义的列表和按钮款式，而侧边栏所需的其他款式则从模块款式继续。
款式的星散反应了程序员经由深图远虑的设想和款式被同享和重用的才能。

以这类体式格局构造款式的战略并非全新的。而且之前已在差别的CSS要领中提到过，包含面向对象的CSS,OOCSS以及用于CSS的
可扩大性和模块化架构(SMACSS)。这些要领对架构以及怎样运用款式来讲有着自身奇特的要领。

面向对象的CSS

面向对象的CSS要领是由Nicole Sullivan在为大型网站编写款式的事情中首创的。面向对象的CSS（`Object
Oriented CSS`）肯定了两个基础准绳，这些准绳将有助于构建具有壮大架构和合理代码量的可弹性网站。
这两个准绳包含：

  • 团体构造与皮肤的星散
  • 从容器中星散内容

团体构造与皮肤的星散包含从网站的主题中笼统出元素的规划，模块的构造应当是通明的，许可继续和显现其他款式而不会发生冲突。
最罕见的是这须要实体网格和规划构造，以及精心设想的模块。

将内容与容器星散触及移除父元素嵌套子元素的依靠项。不管其父容器是什么，题目应当看起来都是一样的。为此，元素须要
继续默许款式，然后依据须要运用多个类举行扩大。

HTML

<div class="alert alert-error">
  <p class="msg">......</p>
</div>

CSS

.alert {....}
.alert-error {...}
.msg {...}

面向对象的CSS首倡构建组件库，坚持灵活性，并运用网格。 这些都是很好的基础划定规矩，它们能够帮你防止每次向网站增添新页面
和新功能时都须要增添分外的款式。

可扩大和模块化架构的CSS

与面向对象CSS雷同的是Jonathan Snook开辟的可伸缩的模块化CSS要领论体系构造。
CSS的可扩大和模块化架构增进将款式分红五其中心种别，包含:

  • 基础
  • 规划
  • 模块
  • 状况
  • 主题

基础种别包含中心元素款式，涵盖了平常的默许值。
然后，规划种别肯定差别元素的大小和网格款式，肯定它们的规划。
模块款式是针对页面各个部份的更详细的款式，比方导航或特征款式。
然后，状况款式用于在模块包含备用状况(比方运动选项卡)的情况下加强或掩盖其他款式。
末了，能够增添主题种别，其中能够包含基于皮肤的款式，或许差别模块的表面和以为。

HTML

<div class="alert is-error">
  <p>...</p>
</div>

CSS

.alert {...}
.alert.is-error {...}
.alert p {...}
.alert.is-error p {}

在上面的例子中，alert类属于模块类，而is-error类属于状况类。然后依据须要来继续这些种别中的每一个款式。

挑选计划

挑选运用那种要领（假如有的话）完整取决于你自身。关于一个给定的网站，你以为最好的是什么。
平常来讲，OOCSS和SMACSS的牢靠组合事情会很好，你能够依据自身的喜欢从每种要领中自创准绳。

机能驱动的挑选器

CSS中的大部份注重力都集合在属性和值上面，而CSS中的挑选器经常被滥用却没有被意想到。
我们总以为将这些款式运用到准确的元素上就很完美了，然则这是一个不好的主意。
CSS中元素的挑选也会影响机能，包含页面显现的速率，以及款式再全部站点架构中的实用性和模块化水平。

坚持简短的挑选器

坚持CSS挑选器尽量短有几个优点。 包含最小化特异性，许可更好的继续性和可移植性，以及进步效力。
长的、多度限制的挑选器会下降机能，由于它们迫使浏览器从右到左显现每一个挑选器范例。
更详细的说，它们还增添了一切其他挑选器的累赘。

/* Bad */
header nav ul li a {...}

/* Good */
.primary-link {...}

/* Bad */
button strong span {...}
button strong span .callout {....}

/* Good */
button span {...}
button .callout {...}

在上面的代码中，第一个挑选器是异常详细的，不过我们能够经由过程运用类更快地辨认和显现。别的，
在这类情况下运用类大大削减了辨认元素父元素的须要，许可元素位置随时候变化而不损坏任何款式。

第二个示例包含比第一个示例更短的挑选器，然则能够经由过程为每一个挑选器供应雷同级别的特异性来革新它。
防止运用过于特定的挑选器，作为报答，假如元素的递次发生变化，
它们不太能够中缀。去掉一些零丁的挑选器单位，并给予一切挑选器雷同的强度，使它们能够更好地合作。

运用短挑选器的整体目的是下降特异性，建立更清洁、更宽松的代码。

支撑类

类异常棒，它们显现速率很快，许可重用款式，而且已普遍用于构建网站。然则，在运用类时，要视察一些罕见的实践，
以确保它们获得了恰当的运用。

由于挑选器是从右到左显现的，所以肯定要注重键挑选器。键挑选器是末了最右侧的挑选器单位。键挑选器异常重要，由于它标识了浏览器要查找的第一个元素。
假如键挑选器不好，浏览器就会堕入白费。不要畏惧仅仅为了机能的优点而运用一个类来变得越发奇特。

别的，不要在类挑选器前面加上元素前缀。如许做会障碍将这些款式轻松运用于差别的元素，并增添挑选器的整体特异性。

/* Bad */
#container header nav {...}

/* Good */
.primary-nav {...}

/* Bad */
article.feat-post {...}

/* Good */
.feat-post {...}

一样值得注重的是，尽量阔别ID挑选器，由于它们过于详细，不许可任何重复。说到底，运用ID和运用!important没什么差别。

代码重用

最大的机能缺点之一是文件大小过大和没必要要的浏览器显现。最大水平上削减CSS文件大小的疾速要领就是尽量多地重用款式。
应当组合任何重复的款式或接口形式，以许可同享代码。假如两个模块同享一个背景、圆角和一个方框暗影，则没有理由两次显式地声明雷同的款式。
相反，它们能够组合在一个类中，许可只编写一次款式，然后同享。

重用代码也不须要以语义为价值。一种手艺是将挑选器组合在一起用逗号分开他们，许可在两个挑选器之间继续雷同的款式。
在前面提到的OOCSS和SMACSS要领中经常看到的另一个要领包含将款式绑定到一个类，然后在同一个元素上运用多个类。

/* Bad */
.news {
  background:#eee;
  border-radius: 5px;
  box-shadow:inset 0 1px 2px rgba(0, 0, 0, .25);
}
.social {
  background:#eee;
  border-radius: 5px;
  box-shadow:inset 0 1px 2px rgba(0, 0, 0, .25);
}
.news,.social {
  background:#eee;
  border-radius:5px;
  box-shadow:inset 0 1px 2px rgba(0, 0, 0,.25);
}

/* Even Better */
.model {
  background: #eee;
  border-radius:5px;
  box-shawdow:inset 0 1px 2px rgba(0, 0, 0, .25);
}

只需代码是同享和重用的，而且整体文件大小削减了，那末采纳哪一种要领并没有太大的区分。

减少和紧缩文件

简朴的删除重复和没必要要的代码是削减文件大小的最好要领，然则另有其他要领。一种要领包含减少和紧缩文件，如HTML、CSS、JavaScript文件。
别的，图象能够被紧缩，删除任何没必要要的解释和色彩设置文件。

gzip 紧缩

一种比较盛行的文件紧缩范例称为gzip。gzip紧缩采纳罕见文件，包含HTML、CSS、JavaScript等，并标识要紧缩的相似字符串。辨认的婚配字符串越多，
能够紧缩的文件就越小，如许就能够将较小的文件从效劳器发送到浏览器。

设置gzip相称简朴的，HTML5模版团队已做了许多事情来完成这一目的。要想紧缩gzip文件，须要将.htaccess文件增添到web效劳器的根目次中，并标纪要紧缩的特定文件。
文件名开首的点是准确的，由于.htaccess文件是一个隐蔽文件。

在HTML5榜样Apache效劳器设置中，它们指导应当对哪些文件运用gzip紧缩。请记着，此紧缩的代码应当位于Web效劳器根目次下的.htaccess文件中。
别的，值得注重的是.htaccess文件只在ApacheWeb效劳器上事情，这些效劳器须要启用以下模块。

  • mod_setenvif.c
  • mod_headers.c
  • mod_deflate.c
  • mod_filter.c
  • mod_expires.c
  • mod_rewrite.c

平常来讲，这不是题目，有些Web效劳器以至能够为您设置紧缩。毕竟，紧缩文件也是Web效劳器的最大好处地点。

丈量紧缩

在谷歌Chrome web浏览器中，web inspector供应了大批关于机能的数据，特别是在Network选项卡中。别的，另有一些网站能够协助辨认是不是启用了gzip紧缩。

“收集”选项卡标识浏览器中加载的每一个文件，并显现文件大小和加载时候。请注重gzipping怎样将文件大小削减了约莫60％。
检察一个文件的要求头能够明确地肯定浏览器支撑哪一种范例的紧缩编码。在本例中，gzip、deflate和sdch都支撑，如要求头中所述。

图象紧缩

削减文本文件的大小是有协助的，然则经由过程紧缩图象的文件大小能够获得更好的效果。
一个网站上一切图片的总文件大小能够疾速地加起来，紧缩图片将大大有助于掌握文件大小。

许多人畏惧紧缩会下降图象自身的质量，所以防止紧缩图象。在大多数情况下，这是不准确的，图象能够以无损的体式格局紧缩，许可从图象中删除没必要要的色彩设置文件和解释，而不转变图象的质量。

有一些东西能够协助紧缩图象，其中最好的两个是ImageOptim for Mac和PNGGauntlet for Windows。这两种效劳都紧缩最经常使用的图象格式，特别是JPG和PNG文件。

还应当注重，经由过程高度和宽度属性在HTML中设置图象的尺寸确切有助于更快地显现页面，为图象留出恰当的空间。请明白，这些属性只用于肯定图象的准确尺寸，而不是减少图象。运用较大的图象，然后运用高度和宽度属性将其减少，这是一种不好的做法，由于它加载的数据比须要的多。

<img src="ocean.jpg" height="440" width="660" alt="Oceanview">

削减HTTP要求

除了文件大小以外，网站发出的HTTP要求数目是最大的机能圈套之一。每次向效劳器发出要求，页面加载时候都邑增添。有些要求必需在其他要求启动之前完成，太多的要求会使效劳器膨胀。

兼并相似的文件

削减HTTP要求数目的一种要领(能够也是最简朴的要领)是像组合文件一样组合。详细地说，将一切CSS文件兼并到一其中，并将一切JavaScript文件兼并到一其中。组合这些文件，
然后对它们举行紧缩，就会建立一个很小的HTTP要求。

<!-- Bad -->
<link href="css/reset.css" rel="stylesheet">
<link href="css/base.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">

<!-- Good -->
<link href="css/styles.css" rel="stylesheet">

平常来讲，网页的CSS应当加载在头文档的header最先处，而网页的javascript应当加载在完毕处，就在完毕body标记之前。
这些奇特的位置的原因是，CSS能够在加载网站的其他部份时加载。另一方面，JavaScript一次只能显现一个文件，
因而制止加载任何其他文件。这里的一个要注重的是，在页面自身显现完成以后，
JavaScript文件是异步加载的。另一个注重是，当须要JavaScript来协助显现页面时，比方HTML5 SHIV。

图象精灵

在CSS中拼接图象的做饭包含在多个元素之间运用一个背景图象。这里的目的是削减运用多个背景图象所做的HTTP要求的数目。

要建立一个精灵，能够将一些经常使用的背景图片排列成一张图片。然后运用CSS将sprite作为背景图象增添到元素中，
并运用background-position属性显现准确的背景图象。

设想一下背景图象在元素背面滑动，只是为了在给定的元素上显现准确的背景图象。比方，假如一个元素的宽度是16像素乘16像素高，
那末它只能暴露一个16像素乘16像素的背景图象，而其他的背景图象则被隐蔽。

比方，我们的文本编辑器菜单的精灵，我们能够将多个图标经由过程ps举行拼接在一起运用。

想运用上面的图象精灵，能够运用图象精灵作为span元素的背景来建立菜单。
然后，运用类来变动图象精灵的背景位置，能够响应地显现差别的图标。

HTML

<ul>
  <li><a href="#"><span class="bold">Bold Text</span></a></li>
  <li><a href="#"><span class="italic">Italicize Text</span></a></li>
  <li><a href="#"><span class="underline">Underline Text</span></a></li>
  <li><a href="#"><span class="size">Size Text</span></a></li>
  <li><a href="#"><span class="bullet">Bullet Text</span></a></li>
  <li><a href="#"><span class="number">Number Text</span></a></li>
  <li><a href="#"><span class="quote">Quote Text</span></a></li>
  <li><a href="#"><span class="left">Left Align Text</span></a></li>
  <li><a href="#"><span class="center">Center Align Text</span></a></li>
  <li><a href="#"><span class="right">Right Align Text</span></a></li>
</ul>

CSS

ul {
  margin: 0;
  padding: 0;
}
li {
  float: left;
  list-style: none;
  margin: 2px;
}
li a {
  background: linear-gradient(#fff, #eee);
  border: 1px solid #ccc;
  border-radius: 3px;
  display: block;
  padding: 3px;
}
li a:hover {
  border-color: #999;
}
li span {
  background: url("sprite.png") 0 0 no-repeat;
  color: transparent;
  display: block;
  font: 0/0 a;
  height: 16px;
  width: 16px;
}
.italic {
  background-position: -16px 0;
}
.underline {
  background-position: -32px 0;
}
.size {
  background-position: -48px 0;
}
.bullet {
  background-position: -64px 0;
}
.number {
  background-position: -80px 0;
}
.quote {
  background-position: -96px 0;
}
.left {
  background-position: -112px 0;
}
.center {
  background-position: -128px 0;
}
.right {
  background-position: -144px 0;
}

图象数据URI

别的，能够经由过程数据URI直接将图象的编码数据包含在HTML和CSS中，而不须要运用spriting图象，
从而完整不须要HTTP要求。运用图象数据URI能够很好地处置惩罚小图象，这些图象能够永久不会转变，
而且HTML和CSS能够被大批缓存。但是，数据uri存在一些题目。它们很难变动和保护，因而必需天生另一种编码。
而且，它们在较老的浏览器中没法事情，特别是在Internet Explorer 7及以下的浏览器中。

假如运用数据uri有助于削减一些HTTP要求，而且HTML或CSS能够被大批缓存，那末优点每每大于风险。一些协助天生数据uri的东西包含转换器和形式天生器。
然则要警惕，肯定要重复搜检，以确保现实数据URI的权重小于现实图象。

HTML

<img height="100" width="660" alt="Rigged Pattern" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAO6m73+X/bdxogujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQAyIyYy0nBAGgAAAABJRU5ErkJggg==">

CSS

div {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAO6m73+X/bdxogujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQAyIyYy0nBAGgAAAABJRU5ErkJggg==") repeat;
}

缓存大众文件

另一种协助削减HTTP要乞降更快地供应页面的要领是缓存罕见文件。当页面第一次加载时，
能够缓存特定文件。如今浏览器在重复接见一段时候后没必要再次要求雷同的文件。
一段时候取决于您，这取决于您愿望用户保存特定文件范例的时候长度。

与gzipping文件一样，能够在.htaccess文件中设置缓存文件的expires头。再次，HTML5 Boilerplate团队领先于我们。在他们的Apache Server Configs中，有一个特地用于设置expires头文件的文件。

图象，视频，Web字体和罕见媒体范例一般缓存一个月，而CSS和JavaScript文件一般缓存一年。假如CSS或任何其他文件每一年变动频次凌驾一次，则须要变动文件名，最好是版本化，以便加载。或许，能够将到期题目变动为更短的时候段。

ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"

将“access plus 1 year”的值变动为“access plus 1 week”更适合于每周变动但没有运用零丁文件名掌握版本的CSS和JavaScript文件。关于接收的expires头值，请参考mod_expires语法。

参考文献

W3C规范

    原文作者：逐风随想
    原文地址: https://segmentfault.com/a/1190000019377336
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞