系列文章目录
文章目录
运行环境
一、在哪里运行
- 运行环境即浏览器（server 端有nodejs）
- 下载网页源码，渲染出页面，期间会执行若干 JS
- 要保证代码在浏览器中：稳定且高效
二、 网页是如何加载并渲染出来的
1、资源的形式
- html 代码
- 媒体文件，如图片、视频等
- JavaScript CSS
2、加载过程
- DNS 解析：域名 -> IP 地址
- 浏览器根据 IP地址向服务端发起 http 请求
- 服务器处理 http 请求，并返回给浏览器
3、渲染过程
- 根据 HTML 代码生成 DOM Tree（文档对象模型树）
- 根据 CSS 代码生成 CSSOM（CSS对象模型）
- DOM 树和 CSSOM 可以并行构建
- 将 DOM Tree 和 CSSOM 整合形成 Render Tree（渲染树）
- 根据 Render Tree 渲染页面
- 遇到
<script>则暂停渲染，优先加载并执行 JS 代码，完成再继续 - 直至把 Render Tree 渲染完成
4、window.onload 和 DOMContentLoaded 区别
- window.onload：页面的全部资源加载完才会执行，包括图片、视频等
- DOMContentLoaded：DOM 渲染完即可执行，此时图片、视频还可能没有加载完
window.addEventListener('load', function() {
// 页面的全部资源加载完才会执行，包括图片、视频等
})
document.addEventListener('DOMContentLoaded', function() {
// DOM 渲染完即可执行，此时图片、视频还可能没有加载完
})
二、性能优化
1、性能优化原则
- 多使用内存、缓存或其他方法
- 减少CPU 计算量，减少网络加载耗时
- 用空间换时间
2、性能优化 — 让加载更快
- 减少资源体积：压缩代码
- 减少访问次数：合并代码，SSR 服务器端渲染，缓存
- 使用更快的网络：CDN（分布在不同区域的边缘节点服务器群组成的分布式网络）
3、性能优化 — 让渲染更快
- CSS 放在 head，JS 放在 body 最下面
- 尽早开始执行 JS，用 DOMContentLoaded 触发
- 懒加载（图片懒加载，上滑加载更多）
- 对 DOM 查询进行缓存
- 频繁 DOM 操作，合并到一起插入 DOM 结构
- 节流 throttle 防抖 debounce
4、前端性能优化示例
资源合并：
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
// 合并为
<script src="abc.js"></script>
缓存：
- 静态资源加 hash 后缀，根据文件内容计算 hash（webpack中的配置）
- 文件内容不变，则 hash 不变，则 url 不变
- url 和文件不变，则会自动触发 http 缓存机制，返回 304
CDN：
SSR：
- 服务器端渲染：将网页和数据一起加载，一起渲染
- 非 SSR（前后端分离）：先加载网页，再加载数据，再渲染数据
- 早先的 JSP ASP PHP，现在的 vue react SSR
懒加载：
先给一个容易加载的图片，等加载完成后把真正的图片展现出来
<img id="img1" src="preview.png" data-realsrc="abc.png">
let img1 = document.getElementById('img1')
img1.src = img1.getAttribute('data-realsrc')
缓存 DOM 查询：
多个 DOM 操作一起插入到 DOM 结构：
尽早开始 JS 执行：
window.addEventListener('load', function() {
// 页面的全部资源加载完才会执行，包括图片、视频等
})
document.addEventListener('DOMContentLoaded', function() {
// DOM 渲染完即可执行，此时图片、视频还可能没有加载完
})
5、防抖 debounce
- 监听一个输入框的，文字变化后触发 change 事件
- 直接用 keyup 事件，则会频繁触发 change 事件
- 防抖：用户输入结束或暂停时，才会触发 change 事件
示例：input 框的防抖
<input type="text" id="input1">
let input1 = document.getElementById('input1')
let timer = null
input1.addEventListener('keyup', function(value) {
if(timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
// 模拟触发 change 事件
console.log(input1.value)
// 清空定时器
timer = null
}, 500)
})
封装防抖 debounce 函数：
<input type="text" id="input1">
let 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(() => {
console.log(input1.value)
}, 1000))
6、节流 throttle
- 拖拽一个元素时，要随时拿到该元素被拖拽的位置
- 直接用 drag 事件，则会频繁触发，很容易导致卡顿
- 节流：无论拖拽速度多快，都会每隔 xxxms 触发一次
示例：拖拽一个 div
#div1 {
border: 1px solid #ccc;
width: 200px;
height: 100px;
}
<div id="div1" draggable="true">可拖拽</div>
const div1 = document.getElementById('div1')
let timer = null
div1.addEventListener('drag', function (event) {
if(timer) {
return
}
timer = setTimeout(() => {
console.log(event.offsetX, event.offsetY)
timer = null
}, 100)
})
封装节流 throttle 函数：
#div1 {
border: 1px solid #ccc;
width: 200px;
height: 100px;
}
<div id="div1" draggable="true">可拖拽</div>
const div1 = document.getElementById('div1')
function throttle(fn, delay = 100) {
let timer = null
return function() {
if(timer) {
return
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
div1.addEventListener('drag', throttle(function (event) {
console.log(event.offsetX, event.offsetY)
},))
三、常见的 web 前端攻击方式
- XSS 跨站请求攻击
- XSRF 跨站请求伪造
1、XXS 攻击
- 一个博客网站，我发表一篇博客，其中嵌入
<script></script>脚本 - 脚本内容：获取 cookie，发送到我的服务器（服务器配合跨域）
- 发表这篇博客，有人查看它，我轻松收割访问者的 cookie
2、XXS 预防
- 替换特殊字符，如 < 变为
<> 变为> <script>变为<script>直接显示，而不会作为脚本执行- 前端要替换，后端也要替换，都做更保险
示例：脚本不会执行，直接在页面显示
<script>alert(document.cookie)<script>
3、XSRF 攻击
- 我向你发送一封电子邮件，邮件标题很吸引人
- 但邮件正文隐藏着
<img src="xxx.com/pay?id=200" /> - 你一查看邮件，就帮我购买了 id 是 200 的商品
4、XSRF 预防
- 使用 post 接口
- 增加验证，例如密码、短信验证码、指纹等