好程序員web前端學習路線之異步加載CSS的一些方法

好程序員web前端教程分享異步加載CSS的一些方法，在我們寫頁面的時候，我們做最主要的任務就是提高頁面的性能和彈性加載速度，以不會延遲頁面的呈現(xiàn)的形式來加載CSS。這是因為在默認情況下。

- 瀏覽器會同步加載外部的CSS

- 在下載和解析CSS時會影響所有頁面呈現(xiàn)

這兩種情況都會導致潛在的延遲。

當然，這也是在開始渲染頁面之前，應該至少加載網(wǎng)站的CSS的一部分，并且為了立即將該初始CSS添加到瀏覽器，我們建議內(nèi)聯(lián)css。對于整體數(shù)量較少的網(wǎng)站，僅此一項就足夠了，但如果CSS很大（例如，大于15到20kb），它可以幫助性能按優(yōu)先級將其拆分。拆分后，應該在后臺-aka中加載不太關(guān)鍵的CSS異步。在這篇文章中，我的目的是描述我在這些日子的首選方式，這實際上已存在很長的時間段了。

有幾種方法可以異步加載CSS，但沒有一種方法可以像您期望的那樣直觀。與script元素不同，沒有async或defer屬性可以簡單地應用于link元素，因此多年來我們維護了loadCSS項目，使得加載異步CSS的過程更加容易。最近，瀏覽器已經(jīng)標準化了它們的CSS加載行為，因此可能不再需要像loadCSS這樣的專用腳本來處理它們的微小差異。

今天，我們掌握了瀏覽器如何處理各種link元素屬性的一些知識，我們可以通過一小段HTML來實現(xiàn)異步加載CSS的效果。在這里，它是異步加載樣式表的最簡單方法：

這行HTML簡潔，但它不是很直觀，所以讓我們分解這里發(fā)生的事情。

首先，將link's media屬性設(shè)置為print。“打印”是一種媒體type，它說“應用此樣式表的基于打印的媒體的規(guī)則”，換句話說，當用戶嘗試打印頁面時應用它們。不可否認，我們希望我們的樣式表適用于所有媒體（尤其是屏幕）而不僅僅是打印，但通過聲明與當前環(huán)境不匹配的媒體類型，我們可以實現(xiàn)一個有趣且有用的效果：瀏覽器將加載樣式表沒有延遲頁面渲染，異步！這很有幫助，但并不是我們想要的全部。我們還希望CSS在加載后實際應用于屏幕環(huán)境。為此，我們可以使用該onload屬性將link媒體設(shè)置為all完成加載。

介紹完了老方子，我們再來看看新藥方，是的，同樣的！在過去一兩年中，我們一直在使用link[rel=preload]（而不是rel=stylesheet）來實現(xiàn)與上面類似的模式（分別rel在加載后切換屬性而不是media屬性）。使用這種方法仍然可以正常工作，但是，使用時需要考慮幾個缺點preload。首先，瀏覽器對于加載的支持依舊不是特別的好因此如果你想依賴它來跨瀏覽器獲取和應用樣式表，那么填充（例如一個loadCSS）是必要的。更主要的是，preload盡可能早地獲取文件，優(yōu)先級最高，可能會優(yōu)先考慮其他重要下載，并且可能比非關(guān)鍵CSS實際需要的優(yōu)先級更高。

幸運的是，如果你碰巧想要提供的高優(yōu)先級提取rel=preload（在支持它的瀏覽器中），你可以將它與上面的模式結(jié)合起來。

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

這和之前的方法沒什么區(qū)別啊！是的確實如此，但是呢，語法上更加好一些。另外就是你仔細點就會發(fā)現(xiàn) as="style"這個屬性，所以 preload 不僅僅可以用在 CSS 文件上，而是可以用在絕大多數(shù)的資源文件上。

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

我們可以新建一個script標簽來指向它：

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

script.src = "scriptfile.js";

document.body.appendChild(script);

在這個時候瀏覽器就直接從緩存中拿這個文件了，不會再發(fā)請求了，因為此前已經(jīng)加載好了。

那么 preload 中的 as 屬性支持哪些資源文件呢？下面這些都可以

· font

· image

· object

· script

· style

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

也可以用JavaScript來實現(xiàn)：

