正文

前端加载技术

HelloHello233  HelloHello233  2022-09-22  424

关键词：

参考

前端性能优化之加载技术

　　关于Preload, 你应该知道些什么？

　　Preload，Prefetch 和它们在 Chrome 之中的优先级

对以下文章的补充

　　简单汇总了一下web的优化方案

　　关于页面加载

图片处理

　　预加载，在onload之后动态插入img标签，使浏览器提前缓存该图片

　　懒加载，使用onload之后手动设置src，src的值存放在标签的某个属性上即可（如data-x-src），实现策略：滚动监听、节流函数、手动设置src值

模块处理：

　　webpack code split

dns预解析

当浏览器真正请求该域中的某个资源时，DNS 的解析就已经完成了

<link rel="dns-prefetch" href="//example.com">

tcp预连接

预先建立 socket 连接，从而消除昂贵的 DNS 查找、TCP 握手和 TLS 往返开销

<link rel="preconnect" href="http://example.com">

资源预获取

优先级低，那就意味着浏览器空闲的时候才会对资源进行获取（但也可能不获取，即被浏览器忽略），可轻松绕过性能瓶颈。下载的资源一般用于将来的页面，而不是当前页面

<link rel="prefetch" href="image.png">

预渲染

会预处理这个页面中所有的资源，慎重使用；确保用户会访问这个链接，才去预渲染，否则可能浪费较多资源（高流量、高cpu）。

<link rel="prerender" href="http://example.com">

应用场景：用户精确搜索出一个结果，那可以预渲染这个页面链接；阅读中，预渲染下一个页面的内容。

prefetch

　　告诉浏览器加载下一页面可能会用到的资源，因为资源是作用于下一个页面，所以优先级很低

preload

　　加载的资源作用于当前页面。浏览器可以正确指定优先级，即preload不会影响当前页面重要资源的下载；和prefetch不同的是，prefetch可能会被浏览器忽略，但浏览器必定会响应preload

　　有as属性，常用的值有：script、style、image、media、document。忽略as属性的话，preload等同于xhr请求，优先级较低

　　资源都是异步下载，不会阻碍window.onload的触发，拥有自己的onload事件（至少对于chrome，prefetch没有onload事件）。注意：script async会阻塞onload

应用场景

　　加载字体。因为字体对界面很重要，而且埋在css中，不知道对应的选择器什么时候才会作用到dom节点上，这时候预先加载字体可以提升速度和用户体验（crossorigin 是必须的即使资源没有跨域）

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

　　加载资源但不执行。

<link rel="preload" href="late_discovered_thing.js" as="script">

脚本化操作

var preload = document.createElement("link");
link.href = "myscript.js";
link.rel = "preload";
link.as = "script";
document.head.appendChild(link);

  加载后马上执行

<link rel="preload" as="style" href="async_style.css" onload="this.rel='stylesheet'">

对于js

<link rel="preload" as="script" href="async_script.js"
onload="var script = document.createElement('script');
        script.src = this.href;
        document.body.appendChild(script);">

prefetch用于加载其他页面可能要用到的资源，而preload用于加载这个页面将要用到的资源

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Faster</title>
  <link rel="dns-prefetch" href="//cdn.com/">
  <link rel="preload" href="//js.cdn.com/currentPage-part1.js" as="script">
  <link rel="preload" href="//js.cdn.com/currentPage-part2.js" as="script">
  <link rel="preload" href="//js.cdn.com/currentPage-part3.js" as="script">

  <link rel="prefetch" href="//js.cdn.com/prefetch.js">
</head>
<body>
　　<script type="text/javascript" src="//js.cdn.com/currentPage-part1.js" defer></script>
　　<script type="text/javascript" src="//js.cdn.com/currentPage-part2.js" defer></script>
　　<script type="text/javascript" src="//js.cdn.com/currentPage-part3.js" defer></script>
</body>
</html>

　　响应式的加载

<link rel="preload" as="image" href="map.png" media="(max-width: 600px)">
<link rel="preload" as="script" href="map.js" media="(min-width: 601px)">

`检查浏览器是否支持preload`

参考：https://github.com/w3c/preload/issues/7

var DOMTokenListSupports = function(tokenList, token) {
  if (!tokenList || !tokenList.supports) {
    return;
  }
  try {
    return tokenList.supports(token);
  } catch (e) {
    if (e instanceof TypeError) {
      console.log("The DOMTokenList doesn't have a supported tokens list");
    } else {
      console.error("That shouldn't have happened");
    }
  }
};
var linkSupportsPreload = DOMTokenListSupports(document.createElement("link").relList, "preload");
if (!linkSupportsPreload) {
  // Dynamically load the things that relied on preload.
}

终极完美的结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Faster</title>
  <link rel="dns-prefetch" href="//cdn.cn/">

  <!--预加载当前页面的资源-->
  <link rel="preload" href="//cdn.cn/webfont.woff2" as="font">
  <link rel="preload" href="//cdn.cn/Page1-A.js" as="script">
  <link rel="preload" href="//cdn.cn/Page1-B.js" as="script">
 
  <!--预加载其他页面的js-->
  <link rel="prefetch" href="//cdn.cn/Page2.js">
  <link rel="prefetch" href="//cdn.cn/Page3.js">
  <link rel="prefetch" href="//cdn.cn/Page4.js">

  <style type="text/css">
    /* 首页用到的CSS内联 ，这里用到字体*/
  </style>
