（十二）运行环境（加载、性能优化、安全）【这些会了，你就可以飞了】

新闻资讯老翟笔记小编 2024-03-07 16:50:23 52 0

老翟笔记今日分享的是:（十二）运行环境（加载、性能优化、安全）【这些会了，你就可以飞了】

运行环境运行环境网页加载过程加载资源的形式加载资源的过程渲染页面的过程性能优化、体验优化原则从何入手让加载更快让渲染更快安全 XSS跨站请求攻击 XXS攻击 XSS预防 XSRF跨站请求伪造 XSRF攻击 XSRF预防运行环境即浏览器下载网页代码，渲染出页面，期间会执行若干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>#div1 { border: 1px solid #ccc;width: 200px;height: 100px;}</style></head><body><div id="div1" draggable="true">可拖拽<div><script src="./throttle.js"></script></body> </html>const div1 = document.getElementById('div1')// let timer = null // div1.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)} }div1.addEventListener('drag', throttle(function (e) { console.log(e.offsetX, e.offsetY) }))div1.addEventListener('drag', function(event) { }) 安全 XSS跨站请求攻击 XXS攻击 1、一个博客网站，我发表一篇博客，其中嵌入<script>脚本 2、脚本内容：获取cookie，发布到我的服务器，(服务器配合跨域) 3、发布这篇博客，有人查看它，我轻松收割访问者的cookie XSS预防 1、替换特殊字符，如<变成<>变为> 2、<script>变为&ltscript&gt，直接显示，而不会作为脚本执行 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接口增加验证，例如密码、短信验证码、指纹等

本文结束，感谢您的阅读和支持，希望以上内容能给你带来帮助。本文章来自网络，由老翟笔记小编团队整理发布。