网页加载过程+性能优化+安全
Posted 小豪boy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页加载过程+性能优化+安全相关的知识，希望对你有一定的参考价值。
一、网页加载过程
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，名为跨站请求伪造，顾名思义就是黑客伪装成用户身份来执行一些非用户自愿的恶意以及非法操作。
以上是关于网页加载过程+性能优化+安全的主要内容，如果未能解决你的问题，请参考以下文章