(十二)运行环境(加载、性能优化、安全)【这些会了,你就可以飞了】
生活随笔
收集整理的這篇文章主要介紹了
(十二)运行环境(加载、性能优化、安全)【这些会了,你就可以飞了】
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
運行環(huán)境
- 運行環(huán)境
- 網(wǎng)頁加載過程
- 加載資源的形式
- 加載資源的過程
- 渲染頁面的過程
- 性能優(yōu)化、體驗優(yōu)化
- 原則
- 從何入手
- 讓加載更快
- 讓渲染更快
- 安全
- XSS跨站請求攻擊
- XXS攻擊
- XSS預防
- XSRF跨站請求偽造
- XSRF攻擊
- XSRF預防
運行環(huán)境
- 即瀏覽器
- 下載網(wǎng)頁代碼,渲染出頁面,期間會執(zhí)行若干JS
- 要保證代碼在瀏覽器中,穩(wěn)定且高效
網(wǎng)頁加載過程
加載資源的形式
- html形式
- 媒體文件,如圖片、視頻等
- javascript、css等
加載資源的過程
- DNS解析(域名服務(wù)解析):域名->IP地址,域名統(tǒng)一好記,IP地址不同區(qū)域因代理可能不一致不好標識,要轉(zhuǎn)IP地址是因為瀏覽器真正訪問時訪問的是IP地址
- 瀏覽器根據(jù)IP地址向服務(wù)器發(fā)起http請求
- 服務(wù)器處理http請求,并返回給瀏覽器
渲染頁面的過程
- 根據(jù)HTML代碼生成DOM Tree
- 根據(jù)CSS代碼生成CSSOM
- 根據(jù)DOM Tree和CSSOM整合形成Render Tree
- 根據(jù)Render Tree渲染頁面
- 遇到
性能優(yōu)化、體驗優(yōu)化
原則
- 多使用內(nèi)存、緩存或其他方法
- 減少CPU計算量,減少網(wǎng)絡(luò)加載耗時
- 適用于所有編程的性能優(yōu)化,空間換時間
從何入手
讓加載更快
- 減少資源體積,壓縮代碼,例如:webpack,服務(wù)器端也會進行g(shù)zip壓縮,大約會壓縮三分之一
- 減少訪問次數(shù),合并代碼(精靈圖、雪碧圖、webpack),SSR服務(wù)端渲染,緩存(webpack的output加contenthash產(chǎn)生數(shù)字文件主要有這個效果)
- 使用更快的網(wǎng)絡(luò),CDN
緩存
- 靜態(tài)資源加hash后綴,根據(jù)文件內(nèi)容計算hash;
- 文件內(nèi)容不變,則hash不變,則url不變
- url和文件不變,則會自動觸發(fā)http緩存機制,返回304
SSR
- 服務(wù)端渲染:將網(wǎng)頁和數(shù)據(jù)一起加載,一起渲染
- 非SSR(前后端分離):先加載網(wǎng)頁,再加載數(shù)據(jù),再渲染數(shù)據(jù)
- 早先的JSP、ASP、PHP,現(xiàn)在的Vue React SSR借助一些Node的能力來做
讓渲染更快
- css放在head中,js放在body最后
- 盡早開始執(zhí)行JS,用DOMContentLoaded觸發(fā)
- 懶加載(圖片懶加載,上滑加載更多)
- 對DOM查詢進行緩存,for循環(huán)中,先緩存DOM查詢結(jié)果,緩存length
- 頻繁DOM操作,合并到一起插入DOM結(jié)構(gòu)
- 節(jié)流throttle防抖debounce
防抖
- 監(jiān)聽一個輸入框,文字變化后觸發(fā)change事件
- 直接用keyup事件,會頻發(fā)觸發(fā)change事件
- 防抖:用戶輸入結(jié)束或暫停時,才會觸發(fā)change事件
節(jié)流
- 拖拽一個元素時,要隨時拿到該元素被拖拽的位置
- 直接用drag事件,則會頻繁觸發(fā),很容易導致卡頓
- 節(jié)流:無論拖拽速度多快,都會每個100ms觸發(fā)一次
安全
XSS跨站請求攻擊
XXS攻擊
1、一個博客網(wǎng)站,我發(fā)表一篇博客,其中嵌入<script>腳本 2、腳本內(nèi)容:獲取cookie,發(fā)布到我的服務(wù)器,(服務(wù)器配合跨域) 3、發(fā)布這篇博客,有人查看它,我輕松收割訪問者的cookieXSS預防
1、替換特殊字符,如<變成<>變?yōu)?span id="ozvdkddzhkzd" class="token operator">> 2、<script>變?yōu)?span id="ozvdkddzhkzd" class="token operator"><script>,直接顯示,而不會作為腳本執(zhí)行 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
- 我向你發(fā)送一封電子郵件,郵件標題很吸引人
- 但郵件正文隱藏著<img src=xxx.com/pay?id=200 />
- 你一查看郵件就幫我購買了id是200的商品
XSRF預防
- 使用POST接口
- 增加驗證,例如密碼、短信驗證碼、指紋等
總結(jié)
以上是生活随笔為你收集整理的(十二)运行环境(加载、性能优化、安全)【这些会了,你就可以飞了】的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: ai表格怎么简化? ai简化命令的使用方
- 下一篇: (十一)开发环境【不会这些,你就会被认定