前端优化 之 preload
为了优化我们公司网站的性能，我最近引入了浏览器预加载技术（Preload）。
这项技术可以显著减少级联情况，提高资源加载的并行度，从而加速网站的加载速度。
Preload的原理
Preload的原理是在浏览器解析HTML文档时，提前加载页面所需的关键资源，如样式表、脚本文件和字体等。
通过预加载这些关键资源，浏览器能够在页面加载时更快地获取所需资源，从而加速页面的渲染过程。下面是一个简单的预加载示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optimized Website with Preload</title> <!-- Preload CSS -->
<link rel="preload" href="styles.css" as="style"> <!-- Preload JavaScript -->
<link rel="preload" href="script.js" as="script"> <!-- Preload font -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2"> <!-- Normal CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Content of the webpage --> <!-- Normal JavaScript -->
<script src="script.js"></script>
</body>
</html>
crossorigin属性和as属性的可选值
crossorigin属性：该属性用于指定资源的跨域设置。可选值包括：
- anonymous：表示资源会以匿名身份请求，不会包含凭据信息（如 cookies、HTTP 认证等）。通常用于不需要用户身份验证的公共资源。
- use-credentials：表示资源会以凭据身份请求，浏览器会发送包含凭据信息的请求。适用于需要用户身份验证的私有资源。
as属性：该属性用于指定资源的类型。可选值包括：
- audio：音频文件
- document：HTML 文档
- font：字体文件
- image：图像文件
- script：JavaScript 文件
- style：样式表文件
- video：视频文件
- fetch：其他类型的网络请求
正确属性的重要性
如果设置错误的crossorigin和as属性，将导致预加载失效。
例如，如果预加载的资源是跨域的而没有设置正确的crossorigin，浏览器可能会拒绝加载该资源。
同样，如果as属性设置错误，告诉浏览器预加载的资源类型与实际类型不符，也会导致预加载失效。
效果
下面是优化前后的对比，可以看到优化后的并行度提升了很多
前端优化 之 preload的更多相关文章
- 【转】yahoo前端优化军规
雅虎给出了前端优化的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). Minimize HTTP Requests 减少http请求 图片.css ...
- [转] Web前端优化之 内容篇
原文网址: http://lunax.info/archives/3090.html Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献. ...
- Web 性能优化：Preload与Prefetch的使用及在 Chrome 中的优先级
摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所 ...
- 【前端优化之渲染优化】大屏android手机动画丢帧的背后
前言 上周我与阿里的宇果有一次技术的交流,然后对天猫H5站点做了一些浅层次的分析,后面点时间基本天天都会有联系,中途聊了一些技术细节.聊了双方团队在干什么,最后聊到了前端优化.因为我本身参与了几次携程 ...
- 【前端优化之拆分CSS】前端三剑客的分分合合
几年前,我们这样写前端代码: <div id="el" style="......" onclick="......">测试&l ...
- 关于大型网站技术演进的思考（二十一）--网站静态化处理—web前端优化—下【终篇】（13）
本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别 ...
- 关于大型网站技术演进的思考（二十）--网站静态化处理—web前端优化—中（12）
Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...
- 关于大型网站技术演进的思考（十九）--网站静态化处理—web前端优化—上（11）
网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属 ...
- 【webapp的优化整理】要做移动前端优化的朋友进来看看吧
单页or多页 本文仅代表个人观点,不足请见谅,欢迎赐教. webapp 小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,weba ...
- nginx,控浏览器缓存,前端优化方案
1,困惑 做web项目,对于开发者来说,一个最头痛的问题就是浏览器缓存,有缓存,js更改了,html更改了,发布服务器以后用户往往无法通过浏览器访问到最新的类容,需要用户主动去刷新页面, 因为一直做企 ...
随机推荐
- UVA11573 Ocean Currents
题目链接 题目 见链接. 题解 知识点:BFS. 这道题显然用BFS,但发现洋流方向会破坏时间的有序性,但注意到洋流时间花费是 \(0\) ,因此只需要用双端队列即可,洋流方向扩展直接放队头,其他方向 ...
- 金融机构的反洗钱(AML)合规工作和系统建设
声明 个人原创, 转载需注明来源 https://www.cnblogs.com/milton/p/16252061.html 反洗钱 AML 从国家机器的角度, 集体非法活动, 无论是金融还是非金融 ...
- 【Unity3D】异步Socket通讯
1 前言 同步 Socket 通讯 中的 Accept.Connect.Receive 等方法会阻塞当前线程,当前线程必须等待这些方法执行完,才会继续往下执行,用户需要另开线程执行这些耗时方法,否 ...
- ffmpeg之avformat_alloc_output_context2
函数原型: int avformat_alloc_output_context2(AVFormatContext **ctx, const AVOutputFormat *oformat, const ...
- Java集合框架学习（十三） Collections类详解
Collections类介绍 这个类操作或返回集合的专有静态方法. 它包含多态算法,利用wrappers(封装器)返回指定集合类型的新集合,以及其他一些零散功能. 如果该类的方法引用的集合或类对象为n ...
- flutter打包android的一些配置修改（解决白屏，视频闪退）
1.打包后视频播放闪退 视频播放器选择了flutter_tencentplayer(https://github.com/qq326646683/flutter_tencentplayer) 解决:不 ...
- pycharm中自定义函数补全
在 PyCharm 中,你可以通过以下步骤实现这一目标: 打开 PyCharm,点击顶部菜单的 "File"(文件) -> "Settings"(设置). ...
- 【转载】大数据OLAP系统--开源组件方案对比
开源大数据OLAP组件,可以分为MOLAP和ROLAP两类.ROLAP中又可细分为MPP数据库和SQL引擎两类.对于SQL引擎又可以再细分为基于MPP架构的SQL引擎和基于通用计算框架的SQL引擎: ...
- Docker的使用记录
开始 这是第一个尝试在Leanote上面编写文章,我觉得最重要的事情就是能够保证md文件是能够移植的,否则如果这个软件不靠谱的话,我还能把文章移动到别的地方去.所以先写一篇文章看看效果如何,方便不方便 ...
- 文心一言 VS 讯飞星火 VS chatgpt （207）-- 算法导论15.4 4题
四.说明如何只使用表 c 中 2*min(m,n) 个表项及O(1)的额外空间来计算LCS的长度.然后说明如何只用 min(m,n) 个表项及O(1)的额外空间完成相同的工作.要写代码的时候,请用go ...