一個頁面從輸入U(xiǎn)RL到頁面加載顯示完成，這個過程中都

一個頁面從輸入U(xiǎn)RL到頁面加載顯示完成，這個過程中都發(fā)生了什么

細(xì)版：

1、瀏覽器會開啟一個線程來處理這個請求，對 URL 分析判斷，如果是 http 協(xié)議就按照 Web 方式來處理;

2、調(diào)用瀏覽器內(nèi)核中的對應(yīng)方法，比如 WebView 中的 loadUrl 方法;

3、通過DNS解析獲取網(wǎng)址的IP地址，設(shè)置 UA 等信息發(fā)出第二個GET請求;

4、進(jìn)行HTTP協(xié)議會話，客戶端發(fā)送報(bào)頭(請求報(bào)頭);

5、進(jìn)入到web服務(wù)器上的 Web Server，如 Apache、Tomcat、Node.JS 等服務(wù)器;

6、進(jìn)入部署好的后端應(yīng)用，如 PHP、Java、JavaScript、Python 等，找到對應(yīng)的請求處理;

7、處理結(jié)束回饋報(bào)頭，此處如果瀏覽器訪問過，緩存上有對應(yīng)資源，會與服務(wù)器最后修改時間對比，一致則返回304;

8、瀏覽器開始下載html文檔(響應(yīng)報(bào)頭，狀態(tài)碼200)，同時使用緩存;

9、文檔樹建立，根據(jù)標(biāo)記請求所需指定MIME類型的文件（比如css、js）,同時設(shè)置了cookie;

10、頁面開始渲染DOM，JS根據(jù)DOM API操作DOM,執(zhí)行事件綁定等，頁面顯示完成。

簡潔版：

瀏覽器根據(jù)請求的URL交給DNS域名解析，找到真實(shí)IP，向服務(wù)器發(fā)起請求；

服務(wù)器交給后臺處理完成后返回?cái)?shù)據(jù)，瀏覽器接收文件（HTML、JS、CSS、圖象等）；

瀏覽器對加載到的資源（HTML、JS、CSS等）進(jìn)行語法解析，建立相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（如HTML的DOM）；

載入解析到的資源文件，渲染頁面，完成。

于安全和隱私的原因，web 應(yīng)用程序不能直接訪問用戶設(shè)備上的文件。如果需要讀取一個或多個本地文件，可以通過使用input file和FileReader來實(shí)現(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 來選擇文件，并對文件進(jìn)行處理。

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

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

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

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

先要安裝css的loader

npm install css-loader style-loader --save-dev

然后在webpack.config.js中配置如下代碼

意思是先用css-loader加載css文件，再用style-loader添加在頁面中

在app目錄下創(chuàng)建component.css文件

body{
 background-color: red;
}

在app/index.js中引入css文件

運(yùn)行npm run start命令。

可以看到我們?yōu)g覽器整個背景都變成了紅色。

webpack做了什么呢？

看到build/app.js中有如下代碼。

再看下我們生產(chǎn)的index.html文件

奇怪了，并沒有內(nèi)斂樣式也沒有引入的css文件，那瀏覽器是為什么變紅的呢？

我們在瀏覽器中打開調(diào)試工具。

原來樣式在這！

webpack動態(tài)的添加了內(nèi)斂樣式在代碼中。

如果多人協(xié)作開發(fā)的情況下，會有很大可能出現(xiàn)代碼命名重復(fù)的情況，如果出現(xiàn)這種情況怎么辦呢？

來讓我們試驗(yàn)一下。

在app目錄下添加兩個css文件，style1.css

body{
 background-color: red;
}.class1{
color: green;
}

和style2.css

body{
 background-color: black;
}.class1{
 color: blue;
}

在index.js中引入這兩個文件

修改component.js文件，使其給元素添加傳入的類名

在webpack.config.js中添加如下配置

我們執(zhí)行npm run start 命令若看到

即為打包成功。

打開瀏覽器http://localhost:8080/

可以看到同樣的類名都正常顯示出來了，看下右邊的文檔結(jié)構(gòu)，發(fā)現(xiàn)我們的類名不是class1了。

原來CSS Modules對我們的類名做了哈希處理，我們再也不用擔(dān)心同事跟我們有相同的命名了。

是不是很方便呢？

讓我們再來面對另一個問題，現(xiàn)在這種情況下css是js動態(tài)添加上去的，如果當(dāng)js文件有一個長時間的阻塞事件，頁面將會處于長時間的無樣式的狀態(tài)。

這是我們不希望看到的，怎么把css文件和js文件分離呢？

首先我們需要安裝一個插件

npm install extract-text-webpack-plugin --save-dev

安裝成功之后在webpack.config.js中添加如下配置

完成之后運(yùn)行一下npm run start

打開瀏覽器http://localhost:8080/

可以看到我們兩個css文件合并為一個app.css文件并以外部樣式表的形式加載。

而且css文件比js文件要先請求，這樣就避免頁面會出現(xiàn)FOUC-Flas Of Unstyle Content無樣式內(nèi)容閃爍。

webpack關(guān)于css的加載就講到這里。

在線咨詢

上一篇：如何在vs code中開發(fā)C# winform窗口應(yīng)
下一篇：JS截取字符串的方法

您的項(xiàng)目需求

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

整合營銷服務(wù)商