全栈：前端网页加载

前端网页加载

网页加载

一个网页的渲染资源是一个个动态加载的数据组合而成的,不是一次就把整个渲染的页面加载了

1.用户浏览器地址栏输入网址==>请求后端,后端传输一份html编码的文本文档然后就断开连接了

2.浏览器开始运行html文件的编码(此时没有外部图片，js，css，字体库资源等)

2.1解析时遇到了img-src属性会再次请求另外一个网址==>后端传输一份image编码的文件然后断开连接,浏览器把图片的编码按照CSS结构进行渲染

解析时遇到了 link-href属性会再次异步请求服务器==>后端传输一份对应编码的文件然后加载

解析时遇到了 url属性会再次异步请求服务器==>后端传输一份对应编码的文件然后加载

解析时遇到了src 属性会再次异步请求服务器==>后端传输一份对应编码的文件然后加载

所有资源加载完毕了就会触发window.onload

3.页面渲染

页面按照解析好的DOM模型和CSS层叠样式表结合为renderTree然后绘制页面

经典面试题:用户从输入url到页面渲染过程发生了什么?

实例1：

发图片给前端——

<!-- 前端 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<!-- 网络图片地址 -->
<img src="https://img2.baidu.com/it/u=1792249350,650626052&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1659027600&t=8e00630c19a3114a239cfe232e159016">
<!-- 本地图片地址 -->
<img src="./bird.png" alt="">

</html>

//后端：
var http = require("http")
var fs = require("fs")
var app = http.createServer((req,res)=>{
    if(req.url == '/home'){
        fs.readFile("bird.png",(err,data)=>{
            if(!err){
                res.end(data)
            }
        })
    }else{
        res.end('not 404')
    }
})
app.listen(8081)

实例2：

//练习
var http = require('http')
var fs = require('fs')
var app = http.createServer((req, res) => {
    if (req.url == '/111') {
        fs.readFile('./index.hrml', (err, data) => {
            if (!err) {
                res.end(data)
            }
        })
    }
    else if (req.url == '/222') {
        fs.readFile('bird.png', (err, data) => {
            if (!err) {
                res.end(data)
            }
        })
    }
    else if (req.url =="/333") {
        fs.readFile('land.png',(err,data)=>{
            if(!err){
                res.end("<h1>大地</h1>")
            }
        })
    } else {
        res.end('<h1>404</h1>')
    }
})
app.listen(8009)

http://192.168.1.12:8009/222

posted on 2022-07-27 21:40 香香鲲阅读(206) 评论(0) 收藏举报