本文包括：w3c標(biāo)準(zhǔn)会钝、布局方式溜嗜、前端性能優(yōu)化向臀、調(diào)試抓包工具巢墅、瀏覽器兼容*、Web三大標(biāo)準(zhǔn)券膀、安全問題
- w3c標(biāo)準(zhǔn)
- 布局方式
- 前端性能優(yōu)化
- 調(diào)試抓包工具
- 瀏覽器兼容
- Web三大標(biāo)準(zhǔn) -- 可用性君纫、可維護(hù)性、可訪問性
- 八大前端安全問題
【W(wǎng)3C標(biāo)準(zhǔn)】
W3C(World Wide Web Consortium), 萬維網(wǎng)聯(lián)盟由 Tim Berners-Lee 于1994年10月創(chuàng)建芹彬。是一個(gè)對 Web 進(jìn)行標(biāo)準(zhǔn)化的會員組織蓄髓，主要分為三個(gè)部分：結(jié)構(gòu)、表現(xiàn)和行為舒帮。
-- 結(jié)構(gòu)化標(biāo)準(zhǔn)語言包括XHTML和XML双吆。
-- 表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS（層疊樣式表）。
-- 行為標(biāo)準(zhǔn)語言主要包括對象模型（比如DOM和ECMAScript）
使用實(shí)例
當(dāng)頂部為： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
需注意以下情況：（所用前提都是在頂部基礎(chǔ)上而言；崆啊）
1好乐、所有標(biāo)簽用小寫。
2瓦宜、頭文件meta蔚万、link標(biāo)簽。
3临庇、JS調(diào)用：<script src="/wl_inc/main.js" type="text/javascript"></script>
4反璃、表格<table>高度 ：不要使用如height="101"
……
【W(wǎng)eb網(wǎng)頁布局的主要方式】
- 靜態(tài)布局（static layout）
- 流式布局（Liquid Layout）
- 自適應(yīng)布局（Adaptive Layout）
- 響應(yīng)式布局（Responsive Layout）
- 彈性布局（rem/em布局）
| 布局方式 | 屏幕分辨率變化時(shí) | 優(yōu)點(diǎn) | 缺點(diǎn) | 設(shè)計(jì)方法 |
|---|---|---|---|---|
| 靜態(tài) | 網(wǎng)頁布局始終按照最初寫代碼時(shí)的布局來顯示 | 編寫簡單昵慌，沒有兼容性問題 | 不能根據(jù)用戶的屏幕尺寸做出不同的表現(xiàn) | 設(shè)置了min-width，小于或大于會出現(xiàn)滾動條/添加背景 |
| 流式 | 頁面里元素的大小會變化淮蜈，布局不變（柵欄系統(tǒng)--網(wǎng)格系統(tǒng)） | 如果屏幕太大或者太小都會導(dǎo)致元素?zé)o法正常顯示 | 使用%百分比定義寬度斋攀，高度用px來固定住 | |
| 自適應(yīng) | 頁面里面元素的位置會變化(切換不同的靜態(tài)布局)，大小不變 | 使用 @media 媒體查詢給不同尺寸和介質(zhì)的設(shè)備切換不同的樣式 | ||
| 響應(yīng)式 | 頁面里面元素位置和大小都會變 | 適應(yīng)pc和移動端 | （1）媒體查詢有限 （2）要匹配足夠多的屏幕大小梧田，工作量大 |
媒體查詢+流式布局 |
| 彈性 | 見詳解 |
結(jié)論
1.如果只做pc端淳蔼，那么靜態(tài)布局（定寬度）是最好的選擇；
2.如果做移動端裁眯，且設(shè)計(jì)對高度和元素間距要求不高鹉梨，那么彈性布局（rem+js）是最好的選擇，一份css+一份js調(diào)節(jié)font-size搞定穿稳；
3.如果pc存皂，移動要兼容，而且要求很高那么響應(yīng)式布局還是最好的選擇逢艘，前提是設(shè)計(jì)根據(jù)不同的高寬做不同的設(shè)計(jì)旦袋，響應(yīng)式根據(jù)媒體查詢做不同的布局。
詳解：Web網(wǎng)頁布局的主要方式
https://juejin.im/post/59f706a8f265da43094471a7
【性能優(yōu)化主要方式】
前端優(yōu)化的目的
- 從用戶角度而言它改，優(yōu)化能夠讓頁面加載得更快疤孕、對用戶的操作響應(yīng)得更及時(shí)，能夠給用戶提供更為友好的體驗(yàn)搔课。
- 從服務(wù)商角度而言胰柑，優(yōu)化能夠減少頁面請求數(shù)截亦、或者減小請求所占帶寬爬泥，能夠節(jié)省可觀的資源。
優(yōu)化手段
1. 頁面級優(yōu)化
- 減少 HTTP請求數(shù)
一個(gè)完整的請求都需要經(jīng)過 DNS尋址崩瓤、與服務(wù)器建立連接袍啡、發(fā)送數(shù)據(jù)、等待服務(wù)器響應(yīng)却桶、接收數(shù)據(jù)這樣一個(gè) “漫長” 而復(fù)雜的過程境输。- 從設(shè)計(jì)實(shí)現(xiàn)層面簡化頁面
- 合理設(shè)置 HTTP緩存
- 資源合并與壓縮: 盡可能的將外部的腳本、樣式進(jìn)行合并
- CSS Sprites: 合并 CSS圖片
- Inline Images: 將圖片嵌入到頁面或 CSS中
- Lazy Load Images
- 將外部腳本置底（將腳本內(nèi)容在頁面信息內(nèi)容加載后再加載）
- 異步執(zhí)行 inline腳本
- Lazy Load Javascript（只有在需要加載的時(shí)候加載颖系，在一般情況下并不加載信息內(nèi)容嗅剖。）
- 將 CSS放在 HEAD中
- 異步請求 Callback（就是將一些行為樣式提取出來，慢慢的加載信息的內(nèi)容）
- 減少不必要的 HTTP跳轉(zhuǎn)
- 避免重復(fù)的資源請求
2. 代碼級優(yōu)化
- javascript優(yōu)化
(1)將JavaScript腳本放在頁面的底部嘁扼。
(2)將JavaScript和CSS作為外部文件來引用：在實(shí)際應(yīng)用中使用外部文件可以提高頁面速度信粮，因?yàn)镴avaScript和CSS文件都能在瀏覽器中產(chǎn)生緩存。
(3)縮小JavaScript和CSS
(4)刪除重復(fù)的腳本
(5)最小化DOM的訪問：使用JavaScript訪問DOM元素比較慢趁啸。
(6)開發(fā)智能的事件處理程序
(7)javascript代碼注意：謹(jǐn)慎使用with,避免使用eval Function函數(shù),減少作用域鏈查找强缘。
- CSS優(yōu)化
(1)將CSS代碼放在HTML頁面的頂部
(2)避免使用CSS表達(dá)式
(3)使用<link>來代替@import
(4)避免使用Filters
- HTML
(1)使用HTML 來構(gòu)造頁面結(jié)構(gòu)督惰，CSS修飾頁面呈現(xiàn)，JavaScript實(shí)現(xiàn)頁面功能旅掂。
(2)如果能用CSS或JavaScript實(shí)現(xiàn)就少用HTML代碼赏胚。
(3)將CSS和JavaScript文件與HTML 分開存放。這可有助于緩存和調(diào)試商虐。
- 圖像優(yōu)化
(1)優(yōu)化圖片大小
(2)通過CSS Sprites優(yōu)化圖片
(3)不要在HTML中使用縮放圖片
(4)favicon.ico要小而且可緩存
【調(diào)試抓包工具】
什么是抓包觉阅？
抓包就是將網(wǎng)絡(luò)傳輸發(fā)送與接收的數(shù)據(jù)包進(jìn)行截獲、重發(fā)称龙、編輯留拾、轉(zhuǎn)存等操作，也用來檢查網(wǎng)絡(luò)安全鲫尊。
在做接口測試的時(shí)候痴柔，經(jīng)常需要驗(yàn)證發(fā)送的消息是否正確，或者在出現(xiàn)問題的時(shí)候疫向，查看手機(jī)客戶端發(fā)送給server端的包內(nèi)容是否正確咳蔚，就需要用到抓包工具。
常用工具
- Fiddler：在windows上運(yùn)行的程序搔驼，專門用來捕獲HTTP谈火，HTTPS的。使用 C# 語言開發(fā)
- wireshark：能獲取HTTP舌涨，也能獲取HTTPS糯耍，但是不能解密HTTPS，所以wireshark看不懂HTTPS中的內(nèi)容囊嘉。
- Charles：可以在 Mac 平臺使用温技， Java 語言開發(fā)
【瀏覽器兼容】
瀏覽器的兼容性無非還是樣式兼容性（css），交互兼容性（javascript）扭粱，瀏覽器 hack 三個(gè)方面舵鳞。
1. 樣式兼容性（css）方面
2. 交互兼容性（javascript）
3. 瀏覽器 hack
判斷 IE 瀏覽器版本/Safari 瀏覽器/ Chrome 瀏覽器
/* IE */
<!--[if IE 8]> ie8 <![endif]-->
<!--[if IE 9]> 騷氣的 ie9 瀏覽器 <![endif]-->
/* Safari */
var isSafari = /a/.__proto__=='//';
/* Chrome */
var isChrome = Boolean(window.chrome);
【W(wǎng)eb標(biāo)準(zhǔn)】
1. 可用性
產(chǎn)品是否容易上手，用戶能否完成任務(wù)琢蛤，效率如何蜓堕，以及這過程中用戶的主觀感受可好，是從用戶的角度來看產(chǎn)品的質(zhì)量博其√撞牛可用性好意味著產(chǎn)品質(zhì)量高，是企業(yè)的核心競爭力慕淡。
2. 可維護(hù)性
一般包含兩個(gè)層次背伴，一是當(dāng)系統(tǒng)出現(xiàn)問題時(shí)，快速定位并解決問題的成本，成本低則可維護(hù)性好挂据。二是代碼是否容易被人理解以清，是否容易修改和增強(qiáng)功能∑樘樱可維護(hù)性和可復(fù)用性掷倔、可擴(kuò)展性等有交叉的地方。構(gòu)建可維護(hù)性好的代碼个绍，對企業(yè)的長期發(fā)展非常重要勒葱。
3. 可訪問性
可訪問性就是對所有人一視同仁，無論他們是否有殘障巴柿。
四個(gè)可訪問性標(biāo)準(zhǔn)：
- 可感知：人們可以通過適合自己的媒體來獲知網(wǎng)頁內(nèi)容凛虽。比如應(yīng)當(dāng)讓盲人得以收聽頁面內(nèi)容。例如广恢，圖像應(yīng)該有文本對應(yīng)體凯旋。
- 可操作：人們可以與 web 應(yīng)用程序或內(nèi)容進(jìn)行交互。例如钉迷，用戶應(yīng)該可以不用鼠標(biāo)也能與某個(gè)網(wǎng)站進(jìn)行交互至非，并且可以通過屏幕閱讀器來進(jìn)行導(dǎo)航。
- 可理解：使用者可以弄懂頁面內(nèi)容和用戶界面糠聪。例如荒椭，正文不應(yīng)該比它需要的更加復(fù)雜，且網(wǎng)站應(yīng)以可預(yù)測的方式來運(yùn)行舰蟆。
- 健壯性：所提供的一切服務(wù)都應(yīng)當(dāng)不受平臺或操作系統(tǒng)的限制趣惠。這樣就可以避免人們提供一些不太完善的服務(wù)，這些服務(wù)會因?yàn)橛布?軟件的限制而導(dǎo)致大多數(shù)人都無法使用身害。例如味悄，不同設(shè)備上的瀏覽器能夠一起使用網(wǎng)站，且導(dǎo)航應(yīng)該是一致的题造。
參考文章：
https://www.cnblogs.com/uedt/articles/1809126.html
https://www.cnblogs.com/radom/archive/2011/03/26/1996093.html
【八大前端安全問題】
-
XSS (Cross Site Script)）
瀏覽器錯誤的將攻擊者提供的用戶輸入數(shù)據(jù)當(dāng)做JavaScript腳本給執(zhí)行了傍菇。 -
CSRF（Cross-Site Request Forgery）
攻擊者可以盜用你的登陸信息猾瘸，以你的身份模擬發(fā)送各種請求界赔。 -
SQL 注入漏洞（SQL Injection）
可以用它來從數(shù)據(jù)庫獲取敏感信息，或者利用數(shù)據(jù)庫的特性執(zhí)行添加用戶牵触，導(dǎo)出文件等一系列惡意操作淮悼，甚至有可能獲取數(shù)據(jù)庫乃至系統(tǒng)用戶最高權(quán)限。 -
命令行注入漏洞
指的是攻擊者能夠通過 HTTP 請求直接侵入主機(jī)揽思，執(zhí)行攻擊者預(yù)設(shè)的 shell 命令袜腥。 -
DDoS（Distributed Denial of Service）
分布式拒絕服務(wù)，利用大量的請求造成資源過載钉汗，導(dǎo)致服務(wù)不可用羹令。 -
流量劫持
分為DNS 劫持和HTTP 劫持鲤屡，目的都是一樣的，就是當(dāng)用戶訪問某網(wǎng)站的時(shí)候福侈，給你展示的并不是或者不完全是網(wǎng)站提供的 “內(nèi)容”酒来。 -
DNS 劫持
域名劫持。如果當(dāng)用戶通過某一個(gè)域名訪問一個(gè)站點(diǎn)的時(shí)候肪凛，被篡改的 DNS 服務(wù)器返回的是一個(gè)惡意的釣魚站點(diǎn)的 IP堰汉，用戶就被劫持到了惡意釣魚站點(diǎn)，然后繼而會被釣魚輸入各種賬號密碼信息伟墙，泄漏隱私翘鸭。 -
HTTP劫持
當(dāng)用戶訪問某個(gè)站點(diǎn)的時(shí)候會經(jīng)過運(yùn)營商網(wǎng)絡(luò)，而不法運(yùn)營商和黑產(chǎn)勾結(jié)能夠截獲 HTTP 請求返回內(nèi)容戳葵，并且能夠篡改內(nèi)容就乓，然后再返回給用戶，從而實(shí)現(xiàn)劫持頁面拱烁，輕則插入小廣告档址，重則直接篡改成釣魚網(wǎng)站頁面騙用戶隱私。
