時(shí)間：2023-10-06 19:06:02 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-10-06 19:06:02 來源：網(wǎng)站運(yùn)營(yíng)
【瀏覽器渲染】這是一份關(guān)于script和style的實(shí)驗(yàn)報(bào)告：? 如果做性能優(yōu)化，一定會(huì)想當(dāng)?shù)囊粋€(gè)優(yōu)化點(diǎn)就是script標(biāo)簽和link標(biāo)簽要放置的位置，當(dāng)然大部分的觀點(diǎn)都是script標(biāo)簽放到</body>之前,link標(biāo)簽放到title中；或者是配合async、defer、preload、prefech使用，當(dāng)然目的只有一個(gè)：讓頁(yè)面盡可能快的展示在用戶面前。下面僅僅會(huì)討論瀏覽器獲取到HTML文件后的部分。
?
? 瀏覽器獲取到HTML文件后，開始渲染工作。這里以webkit引擎為例。
在線咨詢
// server.jsconst http = require('http');const fs = require('fs')http.createServer(function (request, response) { if (request.url === '/index.html') { fs.readFile('./index.html', (err, data) => { response.setHeader('Content-Type', 'text/html'); if (!err) { response.end(data); }else { response.end('html not found'); } }) } if (request.url === '/hand.js') { fs.readFile('./static/hand.js', (err, data) => { response.setHeader('Content-Type', 'text/javascript'); if (!err) { setTimeout(() => { response.end(data); }, 100); }else { response.end('html not found'); } }) } if (request.url === '/style.css') { fs.readFile('./static/style.css', (err, data) => { response.setHeader('Content-Type', 'text/css'); if (!err) { setTimeout(() => { response.end(data); }, 1000); }else { response.end('html not found'); } }) } if (request.url === '/favicon.ico') { response.end() }}).listen(8888);console.log('port 8888')// hand.js(無內(nèi)容)// style.cssp { color: red;}<!--index.html--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <p>我是第一個(gè)</p> <p>我是第二個(gè)</p> <p>我是第三個(gè)</p></body></html>? javascript能操作dom樹，瀏覽器卻不知道腳本中是否有操作dom的代碼(比如document.write等)，所以以最壞的打算來處理：停止dom的解析，所以更準(zhǔn)確的說是「script標(biāo)簽會(huì)阻止dom的解析」
解釋幾個(gè)下面實(shí)驗(yàn)用到的名詞(以下解釋均來源于MDN)
<head> <meta charset="UTF-8"> <script> var a = 0 for (let i = 0; i< 1000000000; i++) { a += 1 } </script></head><body> <p>我是第一個(gè)</p></body><head> <meta charset="UTF-8"></head><body> <p>我是第一個(gè)</p> <script> var a = 0 for (let i = 0; i< 1000000000; i++) { a += 1 } </script></body><head> <meta charset="UTF-8"></head><body> <script> const node = document.getElementsByTagName('p') console.log(node[0]) // undefined </script> <p>我是第一個(gè)</p></body><head> <meta charset="UTF-8"></head><body> <p>我是第一個(gè)</p> <script> const node = document.getElementsByTagName('p') console.log(node[0]) // <p>我是第一個(gè)</p> </script></body><html lang="en"><head> <meta charset="UTF-8"> <script src="http://localhost:8888/hand.js"></script></head><body> <p>我是第一個(gè)</p></body></html><html lang="en"><head> <meta charset="UTF-8"></head><body> <p>我是第一個(gè)</p> <p>我是第二個(gè)</p> <script src="http://localhost:8888/hand.js"></script> <p>我是第三個(gè)</p></body></html><html lang="en"><head> <meta charset="UTF-8"></head><body> <p>我是第一個(gè)</p> <p>我是第二個(gè)</p> <p>我是第三個(gè)</p> <script src="http://localhost:8888/hand.js"></script></body></html><head> <meta charset="UTF-8"> <script src="http://localhost:8888/hand.js" async></script></head><body> <p>我是第一個(gè)</p> <p>我是第二個(gè)</p> <p>我是第三個(gè)</p></body><head> <meta charset="UTF-8"> <script src="http://localhost:8888/hand.js" defer></script></head><body> <p>我是第一個(gè)</p> <p>我是第二個(gè)</p> <p>我是第三個(gè)</p></body>? 總結(jié):
? 我們一般用link標(biāo)簽引用css樣式文件。如果你看過vue打包后的文件，會(huì)發(fā)現(xiàn)它的一些腳本文件也是通過link標(biāo)簽引入的。不過我們這篇文章中不對(duì)其進(jìn)行討論。「樣式文件不會(huì)阻塞dom的解析，但是會(huì)阻塞dom的渲染」，接下來用幾個(gè)實(shí)驗(yàn)來證明css是如何阻塞dom的渲染的
?
<head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://localhost:8888/style.css"></head><body> <p>我是第一個(gè)</p> <p>我是第二個(gè)</p> <p>我是第三個(gè)</p></body><head> <meta charset="UTF-8"></head><body> <p>我是第一個(gè)</p> <p>我是第二個(gè)</p> <p>我是第三個(gè)</p> <link rel="stylesheet" href="http://localhost:8888/style.css"></body>? 總結(jié):
? 一個(gè)靜態(tài)文件中一定會(huì)同時(shí)存在script和link標(biāo)簽的情況，它們之間又是互相影響的？
?
<html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://localhost:8888/style.css" /> <script src="http://localhost:8888/hand.js"></script></head><body> <p>我是第一個(gè)</p> <p>我是第二個(gè)</p> <p>我是第三個(gè)</p></body><html lang="en"><head> <meta charset="UTF-8"> <script src="http://localhost:8888/hand.js"></script> <link rel="stylesheet" href="http://localhost:8888/style.css" /></head><body> <p>我是第一個(gè)</p> <p>我是第二個(gè)</p> <p>我是第三個(gè)</p></body><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://localhost:8888/style.css" /></head><body> <p>我是第一個(gè)</p> <p>我是第二個(gè)</p> <p>我是第三個(gè)</p> <script src="http://localhost:8888/hand.js"></script></body>// 讓我們修改一下serve.js文件中的js文件和css的返回時(shí)間if (request.url === '/hand.js') { fs.readFile('./static/hand.js', (err, data) => { response.setHeader('Content-Type', 'text/javascript'); if (!err) { setTimeout(() => { response.end(data); }, 1000); }else { response.end('html not found'); } }) } if (request.url === '/style.css') { fs.readFile('./static/style.css', (err, data) => { response.setHeader('Content-Type', 'text/css'); if (!err) { setTimeout(() => { response.end(data); }, 100); }else { response.end('html not found'); } }) }<html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://localhost:8888/style.css" /></head><body> <p>我是第一個(gè)</p> <p>我是第二個(gè)</p> <p>我是第三個(gè)</p> <script src="http://localhost:8888/hand.js"></script></body>? 總結(jié):
關(guān)鍵詞：報(bào)告,實(shí)驗(yàn),渲染,瀏覽
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
