优化页面打开速度（一）

最新推荐文章于 2024-08-12 13:16:33 发布

MosumLucifer

最新推荐文章于 2024-08-12 13:16:33 发布

阅读量1.2k

点赞数

分类专栏： CSS javascript HTML

本文链接：https://blog.csdn.net/YPJMFC/article/details/90348188

版权

javascript 同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

CSS

12 篇文章 1 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

前言

我们经常使用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>