前端性能优化简述极简版

总结的话是这样

移动端：

保持单个文件小于 25kb
打包内容为分段multipart文档

图片：

优化图片
优化css sprite
不要再html中放缩放图片
使用体积小，可以缓存的favicon.ico

javascript:

把脚本放在页面底部
使用外部JavaScript和css
压缩js和css
移除重复脚本
减少dom操作
使用高效的事件处理

css:

不要把样式表放在head中
不要使用css表达式
使用link代替@import
不要使用filter

页面内容：

减少http请求数
减少dsn查询
减少重定向
使用ajax请求
延迟加载
预加载
减少dom元素数量
划分内容到不同域名
劲量减少ifame使用
避免404错误

服务器

使用cdn
添加expires和cache-control响应头
启用gzip
配置etag
尽早输出缓冲
ajax请求使用get方法
避免图片src为空

cookie

减少cookie大小
静态资源使用cookie域名

下面是一些具体的措施:

尽可能减少HTTP请求:

网页中的每个内容都是一次http请求获取，请求过多，那么响应就会变慢。所以可以
图片合并，JavaScript合并，css合并

使用cdn（内容分发网络）

再离你最近的地方，放置一台性能好链接顺畅的副本服务器，
让你能够以最近的距离，最快的速度获取内容。

添加expire/cache-control头

当浏览器发送请求时候，如果nginx返回了一个expire响应头字段。
资源在本地的过期时间，存在本地。
Cache-control是http协议中常用的头部之一
负责控制页面的缓存机制。

启用gzip压缩

把文件发在服务器压缩后，然后在传输，然后浏览器解压缩。
将文件变小，减少了流通量。

将css放在页面最上面

层得样式表单，后面的css,级别更高的css可以重叠前面的。
css放在后面禁止了网页内容的顺序显示
避免页面重现空白或者选错的问题，提高浏览器的渲染，需要把css放在前面。
这样再加载html的时候因为css已经加载完毕，在渲染的时候就不会出现空白或者选错问题。

将script放在页面最下面

dom加载顺序（读取html->head->meta->title->style->link->script->body->div->img）
比如你写了一个script死循环，没有放在最后面而是放在body前面，那么后面的内容就显示不出来了。

避免在css中使用expression

css expression: css表达式 比如:  width: calc(100% - 100px);
页面显示和缩放，页面滚动，移动鼠标都会导致css expression重新计算

把JavaScript和css放在外部文件中

// 单独提出-》减少文件体积；提高复用性；可维护性 // 卸载页面里面-》减少请求数；提升页面渲染速度
比如common.css放在外部。如果不经常访问后者只是应用与一个页面的样式就写在里面或者脚本和样式内容很少。

减少dns查询

// 再第一次打开www.a.com的时候，必须通过一个机制，将www.a.com转化为10.96.14.1.1de
的形式，然后dns查找找到www.a.com的位置。
浏览器会自动缓存，可以减少dns查询，不过缓存时间长，如果www.a.com的地址发生变化就不会即使
检测到。
可以使用单域或者多域的方式。
多域: 图片放在img.a.com, js放在js.a.com, 其他www.a.com

压缩JavaScript和css

也就是格式化，把js，css压成一坨。
去除不必要的空白符，格式符，注释符
减写方法名，参数名。

避免重定向

原请求被重新转向了其他请求
301 Moved pearmanently（永久重定向）
用户请求的页面a.com被移动到了b.com,那么用户会在发送一个请求到b.com
302 Found（临时重定向）
用户请求的页面被找到了，但不在原始位置，所以服务器会回复一个新地址。
增加了浏览器和服务器的往返次数。增加了http请求

移除重复的脚本

避免因为重复代码导致的页面内容显示错误

配置实体标签

Etag = entity Tag，属于http协议，受到web服务支持。
使用特殊的字符串来标识某个请求资源版本
浏览器请求资源的时候，如果请求字段的Etag和服务器一致，那么资源
没有改动，返回304 not modified（说明无需再次传输请求的内容，也就是说可以使用缓存的内容）。浏览器使用缓存。

使用ajax缓存

分批加载和局部更新
post 每次都执行 不被缓存
get 同一地址不重复执行， 可以被缓存

减少dom操作

因为dom操作会引起重排和重绘，同时DOM和js其实是在两个文件，每次都要建立连接
减少DOM 操作体现为:
- 如果在一个局部方法中需要多次访问同一个dom，则先暂存它的引用
- 用querySelectorAll()替代getElementByXX()。
- 少用HTML集合（类数组）来遍历，因为集合遍历比真数组遍历耗费更高。
- 用事件委托来减少事件处理器的数量。

减少重排

- 避免设置大量的style属性
- 实现元素的动画，它的position属性，最好是设为absoulte或fixed，这样不会影响其他元素的布局,这点主要是体现在触发 BFC 机制上
- 不要使用table布局，因为table中某个元素旦触发了reflow，那么整个table的元素都会触发reflow。是在要用设置 table-layout:auto; 或者 table-layout:flex;

dns预解析

如果是http协议开头的页面 a 标签是默认开启dns预解析的, 如果是https协议开头的页面 a 标签是默认关闭dns预解析的
就使用 <meta http='x-dnc-prefetch-contorl'> 开启dns预解析 <link rel='dns-prefetch'>