为了优化我们公司网站的性能，我最近引入了浏览器预加载技术（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的更多相关文章

  1. 【转】yahoo前端优化军规

    雅虎给出了前端优化的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). Minimize HTTP Requests 减少http请求 图片.css ...

  2. [转] Web前端优化之 内容篇

    原文网址: http://lunax.info/archives/3090.html Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献. ...

  3. Web 性能优化：Preload与Prefetch的使用及在 Chrome 中的优先级

    摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所 ...

  4. 【前端优化之渲染优化】大屏android手机动画丢帧的背后

    前言 上周我与阿里的宇果有一次技术的交流,然后对天猫H5站点做了一些浅层次的分析,后面点时间基本天天都会有联系,中途聊了一些技术细节.聊了双方团队在干什么,最后聊到了前端优化.因为我本身参与了几次携程 ...

  5. 【前端优化之拆分CSS】前端三剑客的分分合合

    几年前,我们这样写前端代码: <div id="el" style="......" onclick="......">测试&l ...

  6. 关于大型网站技术演进的思考（二十一）--网站静态化处理—web前端优化—下【终篇】（13）

    本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别 ...

  7. 关于大型网站技术演进的思考（二十）--网站静态化处理—web前端优化—中（12）

    Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...

  8. 关于大型网站技术演进的思考（十九）--网站静态化处理—web前端优化—上（11）

    网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属 ...

  9. 【webapp的优化整理】要做移动前端优化的朋友进来看看吧

    单页or多页 本文仅代表个人观点,不足请见谅,欢迎赐教. webapp 小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,weba ...

  10. nginx,控浏览器缓存,前端优化方案

    1,困惑 做web项目,对于开发者来说,一个最头痛的问题就是浏览器缓存,有缓存,js更改了,html更改了,发布服务器以后用户往往无法通过浏览器访问到最新的类容,需要用户主动去刷新页面, 因为一直做企 ...

随机推荐

  1. sensitive-word 敏感词/脏词开源工具-v.0.10.0-脏词分类标签支持

    sensitive-word sensitive-word 基于 DFA 算法实现的高性能敏感词工具. 创作目的 实现一款好用敏感词工具. 基于 DFA 算法实现,目前敏感词库内容收录 6W+(源文件 ...

  2. 【Unity3D】Transform组件

    1 前言 ​ 每个游戏对象有且仅有一个 Transform 组件,Transform 组件保存了游戏对象的位置信息,用户可以通过操作 Transform 组件实现对游戏对象的平移.旋转.缩放等变换.每 ...

  3. Js将字符串转数字的方式

    Js将字符串转数字的方式 Js字符串转换数字方方式主要有三类:转换函数.强制类型转换.弱类型隐式类型转换,利用这三类转换的方式可以有5种转换的方法. parseInt() parseInt()和Num ...

  4. Spring Boot学生信息管理系统项目实战-1.项目介绍

    1.获取源码 需要源码的朋友,请捐赠任意金额后留下邮箱发送:) 2.项目背景 刚开始自己帮教师朋友写的,核心是学生信息的导入导出功能.后来又扩展了几个模块. 水平一般能力有限,觉着有用的朋友可以拿去自 ...

  5. springboot自动配置原理以及spring.factories文件的作用详解

    一.springboot 自动配置原理 先说说我们自己的应用程序中Bean加入容器的办法: package com.ynunicom.dc.dingdingcontractapp; import co ...

  6. 硬件开发笔记（二）：硬件开发基本流程，制作一个USB转RS232的模块（一）：开发基本过程和元器件选型

    前言   做个usb转串口,同时兼容ttl,讲述硬件模块基础的开发流程,本篇描述了全流程过程,然后选型了合适的元器件.   基本流程   以下是笔者个人从事过相关硬件研发,总结出来的流程,仅代表个人意 ...

  7. python Apscheduler持久化

    from pytz import utc from apscheduler.schedulers.background import BackgroundScheduler from apschedu ...

  8. yolo7检测学习Bubbliiiing的视频有感——（1）no model named 'cv2'

    我一直以来也是喜欢用vscode,就跟随B导安装了vscode 下载完B导提供的代码后如果想直接跟着视频B导的操作运行predict.py文件是不可能的,需要按照readme文档中的所有提示按照步骤放 ...

  9. Java 对象数组题目 + 改进（封装方法）

    1 /** 2 * 3 * @Description 4 * @author Bytezero·zhenglei! Email:420498246@qq.com 5 * @version 6 * @d ...

  10. Sermant运行流程学习笔记，速来抄作业

    本文分享自华为云社区<Sermant 的整体流程学习梳理>,作者:用友汽车信息科技(上海)有限公司 刘亚洲 Java研发工程师. 一.sermant架构 Sermant整体架构包括Serm ...