–瀏覽器可以通過訪問鏈結來得到頁面內容
–通過繪製和渲染,顯示出頁面最終樣子
整個過程我們需要考慮
-頁面載入
-效能優化
-安全性
頁面載入
載入資源的形式
-輸入url(或頁面跳轉)載入html
載入乙個資源的過程
-瀏覽器根據dns伺服器得到網域名稱的ip位址
-向這個ip的機器傳送http(s)請求
-伺服器收到請求後處理並返回
-瀏覽器拿到返回的內容進行渲染
瀏覽器渲染頁面的過程
-根據html結構生成dom tree
-根據css生成cssom
-將dom和cssom整合生成rendertree
-根據rendertree開始渲染和展示
-遇到時會執行並阻止渲染
window.onload和domcontentloaded
效能優化
從大方向原則來說
-多使用記憶體、快取等其他方法
-減少cpu計算、減少網路
從**入手
-載入頁面和靜態資源
-靜態資源的壓縮合併
-靜態資源快取
-使用cdn讓資源載入更快(cdn能找到就近的伺服器去請求資源)
-使用ssr後端渲染,資料直接載入到html中而不用去請求ajax
-頁面渲染
-css放前,js放後面
-減少dom查詢,對dom查詢做快取
-減少dom操作,多個操作盡量合併在一起執行
-事件截流
-盡早操作(如domcontentloaded)
-資源合併:
如請求a.js、b.js、c.js合併請求abc.js (用構建工具)
-快取 通過鏈結名稱控制快取
-cdn
-ssr後端渲染(vue、react),其實jsp、php、asp都屬於後端渲染
-懶載入
個自定義屬性裡面,當需要的時候img.src=img.getattribute(自定義屬性)
-快取dom查詢
未快取for(let i = 0;i
-事件截流
-domcontentloaded
安全性
一般來說安全問題有專門人員做
前端安全問題頭哪些??
-xxs跨站請求攻擊
-如在某部落格寫文章時偷偷插入一段,**中獲取cookie傳送到自己的伺服器,別人檢視文章時,該指令碼就會執行,瀏覽者的cookie會傳送到攻擊者的伺服器
-解決:
·前端替換關鍵字,例如《替換為< >替換為》
·後端替換
-xsrf跨站請求偽造
-已登陸某購物**,付費介面是xx.com/pay?id=100,且沒有任何驗證,然後收到乙個郵件,隱藏了乙個
-解決·增加驗證流程(指紋,密碼,簡訊驗證碼...)
安全性與效能隔離
保證分布式計算的安全性,使攻擊程序無法訪問資源 1.rpc鑑別訊息是否合法 capability訪問控制 任意兩個角色間有金鑰,程序通訊前先對金鑰 動態token 口令 程序級沙箱隔離 無法看到該使用者組不需要的資源 2.效能隔離,三種虛擬化方法的比較 虛擬機器 kvm 完全虛擬化,隔離最好 資源配...
登入頁面安全性的研究
1 登入時對使用者名稱 密碼 驗證碼的合法性驗證 2 連續登入失敗後的處理策略 比如 連續失敗3次,鎖定賬號一段時間 3 使用者名稱的規則 4 密碼策略 比如 長度限制 字元限制 不能與賬號相同等 5 密碼輸入框不允許貼上複製 6 使用者登入密碼是否是可見 7 是否有密碼過期策略 8 密碼是否採取符...
web頁面載入效能優化之 gzip
web專案頁面載入效能優化可以通過開啟服務端的gzip功能來實現,目前大部分客戶端瀏覽器request內建 content encoding gzip 屬性,如果沒有可以在request中配 置加上。伺服器端tomcat 和weblogic 配置方式分別如下 1.tomcat伺服器在server.x...