只争朝夕
不负韶华

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

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

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

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


02、页面优化

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

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

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

02.2 合理设置 HTTP缓存

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

02.3 资源合并与压缩

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

02.4 CSS Sprites

合并 CSS图片(定位显示图片位置),减少请求数

02.5 Inline Images

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

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

02.6 懒加载

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

02.7 需要加载的时候加载

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

02.8 将外部脚本置底

一般将js置底到。

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

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

02.9 将 CSS放在 head中

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

02.10 异步请求 Callback

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

02.11 减少不必要的 HTTP跳转

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

02.10 避免重复的资源请求

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

02.13 其它

  • 减少对DOM的操作(减少页面的重绘)
  • 预载入组件或延迟载入组件
  • 提升并行加载(切分组件到多个域 ,提升服务器的响应能力)


03、Javascript

03.1 DOM 最耗性能的一类操作

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

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

03.2 慎用 with

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

03.3 避免使用 eval和 Function

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

03.4 减少作用域链查找

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

03.5 数据访问

网站性能优化 —— HTTP/HTML/CSS/JS
数据访问提高性能

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、…{}   

其它说明

网站性能优化 —— HTTP/HTML/CSS/JS
CSS选择符是从右到左匹配的

图画的粗,理还是不粗的哈,举个栗子:

.gloves p span{...}

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

实际:NO!,是先找到 span标签 然后再找到 p标签,最后才找到.gloves的。

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

CSS选择符优化

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

网站性能优化 —— HTTP/HTML/CSS/JS
CSS选择符减少性能损耗技巧

可重复性

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

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

网站性能优化 —— HTTP/HTML/CSS/JS
OOCSS(Object Oriented CSS)

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

页面引入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)
网站性能优化 —— HTTP/HTML/CSS/JS

  • 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
网站性能优化 —— HTTP/HTML/CSS/JS

  • 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脚本来绘制图形)
网站性能优化 —— HTTP/HTML/CSS/JS
网站性能优化 —— HTTP/HTML/CSS/JS

  • 视频video

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

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

  • 音乐Audio

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

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

  • 常规类:
<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 ——————

赞(0) 打赏
未经允许不得转载:无人区修炼者 » 网站性能优化 —— HTTP/HTML/CSS/JS
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无人区修炼者的博客

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