首发于网站建设及技术分享

网站性能优化 —— HTTP/HTML/CSS/JS

12.28-2017更新 //部分说明及代码示例修改

往期分享待整理上传...

每个月都会让部门下面的小伙伴们进行一次月度个人分享。作为领导又是发起人，所以理所当然的，分享会自然是当仁不让的去开启每一场的第一把火。不过最近总觉得就单单在群分享文档里放着，还是有点浪费似的不甘心，就奉上职业道场，大家有用观摩下。

由于做产品前是曾经也位光荣的web前端设计师(虽然还有其他称呼...)，所以你懂得。文档偏实用性，深度原理诸位可自行查阅，还是非常好找的，本此分享虽然算不上精炼，但好歹也是常用型的资料，多是以往收集以及网上新进的资源整理归档，有些内容大家可能见过，有些却是新鲜的哈，但声明一点的是只是给内部定制的分享，注重实用性，部分内容不会那么全也没打算作细分指南。过了这一关的朋友们自然可以跳过，或者可以瞄几眼看看。

————————————————————————————————————————

01、《高性能网站建设指南》

01.1 本书14条精湛的优化技巧，作为一个能自称“前端工程师”的角色，你，必需拥有。

⚠️ 有点长，单独立文章说明，晚点会上传笔记或我的「读书脑图」专栏中查阅。

02、页面优化

02.1 设计实现层面 - 简化页面

尽量精简业务展示数量，减少页面、代码、图片、文章视频… (减少资源的使用)

02.2 合理设置 HTTP缓存

尽可能的让资源能够在缓存中待得更久

02.3 资源合并与压缩

外部脚本、样式 的文件进行合并：CSS、 JS、IMG、视频 … 资源压缩；

02.4 CSS Sprites

合并 CSS图片（定位显示图片位置），减少请求数

02.5 Inline Images

使用 data: URL scheme的方式将图片嵌入到页面或 CSS中

02.6 懒加载

使用没浏览过的资源？懒得加载呗。

02.7 需要加载的时候加载

在一般情况下并不加载信息内容，如不点击视频、不点击按钮的弹窗、… 等触发事件不加载。

02.8 将外部脚本置底

一般将js置底到。

注意: 如部分JS如果在body没载入完前，会会影响页面体验，就得放head里面，这种情况通常出现在body内容过载或网速很慢的情况下。（但目前通常会用懒加载/loading来处理这类体验，淘宝JD等就如此，所以也不太建议放入head，此条仅作为警示。注意）

02.9 将 CSS放在 head中

如放入body中，则还未下载和解析到 CSS，就已经开始渲染页面了，主次分明些好。

02.10 异步请求 Callback

将一些行为样式提取出来，慢慢的加载信息的内容。

02.11 减少不必要的 HTTP跳转

注：链接以 ’/‘结尾，有些服务器很可能隐藏 301跳转，增加多余请求。

02.10 避免重复的资源请求

疏忽或页面由多个模块拼接而成，每个模块中请求了同样的资源。习惯性养成合理搭建公共资源库。

02.13 其它

03、Javascript

03.1 DOM 最耗性能的一类操作

HTML收集器，返回的是一个数组内容信息，减少浏览器的repaint和reflow。

03.2 慎用 with

with(obj){ p = 1}; 实际上修改了代码块中的执行环境。

03.3 避免使用 eval和 Function

涉及的安全性极差不说，旧的浏览器性能呈倍数下跌，效率低等等，不推荐。

03.4 减少作用域链查找

这方面涉及到一些内容的相关问题，不过可以来 [点击这个链接]。

03.5 数据访问

03.6 字符串拼接

"+" 号来拼接字符串效率是比较低，使用数组的 join方法

04、CSS选择符

优先1: 匹配唯一该名字的ID元素

#toc{...}

优先2: 类选择符，匹配所有类属性包含该名字的元素

.toc{…}

优先3: 类型选择符，应用于指定元素类型的所有元素

a{…}

优先4: 相邻兄弟元素选择符，即h1元素的同级且ID为toc的元素（该属性IE6不支持）

h1 + #toc{…}

优先5: 子元素选择符，匹配父元素ID为toc的所有li元素（该属性IE6不支持）

#toc > li{…}

优先6: 后代选择符，当第2个选择符是第1个选择符的后代（子，子孙等）时，后代选择符规则会进行匹配

.toc#toc a{…}

优先7: 通配选择符，匹配文档中的每一个元素

*{…}

优先8: 属性选择符，根据元素的属性是否存在或其属性值进行匹配，该规则匹配href属性值等于#index的元素，该选择符有4个变体。

