日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

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

编程问答

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

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

運行環境

  • 運行環境
  • 網頁加載過程
        • 加載資源的形式
        • 加載資源的過程
        • 渲染頁面的過程
  • 性能優化、體驗優化
      • 原則
      • 從何入手
        • 讓加載更快
        • 讓渲染更快
  • 安全
      • 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接口
  • 增加驗證，例如密碼、短信驗證碼、指紋等
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

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