前端优化 之 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更改了,发布服务器以后用户往往无法通过浏览器访问到最新的类容,需要用户主动去刷新页面, 因为一直做企 ...
随机推荐
- 蔚来杯2022牛客暑期多校训练营2 GJK
比赛链接 G 题解 知识点:思维. \(lds(p)\) 表示最小上升子序列分划数 (Dilworth 定理) \(lis(p)\cdot lds(p) \geq n \Rightarrow max ...
- NC24870 [USACO 2009 Dec G]Video Game Troubles
题目链接 题目 题目描述 Farmer John's cows love their video games! FJ noticed that after playing these games th ...
- sensitive-word-admin 敏感词控台 v1.2.0 版本开源
开源目的 丰富 sensitive-word 的生态. 提供最基本的操作例子,便于在此基础上丰富实现自己的敏感词控台. 避免重复开发的成本,让更多的精力专注于业务. 拓展阅读 sensitive-wo ...
- 【Unity3D】UI Toolkit简介
1 前言 UI Toolkit 是一种基于 Web 技术的 GUI 框架,是为了解决 UGUI 效率问题而设计的新一代 UI 系统(UGUI 的介绍详见→UGUI概述).与 UGUI 不同,UI ...
- Shiro实战2-Springboot集成Shiro实战
说明 最近打算打造一个简易的权限管理系统,打算用shiro做认证和授权.本篇作为springboot集成shiro的入门实战案例记录下来,希望也可以帮到大家,代码整理自网络. 技术栈 springbo ...
- 微信小程序生态13-微信公众号自定义菜单配置
序 微信公众号分为订阅号和服务号两种,虽然二者很大的不同,但是这两种公众号的底部却是差不多的:都有菜单栏,而且这些底部菜单也都是自定义配置的. 如CSDN的官方公众号的底部就有精彩栏目.新程序员.CS ...
- SpringBoot整合Swagger2实现接口文档
展示一下 访问方式一 访问地址:http://localhost:8080/swagger-ui.html#/ 首页 详情页 访问方式二 访问地址:http://localhost:8080/doc. ...
- Python中 r'', b'', u'', f'' 的含义
python中 r'', b'', u'', f'' 的含义 r/R:非转义的原始字符串 与普通字符相比,其他相对特殊的字符,其中可能包含转义字符,即那些,反斜杠加上对应字母,表示对应的特殊含义的 ...
- 删除node_modules文件夹cmd指令 - 20201015
方法 方法一: rm -rf /node_modules cmd原生命令.只要支持cmd就可以使用. 方法二: rmdir /s/q your_app_dir 原生node方法,redir为node删 ...
- ASP.NET Core MVC应用模型的构建[1]: 应用的蓝图
我个人觉得这是ASP.NET Core MVC框架体系最核心的部分.原因很简单,MVC框架建立在ASP.NET Core路由终结点上,它最终的目的就是将每个Action方法映射为一个或者多个路由终结点 ...