时间：2023-10-06 19:06:02 | 来源：网站运营
时间：2023-10-06 19:06:02 来源：网站运营
【浏览器渲染】这是一份关于script和style的实验报告：❝ 如果做性能优化，一定会想当的一个优化点就是script标签和link标签要放置的位置，当然大部分的观点都是script标签放到</body>之前,link标签放到title中；或者是配合async、defer、preload、prefech使用，当然目的只有一个：让页面尽可能快的展示在用户面前。下面仅仅会讨论浏览器获取到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(无内容)// style.cssp { color: red;}<!--index.html--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <p>我是第一个</p> <p>我是第二个</p> <p>我是第三个</p></body></html>❝ javascript能操作dom树，浏览器却不知道脚本中是否有操作dom的代码(比如document.write等)，所以以最坏的打算来处理：停止dom的解析，所以更准确的说是「script标签会阻止dom的解析」
解释几个下面实验用到的名词(以下解释均来源于MDN)
<head> <meta charset="UTF-8"> <script> var a = 0 for (let i = 0; i< 1000000000; i++) { a += 1 } </script></head><body> <p>我是第一个</p></body><head> <meta charset="UTF-8"></head><body> <p>我是第一个</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>我是第一个</p></body><head> <meta charset="UTF-8"></head><body> <p>我是第一个</p> <script> const node = document.getElementsByTagName('p') console.log(node[0]) // <p>我是第一个</p> </script></body><html lang="en"><head> <meta charset="UTF-8"> <script src="http://localhost:8888/hand.js"></script></head><body> <p>我是第一个</p></body></html><html lang="en"><head> <meta charset="UTF-8"></head><body> <p>我是第一个</p> <p>我是第二个</p> <script src="http://localhost:8888/hand.js"></script> <p>我是第三个</p></body></html><html lang="en"><head> <meta charset="UTF-8"></head><body> <p>我是第一个</p> <p>我是第二个</p> <p>我是第三个</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>我是第一个</p> <p>我是第二个</p> <p>我是第三个</p></body><head> <meta charset="UTF-8"> <script src="http://localhost:8888/hand.js" defer></script></head><body> <p>我是第一个</p> <p>我是第二个</p> <p>我是第三个</p></body>❝ 总结:
❝ 我们一般用link标签引用css样式文件。如果你看过vue打包后的文件，会发现它的一些脚本文件也是通过link标签引入的。不过我们这篇文章中不对其进行讨论。「样式文件不会阻塞dom的解析，但是会阻塞dom的渲染」，接下来用几个实验来证明css是如何阻塞dom的渲染的
❞
<head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://localhost:8888/style.css"></head><body> <p>我是第一个</p> <p>我是第二个</p> <p>我是第三个</p></body><head> <meta charset="UTF-8"></head><body> <p>我是第一个</p> <p>我是第二个</p> <p>我是第三个</p> <link rel="stylesheet" href="http://localhost:8888/style.css"></body>❝ 总结:
❝ 一个静态文件中一定会同时存在script和link标签的情况，它们之间又是互相影响的？
❞
<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>我是第一个</p> <p>我是第二个</p> <p>我是第三个</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>我是第一个</p> <p>我是第二个</p> <p>我是第三个</p></body><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://localhost:8888/style.css" /></head><body> <p>我是第一个</p> <p>我是第二个</p> <p>我是第三个</p> <script src="http://localhost:8888/hand.js"></script></body>// 让我们修改一下serve.js文件中的js文件和css的返回时间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>我是第一个</p> <p>我是第二个</p> <p>我是第三个</p> <script src="http://localhost:8888/hand.js"></script></body>❝ 总结:
关键词：报告,实验,渲染,浏览
