抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。

以下是正文。

前言

提升页面性能优化的方法有哪些：

  • 1、资源压缩合并，减少http请求

  • 2、非核心代码异步加载 –> 异步加载的方式 –> 异步加载的区别

如果回答出非核心代码异步加载，就会层层深入。

  • 3、利用浏览器缓存 –> 缓存的分类 –> 缓存的原理

缓存是所有性能优化的方式中最重要的一步，这个一定要答好。【重要】

有的人可能会回答local storage 和session storage，其实不是这个。浏览器缓存和存储不是一回事。

  • 4、使用CDN

浏览器第一次打开页面时，缓存是起不了作用的。CDN这一条，一定要说出来。

  • 5、DNS预解析

一、资源压缩合并，减少http请求

  • 合并图片（css sprites）、CSS和JS文件合并、CSS和JS文件压缩

  • 图片较多的页面也可以使用 lazyLoad 等技术进行优化。

  • 精灵图等

二、非核心代码异步加载

异步加载的方式：（这里不说框架，只说原理）

  • 动态脚本加载

  • defer

  • async

动态脚本加载

使用document.createElement创建一个script标签，即document.createElement('script')，然后把这个标签加载到body上面去。

参考链接：

defer

通过异步的方式加载defer1.js文件：

1
<script src="./defer1.js" defer></script>

async

HTmL5新增特性。

通过异步的方式加载async1.js文件：

1
<script src="./async1.js" async></script>

defer和async的区别

  • defer：在HTML解析完之后才会执行。如果是多个，则按照加载的顺序依次执行。

  • async：在加载完之后立即执行。如果是多个，执行顺序和加载顺序无关。

代码举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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<