美文网首页
前端性能优化

前端性能优化

作者: my沙漠玫瑰 | 来源:发表于2019-03-01 17:02 被阅读0次

1.DNS预解析

通过 DNS 预解析来告诉浏览器未来我们可能从某个特定的 URL 获取资源,图片或音频资源等

<meta http-equiv="x-dns-prefetch-control" content="on">

<link rel="dns-prefetch" href=" http://www.example.com 填入预解析的网址">

2.预加载静态资源prefetch

<link rel="prefetch prerender" href="http://www.example.com/style.css"><!--加载静态的资源-->

3.预连接 Preconnect

使用 preconnect 告诉浏览器我们需要进行哪些网站的预连接,减少DNS开销,预先建立socket连接

<link rel="preconnect" href="http://example.com">

4.预获取 Prefetching 

如果我们确定某个资源将来一定会被使用到,我们可以让浏览器预先请求该资源并放入浏览器缓存中。例如,一个图片和脚本或任何可以被浏览器缓存的资源:

<link rel="prefetch" href="image.png"> 低优先级的资源预加载

Subresources

这是另一个预获取方式,这种方式指定的预获取资源具有最高的优先级,在所有 prefetch 项之前进行:例如字体文件

<link rel="subresource" href="styles.css">

如果资源是当前页面必须的,或者资源需要尽快可用,那么最好使用 subresource 而不是 prefetch

5.预渲染 Prerender

这是一个核武器,因为 prerender 可以预先加载文档的所有资源:

<link rel="prerender" href="http://example.com">

关于性能优化

1、http://www.w3cdream.com/content-sort-21-article-578.html

2、http://ddtalk.github.io/blog/2015/09/07/dingding-first/

3、https://csspod.com/frontend-performance-best-practices/

4、http://dev.cmcm.com/archives/312

注:本文转载自胡方运的博客 https://hufangyun.com/2016/fe-performance

记录学习使用,如有冒犯请谅解

相关文章

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • 前端面试必问及加分点---性能优化篇

    如何进行网站性能优化 你有用过哪些前端性能优化的方法? 谈谈性能优化问题 代码层面的优化 前端性能优化最佳实践

  • 前端性能优化

    对于前端的性能优化,主要有分为加载优化和性能优化。在Google官方文档中,给出了性能优化有哪些好处。前端优化的最...

  • 常用的后端性能优化六种方式:缓存化+服务化+异步化等

    性能优化专题 前端性能优化 数据库性能优化 jvm和多线程优化 架构层面优化 缓存性能优化 常用的后端性能优化六大...

  • 关于前端性能优化问题详解

    关于前端性能优化问题详解 出处:http://segmentfault.com/blogs 前端性能优化指南 AJ...

  • 前端性能优化

    前端性能优化 下面是我认知的前端性能优化的策略,本书主要着手 JavaScript 优化展开阐述。 JavaScr...

  • 2019-10-22

    2018 前端性能优化清单

  • 2020-04-11

    前端工程化相关 前端动画相关 优化前端性能

网友评论

      本文标题:前端性能优化

      本文链接:https://www.haomeiwen.com/subject/fkyduqtx.html