运行环境

运行环境
网页加载过程
- 加载资源的形式
- 加载资源的过程
- 渲染页面的过程
性能优化、体验优化
- 原则
- 从何入手
- - 让加载更快
  - 让渲染更快
安全
- 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、替换特殊字符，如<变成&lt;>变为&gt;
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>&lt;script&gt;alert(document.cookie);&lt;/script&gt;</body>
</html>

XSRF跨站请求伪造

XSRF攻击

你正在购物，看中了某个商品，商品id是100
付费接口是xxx.com/pay?id=100,但没有任何验证
我是攻击者，看中了一个商品，id是200
我向你发送一封电子邮件，邮件标题很吸引人
但邮件正文隐藏着<img src=xxx.com/pay?id=200 />
你一查看邮件就帮我购买了id是200的商品

XSRF预防

使用POST接口
增加验证，例如密码、短信验证码、指纹等

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

H5缓存机制浅析-移动端Web加载性能优化【干货】
转载:H5缓存机制浅析-移动端Web加载性能优化[干货] 作者:贺辉超,腾讯游戏平台与社区产品部高级工程师目录 1 H5缓存机制介绍 2 H5缓存机制原理分析 2.1 浏览器缓存机制 2.2 Do ...
关于图片加载性能优化总结
Android 图片加载性能优化总结一.Android Bitmap加载大尺寸图片优化: 压缩原因: 1.imageview大小如果是200*300那么加载个2000*3000的图片到内存中显然是 ...
微信小程序运行环境加载失败
真机调试报错:超时(104),运行环境加载失败(2101) 原因:开发工具太老了,更新就好了,,,,,, 无语
微信小程序运行环境加载失败(2,101)
华为Mate9,EMUI 9.0.1,Android 9.测试微信小程序的时候,扫体验版小程序,提示: 运行环境加载失败(2,101) 然而各种正式版小程序无此问题,只有体验版/调试版小程序有该现象. ...
React 16 加载性能优化指南
关于 React 应用加载的优化,其实网上类似的文章已经有太多太多了,随便一搜就是一堆,已经成为了一个老生常谈的问题. 但随着 React 16 和 Webpack 4.0 的发布,很多过去的优化手段 ...
清除浏览器缓存之后为什么还是显示旧的html页面_H5缓存机制浅析-移动端Web加载性能优化...
1 H5缓存机制介绍 H5,即HTML5,是新一代的HTML标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5引入的离线存储,这意味着 web 应用可进行缓存,并可在没 ...
H5缓存机制浅析-移动端Web加载性能优化
1 H5缓存机制介绍 H5,即HTML5,是新一代的HTML标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5引入的离线存储,这意味着 web 应用可进行缓存,并可在没 ...
web前端网页加载性能优化大全
web前端性能优化 - - 如何提高网页加载速度文章目录 web前端性能优化 --- --- 如何提高网页加载速度 1. 减少DNS查找 2. 使用CDN托管资源 3. 减少Http请求浏览器 ...
nuxt解决首屏加载慢问题_滴普大前端 | 滴普是如何实现首屏加载性能优化的？...
决定优化方向首先打开 Inspect - Network 查看请求情况,从图片可以看出,DOMContentLoaded 时间为 2.67s,Load 时间为 3.45s,资源交换为 2.4MB. ...
iframe异步加载性能优化及无阻塞加载
我们会经常使用iframes来加载第三方的内容.广告或者插件.使用iframe是因为它可以和主页面并行加载,不会阻塞主页面. iframe会阻塞主页面的onload事件主页面和iframe共享同一个 ...

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

运行环境

运行环境

网页加载过程

加载资源的形式

加载资源的过程

渲染页面的过程

性能优化、体验优化

原则

从何入手

让加载更快

让渲染更快

安全

XSS跨站请求攻击

XXS攻击

XSS预防

XSRF跨站请求伪造

XSRF攻击

XSRF预防

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

最新文章

热门文章