前言：本文的目的在于介绍网页加载的那些事儿，加载越快越好。
0.优化关键：
降低http请求的数量（因为一个网页中会有多个部分分别发出请求）
降低资源体积
图片优化
js优化
css优化
代码优化
优化http的请求顺序(一般是顺序请求，因此，可以关注一下代码顺序)
服务器端优化
其中，3，4，5，6，与浏览器相关。
1.网页元素加载的一般顺序
接受第一个字节之前 – 受限于服务器速度，网速，后台程序的速度。一般人物200ms之内的都不错，超过500ms的就需要看看哪里出了问题。其顺序一般如下：
- DOM下载到本地
- 第一个渲染(first paint)，此时位于后台，用户还看不到什么
- 第一个DOM元素渲染(first content paint)，此时用户可以看到有所展示了。
- 第一个有意义展示(first meaningful paint)。
- 全部加载完毕。
这里之所以说一般顺序是因为用户对于不同的应用有不同的要求，比方说，在线点播的网站需要把播放器的内容尽快展示出来，而OA之类的需要尽快把界面打开。
2.分析工具
本文用到的工具就是浏览器（诸如谷歌或者火狐都可以）
谷歌：F12 ，点开network，performance等。
另外一个工具就是
https://developers.google.com/speed/pagespeed/insights/
会把对应网页的加载速度等生成详细报告。
3.Http 1.1 vs Http 2
简而言之，Http 1.1多次请求多次发送，Http 2是一次请求一次打包后发送分别更新，因此后者尤其适用于cache。目前，Http2已经进入了实用阶段。
4.js文件压缩
多个js文件打包在一个文件中：http2中不再适用。目前主流的方式是负责现实的放在head中，负责功能的放在body尾部。gulp,grunt,yuicompress, jsmin等多种工具可以用来压缩js文件。
5.图片拼接
多个图片拼成一张图片。
6.字体文件
需要多少就用多少
7.减少redirect
redirect之后，要加载什么就无法掌控了。
8.DOM结构越简单越好
没必要的DOM能减少就减少。因此多用伪元素::before, ::after等可以减少代码结构。
9.图片优化
常见的jpg, png, gif,svg等根据需求进行选择。svg适合缩放的场合，png则不适合缩放。PNG不掉色，但是可能会导致体积巨大。jpg掉色，但是能压缩得特别狠。
对于不同类型的图像，可以通过一些工具进行转换，比如，webp。
template图像vscontent图像：后者是在前者修改后的结果，也正是因为如此，造成了了后者体积会大许多，对于一些诸如滤镜什么的可以通过css实现。
另外，新的img的写法是需要加上srcset的图片，这个属性对应了图片的宽度，以及多个不同大小的图片（就像xcode中的2X,3X,4X一样）
<img src="hello.jpg"
srcset="hero-mobile.jpg 375 w,
hero-largemobile.jgp 480w
hero-tablet.jpg 800w"
sizes="(max-width:375px) 375px,
(max-width:480px) 480px,
800px"
alt=""
>
这里面的sizes属于依次匹配，找到第一个匹配的就贴上去，因此顺序很重要！另外，html5也有了picture的标签，有类似使用，只是兼容性或许有问题。
10.CSS优化
删掉空格、换行、注释。能缩写就缩写。
避免使用@import，这样不仅多次request，而且是串行下载。改用link，其实并行下载。
对于link标签，可以加上media来进行限制，这样浏览器就会根据需求进行下载。
Bootstrap等第三方css的好处在于方便，缺点也在于此–太多的bootstrap定义其实没有用到。
选择器的写法也会缩短css长度。
11.js压缩优化与最佳实践
能压缩的全压缩，jquery, js等。工具比较多jsmin, uglify-js等.
js框架与纯手写js，作者需要自行判断其优劣。
js文件加载的位置同其他老师讲的规则一致。另外，<script async src="....."> <script defter src="....."> 也可以尝试一下，但是两者只对外部引入的script文件有效。
getElementById一般认为是最优的代码形式。
其他的书写形式，比如减少重复获取dom元素的，保存length，等。
DOM的重置问题：js可以操作DOM元素，这里有两种情况–repaint 与 reflow。前者修改DOM元素后不会影响到元素的布局（opacity， visibility, background, text color, border colr），而后者会(display mode, position, width, height, margin, padding, font property, text property, DOM删除与添加)。两者都会影响运行效率。比如，append一个元素需要把append放在最后，而非先append再修改;或者visible放在最后。
而对于event的优化，timer是个方法，但是event的优化结果难以通过工具进行衡量。
最佳实践：用local变量，用简单的数据类型，避免for-in循环，尽早结束循环，使用workers
12.服务器端优化
Nginx >>> Apache
Gzip压缩–效果明显，能压缩到70%
配置好服务器端的缓存
服务器，比如Apache的expires header设置缓存期限
Cookie优化：Cookie本事是占用一定的空间的。因为cookie对于js， css等不起作用，而对于一些链接状态的动态网页起作用，因此，对于静态网页单独设置一个domain。这样区隔开来就避免静态网页部分多次请求cookie造成空间浪费。比如，<img src="dynamic.domain.com">改成<img src="static.domain.com">。国外比较常见的一个做法是放在cdn上，是收费的。
13.找个好的ISP
可靠的网络服务提供商很重要。
14.Preload以及Defer
先加载字体,而且必须是preload， 例子如下：
<link herf="/fonts/myfont.woff" rel="preload" as="font" type="font/mywoff" crossorigin="anoymous">
图片也支持prefetch,但是也注意浏览器兼容性的问题
<link herf="/img/myimg.jpg" rel="prefetch">
Deferring JS 文件
其设计思路在于把不需要的先推一推，让后由js的windows功能进行加载。
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
15.WordPress优化
少用plugin，设置好cache，定期清理数据库（或者用插件控制数据库）