當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時間：2023/12/31 编程问答 54 豆豆

生活随笔收集整理的這篇文章主要介紹了（十二）运行环境（加载、性能优化、安全）【这些会了，你就可以飞了】小編覺得挺不錯的,現(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ā)

<!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>運行環(huán)境演示</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') } //頁面的全部資源加載完才會執(zhí)行，包括圖片、視頻等 window.addEventListener('load', function () {console.log('window loaded') }) //DOM渲染完即可執(zhí)行，此時圖片、視頻可能還沒有加載完 document.addEventListener('DOMContentLoaded', function () {console.log('dom content loaded') })

懶加載（圖片懶加載，上滑加載更多）
對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事件

<!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(() => { // // 模擬觸發(fā) 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))

節(jié)流

拖拽一個元素時，要隨時拿到該元素被拖拽的位置
直接用drag事件，則會頻繁觸發(fā)，很容易導致卡頓
節(jié)流：無論拖拽速度多快，都會每個100ms觸發(fā)一次

<!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) // })// 節(jié)流 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、一個博客網(wǎng)站，我發(fā)表一篇博客，其中嵌入<script>腳本 2、腳本內(nèi)容：獲取cookie，發(fā)布到我的服務(wù)器，(服務(wù)器配合跨域) 3、發(fā)布這篇博客，有人查看它，我輕松收割訪問者的cookie

XSS預防

1、替換特殊字符，如<變成<>變?yōu)?span id="ozvdkddzhkzd" class="token operator">> 2、<script>變?yōu)?span id="ozvdkddzhkzd" class="token operator">&ltscript&gt，直接顯示，而不會作為腳本執(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接口
增加驗證，例如密碼、短信驗證碼、指紋等

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的（十二）运行环境（加载、性能优化、安全）【这些会了，你就可以飞了】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： ai表格怎么简化? ai简化命令的使用方
下一篇：（十一）开发环境【不会这些，你就会被认定

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

编程问答

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

運行環(huán)境

運行環(huán)境

網(wǎng)頁加載過程

加載資源的形式

加載資源的過程

渲染頁面的過程

性能優(yōu)化、體驗優(yōu)化

原則

從何入手

讓加載更快

讓渲染更快

安全

XSS跨站請求攻擊

XXS攻擊

XSS預防

XSRF跨站請求偽造

XSRF攻擊

XSRF預防

總結(jié)