????? ??? ??? ? ???? ?? ?????.
???? ??:
??
?? ??
?? ??
????? ??
gzip [????? ????? nginx? Apache? ?????, ??? ??? ?? ? ?? ? ???]
?? ??
cdn (????? ??? ??? ?? ?? ? ?? ?? ??? ?? ??? ????)
??
sql ?? [?? ??? ??]
??:
??? ??? ???? ??????. ????!
??:
?? 1: http ?? ??, ???, CSS ?? ??
?? 2: ?? ??: CDN ??, ?? js ? CSS ??, Exp ??. ires ??? ????, DNS ??? ???, Etag? ????, Ajax ??? ?????.
?? 3: ??? ??: GZIP ???, js ???, ?? ???? ??, ??? ???.
?? 4: ??? ??: ??? ???? ???? ??? js? ????, ??? ? ?? ?? ??? ?? ????.
?? 5. CSS ??? ??? ????? ????
??? ?? ???? ?????? ???? ? ?? ?? ??? ? ?? ????. ?? ?? ???? ???
??:
XSS
http ??? ??? ?? ????? HTML ?? ?? ??? ??? ?? ??? ????.
????? ??? ??? ?? CSS
`JavaScript` ? ?? ??? ??, ?? ? ????? ?? ??? ?? ??? ????CSS
`JavaScript`等文件壓縮合并打包,減少源文件的數(shù)量和體積
將多張小圖片制作成精靈圖
將資源轉(zhuǎn)換為base64
編碼
使用緩存可以加快網(wǎng)頁打開速度,有效減少http請求
使用懶加載,按需加載對應(yīng)資源
使用CDN加載資源
將CSS放在頁面頭部,防止頁面閃爍
將JavaScript異步或延遲加載,防止JavaScript運行阻塞頁面加載
延遲請求首屏外的文件,即優(yōu)先加載首屏內(nèi)容。
選擇器從右向左解析,嵌套順序不宜過深
JavaScript中減少作用域鏈的查找,避免使用eval
和Function
等性能緩慢的接口
DOM操作的代價是十分昂貴的,可以使用DocumentFragment
base64
????? ??
??? ???? ???? ?? ??? ??? http ??? ????? ?? ? ????
?? ??? ???? ?? ? ?? ???? ??
????CDN? ???? ??? ?????? ??????? ???? ????? CSS? ??? ??? ????????? ????JavaScript? ???? ?? ??? ??? ???? ?? ???? ?? JavaScript? ???? ?? ?? ?????? ???? ? ?? ?? ??? ?? ??? ?????. ?, ? ?? ?? ???? ?? ?????. ???? ?? ???? ????? ?? ???????? ????? ???? ?? ???? ?? ??? ?? ???? ? ??????? ????JavaScript?? ?? ?? ??? ???
eval
? Function
????? ?? ??? ?? ????? ??? ????.
????DOM ??? DocumentFragment
? ???? ? ?? ??? ???? ??? ??? ??? ? ????.
??
????? ?? ????
??????? ??? ?? ????? ?? ??? ???? ????? ??? ??? ?? ??? ????. ??
??XSS??
????? ??? ????(Cross Site Scripting)?? ???? ???? ? ???? ?? ???? ??? ???? ?? ??? ???? ??? ???? ?? ? ???? ?? ??? ???? ?? ????. ??? ??. ??XSS? ???? ?? ????? ???? ????? ??? ? ?? ???? ?? ????. ?? ?? ?? ?? ??? ???? ??? ???? ?? ??????? ?? ???? ???? ?? ???? ??? ? ?? ???? ?? ????? ???? ? ????. ??
??CSRF??
???? ??? ?? ??, ?? ?? ?? ? ???? ?? ?? ??? ???? ? ??? ???????? ?? ?? ??? ????. ? ??? ?? ? ??? ???? ??? ?? ??? ????? ???????. ???? ??? ?? ?? ?????? GET ??? ??? ??(Ajax? ?? ?? ???? ?? img ?? src ??? ??? ? ??) ?? ???? ???? ?? ?? ????? ????? ????. ? ???? ???? ?? ??? ????(??? ??? ?? ?? ??? ?? ??? ????) ???? ??? ???????
??????? ?? ??????
??????? ??, ??? ?? ?? ?...???? ?? ??, ??? ??, http ?? ??, ajax ??? ?? ?? ??? ??? ???
??? XXS ??? ??