1. 程式人生 > >瀏覽器解析HTML文件的資源並下載

瀏覽器解析HTML文件的資源並下載

<img />,<style>這些資源是並行請求與載入。

<script>指令碼是同步請求與載入,阻塞載入。載入完成並執行後再繼續解析HTML。

動態<script>是非同步載入,就是說可以同時載入其他資源。

關於<script>的執行,分為立即執行和延遲執行。

對於瀏覽器來說,不管是<style>, <img />, <script>都是一視同仁,都是並行請求多個資原始檔並載入,而不是一次只請求一個資源並載入。

只不過最大連線數有限制, 為6個或2個,並行載入6個資源。

但是遇到<script>會有特殊,即阻塞載入其他資源,比如<img/>等。

<script>載入與執行兩個階段,載入是阻塞其他資源的載入,執行也會阻塞。

執行是肯定會阻塞,這個沒有什麼非同步執行,只有延遲執行和立即執行。

載入是並行載入,但是<script>特殊,故分為同步和非同步載入。

HTML解析過程中,遇到<style>, <img/>, <script>會去並行載入外部資源。

同步載入(阻塞模式)但是遇到<script>時,會阻止瀏覽器的後續處理,停止後續的HTLM的解析,因此阻塞後續頁面的處理,比如<img/>, <script>, <style>等資源的載入,以及HTML的渲染,和程式碼的執行。

非同步載入(非阻塞),下載js的同時,還會繼續進行後續頁面的處理

 js 之所以要同步執行,是因為 js 中可能有輸出 document 內容、修改dom、重定向等行為,所以默認同步執行才是安全的。

<script>的阻塞不僅僅是資原始檔的載入,而是HTML的解析和渲染,導致了不能載入包含的資原始檔。

執行JS必然會阻塞其他一切資源的載入,但是非同步載入不會阻塞資源的載入。

但是載入完之後是立即執行還是延遲執行這個可以通過defer來指定。

async非同步載入,立即執行。

defer非同步載入,延遲執行。

相關推薦

瀏覽器解析HTML資源下載

<img />,<style>這些資源是並行請求與載入。 <script>指令碼是同步請求與載入,阻塞載入。載入完成並執行後再繼續解析HTML。 動態<script>是非同步載入,就是說可以同時載入其他資源。 關於<script>的執行,分

js 把字符串保存為txt下載到本地

code element 下載 aud span html htm kit eat 代碼如下           exportRaw(‘text.txt‘,‘123123123‘) function fakeClick(obj)

解析xml將xml中的資料拼接成insert語句

education.xml的內容是: <?xml version="1.0" encoding="utf-8"?> <Msg> <Head>   <Id>20140529100039</Id>   <Name&

使用JSOUP解析HTML

 這篇文章主要介紹了Jsoup如何解析一個HTML文件、從檔案載入文件、從URL載入Document等方法,對Jsoup常用方法做了詳細講解,最近提供了一個示例供大家參考 使用DOM方法來遍歷一個文件 從元素抽取屬性,文字和HTML 獲取所有連結 解析和遍歷一個H

C#解析html

當我們需要解析一個web頁面的時候,如果非常簡單,可以用字串查詢的方式,複雜一點可以用正則表示式,但是有時候正則很麻煩的,因為html程式碼本身就比較麻煩,像常用的img標籤,這個東東到了瀏覽器上就沒了閉合標籤(一直還沒搞懂為什麼),想用XML解析,也是同樣的原因根本解析

解析XML把資料存到資料庫中

