前言
我们经常使用dom渲染的时间和整个页面的load时间来衡量一个页面打开的快不快，下面主要总结一下最近使用的一些可以打开页面优化速度的方式。
优化方法
傻瓜式优化
优化的操作都很简单就可以取得比较明显的效果，是进行页面优化切入的首选方式。
1.DNS预读取
使用DNS预读取的方式在后代并行地进行DNS的解析，可以防止浏览器耗费时间去解析DNS从而影响页面DOM的渲染，一个稍微复杂的页面通常要进行多个域名的加载，省去解析DNS的时间是很有效果的。
<link rel="dns-prefetch" href="https://www.google.com">
<link rel="dns-prefetch" href="https://www.baidu.com">
2.图片的压缩
那些杀千刀的设计和产品经理经常会忘记给图片做压缩，即使这个页面是官网的首页也经常会忘记压缩，有些不需要这么高质量的图片也做成几百KB，这对整个页面的load时间是极为不利的，也是在数据上优化效果最明显的，根据设计和产品经理的需求对图片做压缩。
另外，相对于普通的baseline jpeg，progressive jpeg可以更快的打开，且浏览器的扫描方式会变成从模糊到清晰，体验上会更好，我试过用magick这个软件去转化，当时photoshop也可以，但是生成的图片有时候要比原始jpeg大很多。
3.HTML优化
在高效前端上看到如果把一个页面html的行前缩进全部去掉，页面的体积可以减少1/3。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
4.gzip
跟后端商量一下，在服务器端配置某些资源文件使用gzip进行压缩，会达到非常大的效果，一般一个几十KB的js文件会被压缩到只有几KB，还是很明显的。
5.优化css和js资源引入的位置
所有放在head标签里的CSS和JS都会堵塞渲染！！！
所以一定要慎重的使用这类资源文件的引入，script尽量放到body中加载，css考虑优化，减少base64的使用，开启gzip。
还有一些较为复杂的进阶优化放到下次再记录吧，其实目前只搞了这些，哈哈哈。
821
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
