前端页面性能优化的几种方式(强烈推荐)

有的人可能会回答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上面去。

参考链接：

javascript 异步加载

defer

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

async

HTmL5新增特性。

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

defer和async的区别

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

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

代码举例：

Document 上方打印的结果是：

同步任务

defer1

defer2

因为defer的加载是有顺序的，所以两个