网站性能优化 —— HTTP/HTML/CSS/JS
12.28-2017更新 //部分说明及代码示例修改
往期分享待整理上传...
每个月都会让部门下面的小伙伴们进行一次月度个人分享。作为领导又是发起人,所以理所当然的,分享会自然是当仁不让的去开启每一场的第一把火。不过最近总觉得就单单在群分享文档里放着,还是有点浪费似的不甘心,就奉上职业道场,大家有用观摩下。
由于做产品前是曾经也位光荣的web前端设计师(虽然还有其他称呼...),所以你懂得。文档偏实用性,深度原理诸位可自行查阅,还是非常好找的,本此分享虽然算不上精炼,但好歹也是常用型的资料,多是以往收集以及网上新进的资源整理归档,有些内容大家可能见过,有些却是新鲜的哈,但声明一点的是只是给内部定制的分享,注重实用性,部分内容不会那么全也没打算作细分指南。过了这一关的朋友们自然可以跳过,或者可以瞄几眼看看。
————————————————————————————————————————
01、《高性能网站建设指南》
01.1 本书14条精湛的优化技巧,作为一个能自称“前端工程师”的角色,你,必需拥有。
⚠️ 有点长,单独立文章说明,晚点会上传笔记或我的「读书脑图」专栏中查阅。
02、页面优化
02.1 设计实现层面 - 简化页面
尽量精简业务展示数量,减少页面、代码、图片、文章视频… (减少资源的使用)
02.2 合理设置 HTTP缓存
尽可能的让资源能够在缓存中待得更久
- 很少变化资源: 通过 HTTP Header中的Expires设置一个很长的过期头 [方法] ;
- 变化不频繁而又可能会变的资源: 使用 Last-Modifed来做请求验证[方法];
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 其它
- 减少对DOM的操作(减少页面的重绘)
- 预载入组件或延迟载入组件
- 提升并行加载(切分组件到多个域 ,提升服务器的响应能力)
- ...
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注意事项
少用:
- 导入式/@import"mystyle.css"
- 行内式/style="" //(小型页面可直接写入行内中,网站中,为了规范最好勿写,以保持整洁、提高可复制性和可维护性)
- 内嵌式/<style> //(同上)
链接式/<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
- title 标签
- meta 标签
<!-- 编码/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>
- Body(比较有意思的是,html5中,很多时候未必一定要放它。)
- header(文档的页眉)
- menu(目前大多主流浏览器都不支持 <menu> 标签)
- nav(导航链接的部分用)
- footer(页脚:文档的作者、版权信息、使用条款链接、联系信息等等)
- 图形canvas(使用JS脚本来绘制图形)
- 视频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 ——————