-
提升页面性能的方法有哪些?
资源压缩合并,减少 HTTP 请求
-
非核心代码异步加载
- 异步加载的方式
- 动态脚本的加载(通过document.create一个script标签,然后再添加到body中去)
- defer
- async
- 异步加载的区别
- defer 是在html文档加载完毕后执行,如果是多个js,则按照加载的顺序依次执行
- async 是在加载完成后立即执行,如果是多个js,加载和执行的顺序不是依次进行
- 异步加载的方式
-
利用浏览器缓存(最重要)
- 缓存的分类
- 强缓存 问都不问服务器,直接拿过来就用了,强制缓存
- Expires (http响应头上): Expires:Tue, 12 Jun 2018 08:30:15 GMT 这是一个绝对时间
- Cache-Control: Cache-Control:max-age=31536000 这是一个相对时间,在这个时间内我不会再向服务器去请求资源,都会在浏览器直接拿缓存
- 总之就是在这个时间之前,我不会和服务器通信了,直接从副本中拿出来给页面用
- 如果这两个时间都下发了以后者为准
- 协商缓存 浏览器发现本地有这个副本,但我又不确定用不用它,那怎么办啊,我得向服务器问一下它,这个文件要不要用
- Last-Modified if Modified Sence : Last-Modified Wed, 25 Nov 2015 07:48:07 GMT 上次修改的时间
- ETag If-None-Match: ETag:"AFxUj3Ewv5-31T_T8ldpjkSkJy8D" 哈希值 当过了强缓存的时间,浏览器再向服务器请求问它这个资源我可不可以再用,就需要 If-None-Match了
- 强缓存 问都不问服务器,直接拿过来就用了,强制缓存
- 缓存的原理
- 缓存的分类
使用CDN
-
预解析DNS
<meta http-equiv="x-dns-prefetch-control" content="on" /> <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
4-3 页面性能
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 连续同步执行的危险 一旦遇到这样的问题,这里还有更多内容,然后发现了 一个适当恶劣的解决方法。这篇文章没有列在索引...