$(window).load(function () {

//異步延遲加載樣式

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

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

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

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

link.load(function () {

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

});

本內(nèi)容偽原創(chuàng)文章，轉(zhuǎn)載請注明出處。

Vue 項目開發(fā)中，我們總希望能打造出閃電般的網(wǎng)頁加載速度，給用戶帶來極致體驗。然而，隨著項目規(guī)模的增長，JS 文件也越來越臃腫，成為了拖慢網(wǎng)站速度的罪魁禍首。

別擔心！今天就來分享 Vue 項目中異步加載 JS 的秘密武器，助你的網(wǎng)站速度一飛沖天！

為什么要異步加載 JS ？

我們知道，瀏覽器在加載網(wǎng)頁時，會按照 HTML 代碼的順序，自上而下依次解析和執(zhí)行。如果 JS 文件過大，就會阻塞頁面的渲染，導致頁面出現(xiàn)長時間的白屏，用戶體驗極差。

異步加載 JS 就是為了解決這個問題！它允許瀏覽器在不阻塞頁面渲染的情況下，并行加載 JS 文件，從而大幅提升網(wǎng)頁加載速度！

Vue 中異步加載 JS 的方法

Vue 項目中，我們通常使用 import() 函數(shù)來實現(xiàn) JS 文件的異步加載，配合 async/await 語法，代碼簡潔優(yōu)雅！

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 關(guān)鍵字等待異步加載完成后，再將加載到的組件賦值給 this.MyComponent 。
使用 try...catch 語句捕獲異步加載過程中可能出現(xiàn)的錯誤。
在 mounted() 生命周期鉤子函數(shù)中調(diào)用 loadMyComponent() 方法，確保組件在渲染完成后再進行加載。

2. 路由懶加載：

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

源碼解析：

在路由配置中，使用箭頭函數(shù)將組件的引入包裹起來，實現(xiàn)路由懶加載。
/* webpackChunkName: "home" */ 是 webpack 的魔法注釋，用于指定異步加載的代碼塊名稱，方便打包和管理。

總結(jié)

異步加載 JS 是提升 Vue 項目性能的利器，掌握它可以讓你在開發(fā)中更加游刃有余！趕緊試試吧！

#頭條創(chuàng)作挑戰(zhàn)賽#

于安全和隱私的原因，web 應用程序不能直接訪問用戶設(shè)備上的文件。如果需要讀取一個或多個本地文件，可以通過使用input file和FileReader來實現(xiàn)。在這篇文章中，我們將通過一些例子來看看它是如何工作的。

文件操作的流程

獲取文件

由于瀏覽器中的 JS 無法從用戶的設(shè)備訪問本地文件，我們需要為用戶提供一種方法來選擇一個或多個文件供我們使用。這可以通過文件選擇器<input type='fule' />來完成。

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

如果想允選擇多個文件，可以添加multiple屬性:

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

我們可以通過change事件來監(jiān)聽文件的選擇，也可以添加另一個 UI 元素讓用戶顯式地開始對所選文件的處理。

input file 具有一個files屬性，該屬性是File對象的列表（可能有多個選擇的文件）。

File對象如下所示：

讀取文件

讀取文件，主要使用的是[FileReader][1]類。

「該對象擁有的屬性：」

「FileReader.error」 ：只讀，一個DOMException，表示在讀取文件時發(fā)生的錯誤。

「FileReader.readyState」：只讀表示 FileReader 狀態(tài)的數(shù)字。取值如下：

常量名值描述EMPTY0還沒有加載任何數(shù)據(jù)LOADING1數(shù)據(jù)正在被加載DONE2已完成全部的讀取請求

「FileReader.result」：只讀，文件的內(nèi)容。該屬性僅在讀取操作完成后才有效，數(shù)據(jù)的格式取決于使用哪個方法來啟動讀取操作。

「該對象擁有的方法：」

readAsText(file, encoding)：以純文本形式讀取文件，讀取到的文本保存在result屬性中。第二個參數(shù)代表編碼格式。

readAsDataUrl(file)：讀取文件并且將文件以數(shù)據(jù)URI的形式保存在result屬性中。

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

readAsArrayBuffer(file)：讀取文件并且將一個包含文件內(nèi)容的ArrayBuffer保存咋result屬性中。

FileReader.abort()：中止讀取操作。在返回時，readyState屬性為DONE。

「文件讀取的過程是異步操作，在這個過程中提供了三個事件：progress、error、load事件。」

progress：每隔50ms左右，會觸發(fā)一次progress事件。

error：在無法讀取到文件信息的條件下觸發(fā)。

load：在成功加載后就會觸發(fā)。

在下面的示例中，我們將使用readAsText和readAsDataURL方法來顯示文本和圖像文件的內(nèi)容。

例一：讀取文本文件

為了將文件內(nèi)容顯示為文本，change需要重寫一下：

首先，我們要確保有一個可以讀取的文件。如果用戶取消或以其他方式關(guān)閉文件選擇對話框而不選擇文件，我們就沒有什么要讀取和退出函數(shù)。

然后我們繼續(xù)創(chuàng)建一個FileReader。reader的工作是異步的，以避免阻塞主線程和 UI 更新，這在讀取大文件(如視頻)時非常重要。

reader發(fā)出一個'load'事件(例如，類似于Image對象)，告訴我們的文件已經(jīng)讀取完畢。

reader將文件內(nèi)容保存在其result屬性中。此屬性中的數(shù)據(jù)取決于我們使用的讀取文件的方法。在我們的示例中，我們使用readAsText方法讀取文件，因此result將是一個文本字符串。

例二：顯示本地選擇的圖片

如果我們想要顯示圖像，將文件讀取為字符串并不是很有用。FileReader有一個readAsDataURL方法，可以將文件讀入一個編碼的字符串，該字符串可以用作<img>元素的源。本例的代碼與前面的代碼基本相同，區(qū)別是我們使用readAsDataURL讀取文件并將結(jié)果顯示為圖像:

總結(jié)

1）由于安全和隱私的原因，JavaScript 不能直接訪問本地文件。

2）可以通過 input 類型為 file 來選擇文件，并對文件進行處理。

3） file input 具有帶有所選文件的files屬性。

4）我們可以使用FileReader來訪問所選文件的內(nèi)容。

作者: Martin Splitt 譯者：前端小智來源：dev

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

在線咨詢

上一篇：為HTML頁面添加視頻、音頻的方法-零基礎(chǔ)自學網(wǎng)頁制作
下一篇：卡巴斯基修復四年老漏洞注入HTML源碼的唯一標識符會泄露用戶隱私

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

好程序員web前端學習路線之異步加載CSS的一些方法

為什么要異步加載 JS ？

Vue 中異步加載 JS 的方法

總結(jié)

文件操作的流程

獲取文件

讀取文件

例一：讀取文本文件

例二：顯示本地選擇的圖片

總結(jié)

您的項目需求