好程序员web前端学习路线之异步加载CSS的一些方法

好程序员web前端教程分享异步加载CSS的一些方法，在我们写页面的时候，我们做最主要的任务就是提高页面的性能和弹性加载速度，以不会延迟页面的呈现的形式来加载CSS。这是因为在默认情况下。

- 浏览器会同步加载外部的CSS

- 在下载和解析CSS时会影响所有页面呈现

这两种情况都会导致潜在的延迟。

当然，这也是在开始渲染页面之前，应该至少加载网站的CSS的一部分，并且为了立即将该初始CSS添加到浏览器，我们建议内联css。对于整体数量较少的网站，仅此一项就足够了，但如果CSS很大（例如，大于15到20kb），它可以帮助性能按优先级将其拆分。拆分后，应该在后台-aka中加载不太关键的CSS异步。在这篇文章中，我的目的是描述我在这些日子的首选方式，这实际上已存在很长的时间段了。

有几种方法可以异步加载CSS，但没有一种方法可以像您期望的那样直观。与script元素不同，没有async或defer属性可以简单地应用于link元素，因此多年来我们维护了loadCSS项目，使得加载异步CSS的过程更加容易。最近，浏览器已经标准化了它们的CSS加载行为，因此可能不再需要像loadCSS这样的专用脚本来处理它们的微小差异。

今天，我们掌握了浏览器如何处理各种link元素属性的一些知识，我们可以通过一小段HTML来实现异步加载CSS的效果。在这里，它是异步加载样式表的最简单方法：

这行HTML简洁，但它不是很直观，所以让我们分解这里发生的事情。

首先，将link's media属性设置为print。“打印”是一种媒体type，它说“应用此样式表的基于打印的媒体的规则”，换句话说，当用户尝试打印页面时应用它们。不可否认，我们希望我们的样式表适用于所有媒体（尤其是屏幕）而不仅仅是打印，但通过声明与当前环境不匹配的媒体类型，我们可以实现一个有趣且有用的效果：浏览器将加载样式表没有延迟页面渲染，异步！这很有帮助，但并不是我们想要的全部。我们还希望CSS在加载后实际应用于屏幕环境。为此，我们可以使用该onload属性将link媒体设置为all完成加载。

介绍完了老方子，我们再来看看新药方，是的，同样的！在过去一两年中，我们一直在使用link[rel=preload]（而不是rel=stylesheet）来实现与上面类似的模式（分别rel在加载后切换属性而不是media属性）。使用这种方法仍然可以正常工作，但是，使用时需要考虑几个缺点preload。首先，浏览器对于加载的支持依旧不是特别的好因此如果你想依赖它来跨浏览器获取和应用样式表，那么填充（例如一个loadCSS）是必要的。更主要的是，preload尽可能早地获取文件，优先级最高，可能会优先考虑其他重要下载，并且可能比非关键CSS实际需要的优先级更高。

幸运的是，如果你碰巧想要提供的高优先级提取rel=preload（在支持它的浏览器中），你可以将它与上面的模式结合起来。

<linkrel="preload"href="styles/index.css"as="style"onload="this.rel='stylesheet'">

这和之前的方法没什么区别啊！是的确实如此，但是呢，语法上更加好一些。另外就是你仔细点就会发现 as="style"这个属性，所以 preload 不仅仅可以用在 CSS 文件上，而是可以用在绝大多数的资源文件上。

<linkrel="preload"href="styles/index.css"as="script">

我们可以新建一个script标签来指向它：

var script = document.createElement("script");

script.src = "scriptfile.js";

document.body.appendChild(script);

在这个时候浏览器就直接从缓存中拿这个文件了，不会再发请求了，因为此前已经加载好了。

那么 preload 中的 as 属性支持哪些资源文件呢？下面这些都可以

· font

· image

· object

· script

· style

不要想太多，只有谷歌太对它做出完美的支持。

也可以用JavaScript来实现：

$(window).load(function () {

//异步延迟加载样式

var link = $('<link />');

link.attr('href', '/styles/index.css');

link.attr('rel', 'stylesheet');

link.appendTo($('head'));

link.load(function () {

console.info('加载成功...');

});

本内容伪原创文章，转载请注明出处。

Vue 项目开发中，我们总希望能打造出闪电般的网页加载速度，给用户带来极致体验。然而，随着项目规模的增长，JS 文件也越来越臃肿，成为了拖慢网站速度的罪魁祸首。

别担心！今天就来分享 Vue 项目中异步加载 JS 的秘密武器，助你的网站速度一飞冲天！

为什么要异步加载 JS ？

我们知道，浏览器在加载网页时，会按照 HTML 代码的顺序，自上而下依次解析和执行。如果 JS 文件过大，就会阻塞页面的渲染，导致页面出现长时间的白屏，用户体验极差。

异步加载 JS 就是为了解决这个问题！它允许浏览器在不阻塞页面渲染的情况下，并行加载 JS 文件，从而大幅提升网页加载速度！

Vue 中异步加载 JS 的方法

Vue 项目中，我们通常使用 import() 函数来实现 JS 文件的异步加载，配合 async/await 语法，代码简洁优雅！

1. 组件中异步加载：

export default {
  // ...
  methods: {
    async loadMyComponent() {
      try {
        this.MyComponent = (await import('./MyComponent.vue')).default;
      } catch (error) {
        console.error('Failed to load MyComponent:', error);
      }
    }
  },
  mounted() {
    this.loadMyComponent(); 
  }
}

源码解析：

import('./MyComponent.vue') 会返回一个 Promise 对象，表示异步加载组件。
使用 await 关键字等待异步加载完成后，再将加载到的组件赋值给 this.MyComponent 。
使用 try...catch 语句捕获异步加载过程中可能出现的错误。
在 mounted() 生命周期钩子函数中调用 loadMyComponent() 方法，确保组件在渲染完成后再进行加载。

2. 路由懒加载：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue')
  },
  // ...
];

