网页加载过程+性能优化+安全

最新推荐文章于 2023-05-10 22:45:30 发布

小豪boy

最新推荐文章于 2023-05-10 22:45:30 发布

阅读量2.7k

点赞数 1

分类专栏：面试技能前端学习笔记文章标签：性能优化安全 asp.net

本文链接：https://blog.csdn.net/qq_34771938/article/details/120909808

版权

前端学习笔记同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

面试技能

14 篇文章 0 订阅

订阅专栏

一、网页加载过程

1. 加载资源的形式

htm代码。

媒体文件，如图片、视频等。

Javascript CSS。

2. 加载资源的过程

DNS解析：将域名转化为IP地址。
浏览器根据 IP 地址向服务器发起 http 请求。
服务器处理 http 请求，并返回给浏览器。

3. 渲染页面的过程

根据 HTML 代码生成 DOM Tree 。
根据 CSS 代码生成 CSSOM 。
将 DOM Tree 和 CSSOM 整合形成 Render Tree 。
根据 Render Tree 渲染页面。
遇到 <script> 则暂停渲染，优先加载并执行 JS 代码，完成再继续。
直至把 Render Tree 渲染完成。

4. 面试题

从输入 url 到显示出页面的整个过程是什么样的？

下载资源：各个资源类型，下载过程。
渲染页面：结合 html、css、JavaScript、图片等。

window.onload 和 DOMContentLoaded 区别？

window.onload：资源全部加载完才能执行，包括图片。
DOMContentLoaded：DOM 渲染完成即可，图片可能尚未下载。

二、性能优化

1. 性能优化的原则

多使用内存、缓存或其他方法。
减少CPU计算量，减少网络加载耗时。
(适用于所有编程的性能优化——空间换时间)。

2. 让加载更快

减少资源体积：压缩代码。
减少访问次数∶合并代码、SSR服务器端渲染、緩存。

使用更快的网络：CDN。

3. 让渲染更快

CSS 放在 head，JS 放在 body 最下面。
尽早开始执行JS，用 DOMContentloaded 触发。

懒加载（图片懒加载，上滑加载更多）。
对 DOM 查询进行缓存。
频繁 DOM 操作，合并到一起插入 DOM 结构。
节流 throttle 防抖 debounce。

4. 防抖 debounce

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖 debounce</title>
</head>

<body>
    <input type="text" id="input1">

    <script>
        const input1 = document.getElementById('input1')
        // 防抖
        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(this.value);
            }, 600)
        )
    </script>
</body>

</html>

5. 节流 throttle

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节流 throttle</title>
    <style>
        #div1 {
            border: 1px solid #ccc;
            width: 200px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div id="div1" draggable="true">可拖拽</div>

    <script>
        const div1 = document.getElementById('div1')
        // 节流
        function throttle(fn, delay = 100) {
            // timer 是闭包中的
            let timer = null

            return function () {
                if (timer) {
                    return
                }
                timer = setTimeout(() => {
                    fn.apply(this, arguments)
                    timer = null
                }, delay)
            }
        }
        div1.addEventListener("drag",
            throttle(function (e) {
                console.log(e.offsetX, e.offsetY);
            })
        )
    </script>
</body>

</html>

三、安全

1. 常见的 web 前端攻击方式有哪些？

XSS 跨站请求攻击

跨站脚本（英语：Cross-site scripting，通常简称为：XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。

XSRF/CSRF 跨站请求伪造

全称cross-site request forgery，名为跨站请求伪造，顾名思义就是黑客伪装成用户身份来执行一些非用户自愿的恶意以及非法操作。

小豪boy

关注

1
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
网页加载过程+性能优化+安全

一、网页加载过程1. 加载资源的形式 htm代码。媒体文件，如图片、视频等。 Javascript CSS。 2. 加载资源的过程DNS解析：将域名转化为IP地址。浏览器根据 IP 地址向服务器发起 http 请求。服务器处理 http 请求，并返回给浏览器。3. 渲染页面的过程根据 HTML 代码生成 DOM Tree 。根据 CSS 代码生成 CSSOM 。将 DOM Tree 和 CSSOM 整合形成 Render Tree
复制链接

扫一扫

专栏目录