前端优化之 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更改了,发布服务器以后用户往往无法通过浏览器访问到最新的类容,需要用户主动去刷新页面, 因为一直做企 ...

随机推荐

精通C语言：打造高效便捷的通讯录管理系统
欢迎大家来到贝蒂大讲堂养成好习惯,先赞后看哦~ 所属专栏:C语言项目贝蒂的主页:Betty's blog 引言: 在我们大致学习完C语言之后,我们就可以利用目前所学的知识去做一些有意思的项目,而今 ...
计网学习笔记十 Internet Routing Protocols
上一讲简单介绍了routing和两种最小路径算法的使用,这节课讲了两种算法是如何糅合进协议中来实现具体使用的. 这一讲内容有AS的介绍,以及IGP和BGP协议. Autonomous Systems ...
使用clipboard插件结合layui实现的一键复制按钮
说明之前开发了个基金分析的网页,主要是方便几个朋友买卖基金做个参考.这里面基金代码是存储在浏览器cookie中的,也就是说假如我换了浏览器就没法查了,最方便的就是一键复制代码粘贴到另外一个浏览器中一 ...
less变量书写及样式混入
定义变量定义混入样式变量及混入样式使用样式文件中 ~@代表src
基于java的图书管理系统
基于java的图书管理系统项目概述使用数组存储数据实现一个图书管理系统,完成的功能有增加图书.删除图书.更新图书.查询图书.图书列表.增删改查登陆注册首页图书更新图书列表开发工具/技术 ...
开源软件CVE_Search的配置与使用（详细）
目录项目介绍环境配置初始化cve_search 使用cve_search 简介 CVE: https://baike.baidu.com/item/CVE/9483464?fr=aladdin ...
CXP2.0的相机是否可以使用CXP1.1的Grabber
可以答案是肯定的. 目前CXP共有2个发布版本: 2011年发布CXP1.1 2021年发布CXP2.1,向后兼容,新标准增加了同步功能.数据率放大了一倍. 只要是符合CXP标准.接插件匹配,那么C ...
【Azure Function】Azure Function中使用 Java 8 的安全性问题
问题描述使用Azure Function, 环境是Linux的Java8.目前 Oracle Java JDK8,11,17 和 OpenJDK 8/11/17 都在存在漏洞受影响版本的范围内. O ...
【Azure 媒体服务】在Azure Media Service门户中使用HLS模式传输视频流，播放视频步骤
问题描述如何在Azure Media Service门户中使用HLS模式传输视频流,播放视频步骤问题解决第一步:在 Media Service 这边点击资产.上传本地视频资源作为Media Se ...
深入解析ASP.NET Core MVC应用的模块化设计[上篇]
ASP.NET Core MVC的"模块化"设计使我们可以构成应用的基本单元Controller定义在任意的模块(程序集)中,并在运行时动态加载和卸载.这种为"飞行中的飞 ...

前端优化 之 preload