源码解析：

在路由配置中，使用箭头函数将组件的引入包裹起来，实现路由懒加载。
/* webpackChunkName: "home" */ 是 webpack 的魔法注释，用于指定异步加载的代码块名称，方便打包和管理。

总结

异步加载 JS 是提升 Vue 项目性能的利器，掌握它可以让你在开发中更加游刃有余！赶紧试试吧！

#头条创作挑战赛#

于安全和隐私的原因，web 应用程序不能直接访问用户设备上的文件。如果需要读取一个或多个本地文件，可以通过使用input file和FileReader来实现。在这篇文章中，我们将通过一些例子来看看它是如何工作的。

文件操作的流程

获取文件

由于浏览器中的 JS 无法从用户的设备访问本地文件，我们需要为用户提供一种方法来选择一个或多个文件供我们使用。这可以通过文件选择器<input type='fule' />来完成。

<input type="file" id="fileInput">

如果想允选择多个文件，可以添加multiple属性:

<input type="file" id="fileInput" multiple>

我们可以通过change事件来监听文件的选择，也可以添加另一个 UI 元素让用户显式地开始对所选文件的处理。

input file 具有一个files属性，该属性是File对象的列表（可能有多个选择的文件）。

File对象如下所示：

读取文件

读取文件，主要使用的是[FileReader][1]类。

「该对象拥有的属性：」

「FileReader.error」 ：只读，一个DOMException，表示在读取文件时发生的错误。

「FileReader.readyState」：只读表示 FileReader 状态的数字。取值如下：

常量名值描述EMPTY0还没有加载任何数据LOADING1数据正在被加载DONE2已完成全部的读取请求

「FileReader.result」：只读，文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

「该对象拥有的方法：」

readAsText(file, encoding)：以纯文本形式读取文件，读取到的文本保存在result属性中。第二个参数代表编码格式。

readAsDataUrl(file)：读取文件并且将文件以数据URI的形式保存在result属性中。

readAsBinaryString(file)：读取文件并且把文件以字符串保存在result属性中。

readAsArrayBuffer(file)：读取文件并且将一个包含文件内容的ArrayBuffer保存咋result属性中。

FileReader.abort()：中止读取操作。在返回时，readyState属性为DONE。

「文件读取的过程是异步操作，在这个过程中提供了三个事件：progress、error、load事件。」

progress：每隔50ms左右，会触发一次progress事件。

error：在无法读取到文件信息的条件下触发。

load：在成功加载后就会触发。

在下面的示例中，我们将使用readAsText和readAsDataURL方法来显示文本和图像文件的内容。

例一：读取文本文件

为了将文件内容显示为文本，change需要重写一下：

首先，我们要确保有一个可以读取的文件。如果用户取消或以其他方式关闭文件选择对话框而不选择文件，我们就没有什么要读取和退出函数。

然后我们继续创建一个FileReader。reader的工作是异步的，以避免阻塞主线程和 UI 更新，这在读取大文件(如视频)时非常重要。

reader发出一个'load'事件(例如，类似于Image对象)，告诉我们的文件已经读取完毕。

reader将文件内容保存在其result属性中。此属性中的数据取决于我们使用的读取文件的方法。在我们的示例中，我们使用readAsText方法读取文件，因此result将是一个文本字符串。

例二：显示本地选择的图片

如果我们想要显示图像，将文件读取为字符串并不是很有用。FileReader有一个readAsDataURL方法，可以将文件读入一个编码的字符串，该字符串可以用作<img>元素的源。本例的代码与前面的代码基本相同，区别是我们使用readAsDataURL读取文件并将结果显示为图像:

总结

1）由于安全和隐私的原因，JavaScript 不能直接访问本地文件。

2）可以通过 input 类型为 file 来选择文件，并对文件进行处理。

3） file input 具有带有所选文件的files属性。

4）我们可以使用FileReader来访问所选文件的内容。

作者: Martin Splitt 译者：前端小智来源：dev

原文：https://dev.to/g33konaut/reading-local-files-with-javascript-25hn

在线咨询

上一篇：为HTML页面添加视频、音频的方法-零基础自学网页制作
下一篇：卡巴斯基修复四年老漏洞注入HTML源码的唯一标识符会泄露用户隐私

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商