</head>
<body>
<script type="text/javascript" src="//cdn.cn/Page1-A.js" defer></script>
<script type="text/javascript" src="//cdn.cn/Page1-B.js" defer></script>
</body>
</html>

。

前端优化-图片懒加载

一、什么是懒加载　　懒加载技术(简称lazyload)是对网页性能优化的一种方案。lazyload的核心是按需加载，避免网页打开时加载过多资源，让用户等待太久，在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在... 查看详情

前端技术--懒加载

有利于优化前端页面因瀑布页面图片多而导致的页面加载时间长，加载慢的问题。原理设置个data-src(自定义一个属性)来存放真实地址当滚动页面时，检查所有的img标签，看是否出现在视野中，如果已经出现在了视野中，那继续... 查看详情

前端懒加载以及预加载

...个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。1.懒加载：意义：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。实现方式：1.第... 查看详情

前端相关的网站优化

图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张... 查看详情

前端通用框架可行性研究报告之弹窗

...用户体验，降低移动端的资源使用率。在业务和样式上，前端开发人员只需要在JS代码块头部引用需要的js库和css样式即可。在逻辑上，开发人员只需调用后端提供的接口进行读取与显示。这种技术的主要优点包括查看详情

#yyds干货盘点#前端图片预加载

上一篇文章讲了图片懒加载的两种方法，今天再来讲讲图片预加载。用css和JavaScript实现预加载实现预加载图片有很多方法，包括使用css、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案，十分高... 查看详情

前端页面加载进度条的制作

参考技术A我们在前端页面开发过程中，经常会遇到图片，音频，视频等加载慢问题。这样对用户体验来说体验是很不好的。因此我们可以在页面加载时用一个加载动效来表示，当加载完成的时候，再来显示内容。推荐一个制作... 查看详情

前端页面卡顿加载慢是怎么回事

参考技术A很常见，那是因为你填充的比例太小，填充密度太高，尤其是大面积的填充，如果太密就会很卡所以填充的时候，在你不了解该图案的填充比例的时候，填充后要先点预览，看看疏密，调节合适的填充比例，不要直接... 查看详情

那些h5用到的技术——素材加载

...ker颜色选择器ConvertToUTF8转码GBKSupport支持GBKHTML-CSS-JSPrettify前端代码格式化SublimeCodeIntel最好用的自动补全Chrome5 查看详情

前端面试，备考第17天——怎么对项目做性能优化：图片优化|cdn|懒加载|回流重绘|动画

⭐️本文首发自前端修罗场(点击加入社区)，是一个由资深开发者独立运行的专业技术社区，我专注Web技术、答疑解惑、面试辅导以及职业发展。。查看详情

微前端——乾坤qiankundemo

参考技术A微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆，拆完后在合！我们可以将一个应用划分成若干个子应用，将子应用打包成一个个的lib。当路径切换时... 查看详情

前端优化之图片预加载和懒加载(代码片段)

欢迎学习交流！！！持续更新中…文章目录预加载什么是预加载为什么要用预加载预加载的实现懒加载什么是懒加载为什么要用懒加载懒加载的实现懒加载优化预加载和懒加载的比较预加载什么是预加载资源... 查看详情

前端性能优化的三大类处理方式

1. 减少 HTTP 的请求次数和传输报文的大小-CSS SPRITE（雪碧图、图片精灵）技术 - 使用字体图标（ICON FONT）或者 SVG 等矢量图；可以减少 HTTP 请求次数或者减少请求内容的大小，使图片... 查看详情

微前端架构的业务价值：实现独立部署快速迭代和按需加载

...为了更好地适应快速变化的市场和业务需求，微服务和微前端架构成为了近年来的热门话题。其中，微前端架构作为前端开发的新兴架构模式，不仅可以提高开发效率、迭代速度和用户体验，还可以提高团队的协作效率和代码复... 查看详情

web前端个人工作总结

参考技术Aweb前端个人工作总结　　工作需要不断总结，只有这样才能有所进步。下面是我整理的web前端个人工作总结，欢迎阅读！　　web前端个人工作总结1　　从入职到现在，我在XXX导师的指导下走上了前端之路。在这段时间... 查看详情

06-前端开发框架vue技术应用总结(代码片段)

文章目录VUE基础MVVM设计VUE绑定原理设计虚拟DOM树分析VUE编程步骤实践绑定与指令应用绑定样式分析(了解):计算属性应用实践生命周期函数应用Axios方式的Ajax请求Get请求Post请求VUE组件化开发组件设计基本步骤运行分析组件类型组... 查看详情

前端网站常规优化方案

参考技术A1、减少请求次数2、减小资源大小3、提高响应和加载速度4、优化资源加载时机5、优化加载方式1、合并、压缩、混淆html/css/js文件（webpack实现，减小资源大小）2、Nginx开启Gzip，进一步压缩资源（减小资源大小）3、图片... 查看详情

proantdesign使用analyze优化前端首次加载时间

...; 之前使用ProAntDesign（react）脚手架做了个web前端项目，在打包发布的时候，发现打包后静态文件太大了，首次加载需要16秒中的时间。在ProAntDesign官网找到了npmrunanalyze指令分析打包文件的大小，根据analyze的分... 查看详情