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

编程问答

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

發布時間：2023/12/31 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了（十二）运行环境（加载、性能优化、安全）【这些会了，你就可以飞了】小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

運行環境

運行環境
網頁加載過程
- - - 加載資源的形式
    - 加載資源的過程
    - 渲染頁面的過程
性能優化、體驗優化
- - 原則
  - 從何入手
  - - 讓加載更快
    - 讓渲染更快
安全
- - 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接口
增加驗證，例如密碼、短信驗證碼、指紋等

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： ai表格怎么简化? ai简化命令的使用方
下一篇：（十）HTTP协议【前后端分离的时代，网

3atv精品不卡视频,97人人超碰国产精品最新,中文字幕av一区二区三区人妻少妇,久久久精品波多野结衣,日韩一区二区三区精品

编程问答

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

運行環境

運行環境

網頁加載過程

加載資源的形式

加載資源的過程

渲染頁面的過程

性能優化、體驗優化

原則

從何入手

讓加載更快

讓渲染更快

安全

XSS跨站請求攻擊

XXS攻擊

XSS預防

XSRF跨站請求偽造

XSRF攻擊

XSRF預防

總結