运行环境（加载、性能优化、安全）【这些会了，你就可以飞了】
发布时间：2025-12-10 11:51:05
浏览次数：11
运行环境
运行环境
- 即浏览器
- 下载网页代码，渲染出页面，期间会执行若干JS
- 要保证代码在浏览器中，稳定且高效
网页加载过程
加载资源的形式
- html形式
- 媒体文件，如图片、视频等
- javascript、css等
加载资源的过程
- DNS解析（域名服务解析）：域名->IP地址，域名统一好记，IP地址不同区域因代理可能不一致不好标识，要转IP地址是因为浏览器真正访问时访问的是IP地址
- 浏览器根据IP地址向服务器发起http请求
- 服务器处理http请求，并返回给浏览器
渲染页面的过程
- 根据HTML代码生成DOM Tree
- 根据CSS代码生成CSSOM
- 根据DOM Tree和CSSOM整合形成Render Tree
- 根据Render Tree渲染页面
- 遇到
性能优化、体验优化
原则
- 多使用内存、缓存或其他方法
- 减少CPU计算量，减少网络加载耗时
- 适用于所有编程的性能优化，空间换时间
从何入手
让加载更快
- 减少资源体积，压缩代码，例如：webpack，服务器端也会进行gzip压缩，大约会压缩三分之一
- 减少访问次数，合并代码（精灵图、雪碧图、webpack），SSR服务端渲染，缓存（webpack的output加contenthash产生数字文件主要有这个效果）
- 使用更快的网络，CDN
缓存
- 静态资源加hash后缀，根据文件内容计算hash；
- 文件内容不变，则hash不变，则url不变
- url和文件不变，则会自动触发http缓存机制，返回304
SSR
- 服务端渲染：将网页和数据一起加载，一起渲染
- 非SSR（前后端分离）：先加载网页，再加载数据，再渲染数据
- 早先的JSP、ASP、PHP,现在的Vue React SSR借助一些Node的能力来做
让渲染更快
- css放在head中,js放在body最后
- 尽早开始执行JS，用DOMContentLoaded触发
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>运行环境 演示</title></head><body><p>一段文字 1</p><p>一段文字 2</p><p>一段文字 3</p><imgid="img1"src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570191150419&di=37b1892665fc74806306ce7f9c3f1971&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1411%2F13%2Fc14%2F26229_1415883419758.jpg"/><script src="./index.js"></script></body></html>const img1 = document.getElementById('img1')img1.onload = function () {console.log('img loaded')}//页面的全部资源加载完才会执行，包括图片、视频等window.addEventListener('load', function () {console.log('window loaded')})//DOM渲染完即可执行，此时图片、视频可能还没有加载完document.addEventListener('DOMContentLoaded', function () {console.log('dom content loaded')})
- 懒加载（图片懒加载，上滑加载更多）
- 对DOM查询进行缓存，for循环中，先缓存DOM查询结果，缓存length
- 频繁DOM操作，合并到一起插入DOM结构
- 节流throttle防抖debounce
防抖
- 监听一个输入框，文字变化后触发change事件
- 直接用keyup事件，会频发触发change事件
- 防抖：用户输入结束或暂停时，才会触发change事件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>debounce 演示</title></head><body><input type="text" id="input1"><script src="./debounce.js"></script></body></html>const input1 = document.getElementById('input1')// let timer = null// input1.addEventListener('keyup', function () {// if (timer) {// clearTimeout(timer)// }// timer = setTimeout(() => {// // 模拟触发 change 事件// console.log(input1.value)// // 清空定时器// timer = null// }, 500)// })// 防抖function debounce(fn, delay = 500) {// timer 是闭包中的let timer = nullreturn 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))
节流
- 拖拽一个元素时，要随时拿到该元素被拖拽的位置
- 直接用drag事件，则会频繁触发，很容易导致卡顿
- 节流：无论拖拽速度多快，都会每个100ms触发一次
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>throttle 演示</title><style>#p1 {border: 1px solid #ccc;width: 200px;height: 100px;}</style></head><body><p id="p1" draggable="true">可拖拽<p><script src="./throttle.js"></script></body></html>const p1 = document.getElementById('p1')// let timer = null// p1.addEventListener('drag', function (e) {// if (timer) {// return// }// timer = setTimeout(() => {// console.log(e.offsetX, e.offsetY)// timer = null// }, 100)// })// 节流function throttle(fn, delay = 100) {let timer = nullreturn function () {if (timer) {return}timer = setTimeout(() => {fn.apply(this, arguments)timer = null}, delay)}}p1.addEventListener('drag', throttle(function (e) {console.log(e.offsetX, e.offsetY)}))p1.addEventListener('drag', function(event) {})
安全
XSS跨站请求攻击
XXS攻击
1、一个博客网站，我发表一篇博客，其中嵌入<script>脚本2、脚本内容：获取cookie，发布到我的服务器，(服务器配合跨域)3、发布这篇博客，有人查看它，我轻松收割访问者的cookie
XSS预防
1、替换特殊字符，如<变成<>变为>2、<script>变为<script>，直接显示，而不会作为脚本执行3、前端要替换，后端也要替换，都做总不会有错 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>xss 演示</title></head><body><p>一段文字1</p><p>一段文字2</p><p>一段文字3</p><script>alert(document.cookie);</script></body></html>
XSRF跨站请求伪造
XSRF攻击
- 你正在购物，看中了某个商品，商品id是100
- 付费接口是xxx.com/pay?id=100,但没有任何验证
- 我是攻击者，看中了一个商品，id是200
- 我向你发送一封电子邮件，邮件标题很吸引人
- 但邮件正文隐藏着<img src=xxx.com/pay?id=200 />
- 你一查看邮件就帮我购买了id是200的商品
XSRF预防
- 使用POST接口
- 增加验证，例如密码、短信验证码、指纹等
创作挑战赛新人创作奖励来咯，坚持创作打卡瓜分现金大奖
微信便捷交流