时间：2023-04-23 01:54:02 | 来源：网站运营
时间：2023-04-23 01:54:02 来源：网站运营
网站性能优化 —— HTTP/HTML/CSS/JS：12.28-2017更新 //部分说明及代码示例修改01.1 本书14条精湛的优化技巧，作为一个能自称“前端工程师”的角色，你，必需拥有。⚠️ 有点长，单独立文章说明，晚点会上传笔记或我的「读书脑图」专栏中查阅。
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置底到。
02.9 将 CSS放在 head中如放入body中，则还未下载和解析到 CSS，就已经开始渲染页面了，主次分明些好。
02.10 异步请求 Callback将一些行为样式提取出来，慢慢的加载信息的内容。
02.11 减少不必要的 HTTP跳转注：链接以 ’/‘结尾，有些服务器很可能隐藏 301跳转，增加多余请求。
02.10 避免重复的资源请求疏忽或页面由多个模块拼接而成，每个模块中请求了同样的资源。习惯性养成合理搭建公共资源库。
02.13 其它
03.1 DOM 最耗性能的一类操作HTML收集器，返回的是一个数组内容信息，减少浏览器的repaint和reflow。
03.2 慎用 withwith(obj){ p = 1}; 实际上修改了代码块中的执行环境。
03.3 避免使用 eval和 Function涉及的安全性极差不说，旧的浏览器性能呈倍数下跌，效率低等等，不推荐。
03.4 减少作用域链查找这方面涉及到一些内容的相关问题，不过可以来 [点击这个链接]。
03.5 数据访问
03.6 字符串拼接"+" 号来拼接字符串效率是比较低，使用数组的 join方法
优先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{...}惯性思维的你会想，读取顺序是从右向左才对吧？CSS选择符优化顺便花了点时间梳理了下「CSS选择符减少性能损耗的技巧」。以表格的形式画了出来。这样会更清晰些；
可重复性例如：OOCSS（一种书写方法）关于这块，有很多网友说人家是框架。。。不过个人感觉它不是框架哈，更像是一种方法。想学精的同学可以去 [点击看看这个]
页面引入CSS注意事项少用：
05.1 <!DOCTYPE> 声明
必须HTML 第一行，HTML 4.01 中有三种声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><!DOCTYPE html>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="refresh" content="5" /><!-- 5秒之后刷新本页面:</a> --><meta http-equiv="refresh" content="5; url=http://www.baidu.com/“ /><!-- 5秒之后转到 baidu 首页:</a> --><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" > 样式／stylesheet<link rel="stylesheet" type="text/css" href="public.css" /><script type="text/javascript" src=“public.js"></script><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>......关键词：性能