public void addInitData() {         try {             //解析init.xml文件             Document doc = new SAXReader().read(Thread.currentThread().getContextClass

前端接受後端下載的幾種方法

one head resp per span headers move 文件名 實現 前言 項目中經常會遇到需要導出列表內容,或者下載文件之類的需求。結合各種情況,我總結了前端最常用的三種方法來接受後端傳過來的文件流並下載,針對不同的情況可以使用不同的方法。 方法一

c# mvc 在控制器中動態解析cshtml獲取對應的html代碼

VC string arp 動態解析 temp brush ont IT obj public static string GetViewHtml(ControllerContext context, string viewName, Object param)

python解析html提取資料,生成word

今天試著用ptyhon做了一個抓取網頁內容,並生成word文件的功能,功能很簡單,做一下記錄以備以後用到。 生成word用到了第三方元件python-docx,所以先進行第三方元件的安裝。由於windows下安裝的python預設不帶setuptools這個模組,所以要先安

【U1結業機試題】新聞內容管理系統:解析XML讀取Html模版生成網頁

repl att not 一個 class 新的 create hashmap exception 一、作業要求: 1.在xml文件中創建新聞節點news,包含標題、作者、日期、正文等信息 2.創建HTML模板文件 3.讀取xml中所有新聞信息,並使用新聞信息替換模板文件中

java利用WatchService實時監控某個目錄下的變化按行解析(註:附源代碼)

tomcat啟動 interrupt extend red -name 利用 end eba tor 首先說下需求:通過ftp上傳約定格式的文件到服務器指定目錄下,應用程序能實時監控該目錄下文件變化,如果上傳的文件格式符合要求,將將按照每一行讀取解析再寫入到數據庫,解析完之

linux下使用eclipse打開esp32工程進行編譯下載

包含 class ttyusb0 windows 變量 如果 -1 我們 sta 在之前的文章中,已經講過將esp-idf 運用linux自帶的工具下載,但是為了開發的系統性,這裏運用eclipse來對idf進行整體的編譯。 首先 cd /esp32 運行eclipse

nginx-http-concat資源模塊

org 就會 資源 目錄 原生 符號 sta style col 網頁中引入多個CSS和JS的時候,瀏覽器會發出很多(css個數+js個數)次網絡請求,甚至有的網頁中有數十個以上的CSS或JS文件,用戶體驗特別不好,正好可以利用nginx-http-concat nginx

【daily】分割限速下載,及合分割

但我 redist lar for @override files fse exception 調度 說明   主要功能:     1) 分割文件, 生成下載任務;     2) 定時任務: 檢索需要下載的任務, 利用多線程下載並限制下載速度;     3) 定時任務: 檢

.NET 上傳解析CSV存庫

nco eat public reader new csv文件 err replace path 1.前端: 放置瀏覽按鈕 <div class="row inner_table text-center"> <in

JS加載&解析XML瀏覽器兼容

enc dom eat min test ldo dex new eval # JS加載XML,瀏覽器之間有差異,代碼如下 this.createXMLDom = function() { var xmldoc; var xmlF

遍歷win10解析json,按照json格式存入mongo數據庫(基於python 3.6)

dep IT os.path efault gpo dir ren ica not import reimport jsonfrom pymongo import MongoClientimport os# def Write_json(data):# open_J

瀏覽器視頻分段緩存合成完整的視頻

打開 輸入 合並 編輯 media 保存 一段時間 mp4格式 AC 之前在網站上瀏覽一個視頻,想要把這個視頻保存下來,然後就去找緩存目錄,打開緩存目錄,發現視頻文件都是分段緩存的,無法得到完整的視頻,這時就去找各種視頻編輯軟件,發現視頻編輯軟件只能把多個視頻文件合並

VS Code如何在瀏覽器中打開Html

按鍵 ctr 映射 文件 分享 shift html alt+ 瀏覽器 1、首先打開擴展   “ 文件 → 首選項 → 按鍵映射擴展”   快捷鍵:[ Ctrl+K Ctrl+M ]    2、在出現的窗口輸入“open in browser”,安裝    3、打開

HTML解析

2.1 <!DOCTYPE! html> 什麼是<!DOCTYPE html>? 在HTML文件初,往往會有這麼一句話<!DOCTYPE html>,那麼它的意義是什麼呢?它是html5標準網頁宣告,全稱為Document Type HyperTex