[href=“#index”{…}

优先9: 伪类和伪元素选择符

.a:hover，:link、:visited、:active、:focus、:lang、:before、:after、…{…}

其它说明

图画的粗，理还是不粗的哈，举个栗子：

.gloves p span{...}

惯性思维的你会想，读取顺序是从右向左才对吧？

实际：NO！，是先找到 span标签然后再找到 p标签，最后才找到.gloves的。

so，，，关于其它标签哪怕CSS3选择器的一些使用规律，相信也会又些头绪了吧。

CSS选择符优化

顺便花了点时间梳理了下「CSS选择符减少性能损耗的技巧」。以表格的形式画了出来。这样会更清晰些；

可重复性

例如：OOCSS（一种书写方法）关于这块，有很多网友说人家是框架。。。不过个人感觉它不是框架哈，更像是一种方法。想学精的同学可以去 [点击看看这个]

顺便附上一个早年弄的笔记，上面的例子未必准确，算是无限简化阉割版，只适合我个人用用，不完全，等空了再补上哈，不过给底子弱的看看还是可以的。

其它方法市面上还是有很多的，这只是个栗子哈。

页面引入CSS注意事项

少用：

链接式／<link>

把公用和独立使用.css文件区分开来的同时，尽量不要文件太多，以免增加请求数。

增加：

可重复性使用的类，相同样式只写一遍

05、HTML（超文本标记语言）

05.1 <!DOCTYPE> 声明
必须HTML 第一行，HTML 4.01 中有三种声明

HTML 4.01 Strict ————————

该 DTD 包含 HTML 所有的元素和属性，不过展示性的和弃用的元素是不包括的（比如 font不包括）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional ————————

该 DTD 包含 HTML 所有元素和属性，包括展示性的和弃用的元素（比如 font）。也不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset ————————

该 DTD 等同于 HTML 4.01 Transitional，但不过这个是允许框架集内容的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">

HTML 5 ————————

<!DOCTYPE html>

【注意】————————

XHTML 2.0已被放弃、非特殊情况XHTML 1.0 可以不用了

05.2 Head

<!--  编码／charset（HTML5）  //如需兼容IE9以下不建议用 -->
<meta http-equiv="charset" content="UTF-8"> -->

<!-- 新手注意，有时候utf-8也可这么可用： -->
<script charset="UTF-8"></script>
<a charset="UTF-8"></a>

meta 标签: http-equiv（编码／Content-Type）

meta 标签: 指定时间执行页面／Refresh

<meta http-equiv="refresh" content="5" />
<!-- 5秒之后刷新本页面:</a> -->

<meta http-equiv="refresh" content="5;  url=http://www.baidu.com/“ />
<!-- 5秒之后转到 baidu 首页:</a> -->

meta 标签: name

link 标签: rel

页面标签图标／shortcut icon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" >

样式／stylesheet

<link rel="stylesheet" type="text/css" href="public.css" />

script 标签 (建议放 </head> 的上面位置；)

<script type="text/javascript" src=“public.js"></script>

视频video

在 HTML 中播放视频的方法有很多种。

音乐Audio

HTML5 提供了播放音频文件的标准。

常规类：

<div></div>
<p></p>
<a href="" target="" ></a>
<span></span>
<strong></strong>
<b></b>
<i></i>
<em></em>

列表类：

<ul>
    <li></li>
</ul>

<ol>
    <li></li>
</ol>

<dl>
    <dt></dt>
    <dd></dd>
</dl>

表格类

<table>
       <thead>
               <tr>
                    <th></th>
               </tr>
       </thead>
       <tbody>
               <tr>
                    <td></td>
               </tr>
       </tbody>
</table>

表单类：

<form>
       <label></label>
       <input type="text">
       <textarea></textarea>
       <button type="button"></button>
</form>

文章类:

<article><!-- 都支持/// 定义文章。 -->
  <hgroup><!-- 把两个h标签组合起来时用, HTML5.1 版中被废除了-->
    <h1</h1>
    <h2></h2>
  </hgroup>
  <section><!-- 文档中的区段 -->
    <h1></h1>
    <p></p>
  </section>
  <address>联系方式、地址、电话、...</address>
</article>

其它

<input list="cars" />
<datalist id="cars">
	<option value="BMW">
	<option value="Ford">
	<option value="Volvo">
</datalist>

<img src="" />
<h1></h1>  <!-- h1~h6 -->
<time></time>  <!-- 时间标签 -->
<small></small>  <!-- 小号字标签 -->
<big></big>  <!-- 大号字标签 -->
<frame></frame>
<iframe></iframe>

......

—————— THANKS ——————

编辑于 2018-02-03 15:28

网站性能

HTML

前端工程师

文章被以下专栏收录

网站建设及技术分享

您身边的网络顾问，知无不言言无不尽~