前端优化 之 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更改了,发布服务器以后用户往往无法通过浏览器访问到最新的类容,需要用户主动去刷新页面, 因为一直做企 ...
随机推荐
- 二进制安装Kubernetes（k8s） v1.27.3 IPv4/IPv6双栈 可脱离互联网
二进制安装Kubernetes(k8s) v1.27.3 IPv4/IPv6双栈 可脱离互联网 https://github.com/cby-chen/Kubernetes 开源不易,帮忙点个star ...
- Python 中isinstance的用法
isinstance()函数用来判断一个对象是否是一个已知的类型.isinstance(object, classinfo) 类似 type().isinstance() 与 type() 区别: t ...
- 【leetcode】合并 k 个有序链表，我给了面试官这 5 种解法
开胃菜 在进入本节的正题之前,我们先来看一道开胃菜. 题目 21. 合并两个有序链表 将两个升序链表合并为一个新的 升序 链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1 ...
- Android自动化测试框架uiautomator2详解
1 uiautomator2 简介 uiautomator2 是 一种 Android 自动化测试框架,提供了点击.长按.输入文本.滑动.拖拽.截屏等方法,能够模拟用户的各种动作.用户可以通过控件 ...
- HTMLElement对象
HTMLElement对象 任何HTML元素都继承于HTMLElement对象,一些元素直接实现这个接口,而另一些元素通过多层继承来实现它. 属性 从其父元素Element继承属性,并从Documen ...
- C++ 线程的学习---线程同步
因为是学习篇,写下是为了个人的学习与理解.故参考其他文章为多. 为什么需要线程同步? 在程序中使用多线程时,一般很少有多个线程能在其生命期内进行完全独立的操作.更多的情况是一些线程进行某些处理操作,而 ...
- maketrans和translate按规则一次性替换多个字符，用来替代replace
str_ = 'i love you' compiler_ = str_.maketrans('i l y', 'I L Y') print(str_.translate(compiler_))
- 解析Spring中的循环依赖问题：初探三级缓存
什么是循环依赖? 这个情况很简单,即A对象依赖B对象,同时B对象也依赖A对象,让我们来简单看一下. // A依赖了B class A{ public B b; } // B依赖了A class B{ ...
- python如何多版本共存
1. 先正常安装多个python版本,比如我电脑里面是安装的3.10以及3.12 2. 安装的时候建议不要选择系统盘,可以用两个目录安装,例如: d:\py310\... d:\py312\... 3 ...
- 第135篇:Three.js基础入门
好家伙,这东西太帅了,我要学会 先放张帅图(都是用three.js做出来的,这我学习动力直接拉满) 还有另外一个 Junni is... 帧数太高,录不了 开始学习 官方文档 1.Thr ...