web首页加载优化

这也是我面试的时候经常碰到的一个问题，有的时候面试官表达的比较模糊，有的时候我不太明白意思（被首页这两个字迷惑），所以有点蒙，结果就答得不好，今天稍微整理了下

1.书写标准

1.将样式表放在头部
2.将脚本放在底部
3.使用外部的JavaScript和CSS，可缓存
4.减少DNS查找
5.避免重定向发出多次请求
6.减少重构重绘
7.减少DOM元素的数量
8.尽量减少DOM访问
缓存已访问过的元素的索引
先“离线”更新节点，再把它们添到DOM树上
避免用JavaScript修复布局问题
9.用小的可缓存的favicon.ico（P.S. 收藏夹图标）

2.图片

网页一般60%以上的体积来自于图片，所以图片优化是web优化中的大头
1、使用svg，base64，编码代替图片
适用于图片小于2KB，页面引用图片不多的情况。将图片转换为base64编码到CSS或页面中，减少http的请求次数。

2、将多个小图片合并成雪碧图
将多个小的图片合并成一个大的图片在页面中引用，可以有效地减少请求http个数。

3.图片压缩
在不得不加载图片的前提下，进一步提高优化效果，通过有损或无损压缩所见图片的大小。减少图片加载流量，效果明显。

4.使用一些css动画来替换部分gif功能

5.使用专门的图片服务器
最好保持在2-4个域，每个http一般能请求4-6个同域资源，并且不会带上很多不需要的http头域，可以简单的配置缓存头，减少cookie

6.开启服务器的gzip
gzip可以减少不少传输资源的体积

7.使用cdn
在cdn中会优先选择跳数最少的服务器节点，减少了http的建立时长

8.更好的图片格式
webp、bpg、sharpP等新图片格式具有更好的压缩比，不过兼容性不太好

3.js

1.js数量比较多合并js到几个大的js库内减少http请求
2.对js进行压缩混淆减少js体积
3.如果js数量实在太多需要按需加载 JavaScript 文件，延迟加载和执行非必要脚本
4.在比较少文件的页面，预加载后一页的部分js