篇幅可能有點(diǎn)長(zhǎng)，我想先聊一聊閱讀的方式，我希望你閱讀的時(shí)候盈电，能夠把我當(dāng)作你的競(jìng)爭(zhēng)對(duì)手匆帚，你的夢(mèng)想是超越我卷扮。你想超越我，就得了解我懂什么對(duì)吧，好焦影，開始閱讀~ ~ 哈哈哈 ~ ~ ~

歷時(shí)144000000毫秒出山的前端優(yōu)化篇斯辰，若你問我有什么感悟彬呻？
那我告訴你闸氮，看到毫秒啊译断，火箭啊孙咪，這些與優(yōu)化相關(guān)的詞该贾，都有莫名的親切感。
本文主要從工作效率逞力、速度性能寇荧、穩(wěn)定性揩抡、響應(yīng)式峦嗤、兼容性、搜索SEO装黑、信息無障礙等方面進(jìn)行講解恋谭。前端優(yōu)化是一個(gè)讓人技術(shù)提升的point铜幽，希望你也能從這里學(xué)到一些東西除抛。

1 工作效率

你是否經(jīng)常處于這樣的場(chǎng)景：從早上忙到晚上八九點(diǎn)到忽，一會(huì)與產(chǎn)品經(jīng)理溝通，一會(huì)在部門群聊一下新奇的東西翩迈，一會(huì)被設(shè)計(jì)美眉糾纏住拖不了身负饲，有時(shí)還開不了部門的會(huì)議因?yàn)轫撁婕敝暇€，然后繼續(xù)加班~~~
怎么提高我們的工作效率洞坑？下面從四個(gè)方面講解：
時(shí)間管理
利用工具
經(jīng)驗(yàn)和閱歷
使用新技術(shù)

1.1 時(shí)間管理

凡是時(shí)間管理迟杂，都會(huì)聯(lián)想到計(jì)劃這個(gè)詞。我們先看看別人家的月計(jì)劃表和周計(jì)劃表攻泼，之所以周計(jì)劃表為空忙菠，是希望你能把它下載并打印出來，行動(dòng)從計(jì)劃開始：月計(jì)劃表：

img

img

1.2 利用工具
第一樣工具杠园，比如程序員杯子：

img

1.2.1 編輯器
選擇好一個(gè)前端編輯器是比較重要的思灰。目前sublime、webstorm和vim是比較常見的油湖，建議不使用Dreamweaver乏德。sublime目前還是不錯(cuò)的選擇，可以安裝插件郑什，比如BracketHighlighter 高亮顯示钝满、JsFormat弯蚜、Emmet html/CSS快速編輯以及DocBlockr插件距糖，快速輸入jsDoc注釋等悍引，還可以自定義代碼段snippets俩块。無論你使用哪種編輯器玉凯，你需要的是熟悉這個(gè)編輯器并熟練它的快捷鍵。
1.2.2 瀏覽器開發(fā)者工具
作為前端人員盲厌，首選的瀏覽器當(dāng)然是chrome。推薦閱讀Chrome開發(fā)者工具不完全指南一系列文章懂扼，它從一些基礎(chǔ)的功能開始到它的一些高級(jí)性能分析器（Timeline、Profiles）炕倘，熟悉chrome對(duì)我們的開發(fā)工作有很大的作用罩旋。

1.2.3 其他常用工具
切圖工具：photoshop cc切圖之智能切圖瓜饥、 cutterman量色、測(cè)距工具：FastStone Capture趣苏、馬克鰻 - 設(shè)計(jì)稿標(biāo)注圖片壓縮：tinypng、智圖生成雪碧圖：spritebox彬伦、CSS Sprite Generator、cssgaga調(diào)試工具：Fiddler 询张、weinre 、微信調(diào)試工具蜗帜；

1.2.4 前端工程化
凡是重復(fù)的，必須使用工具自動(dòng)完成湘捎。工具眾多，我們就有一種想法活翩，能不能有一種工具能幫我們自動(dòng)生成雪碧圖沮焕、 css壓縮峦树、圖片壓縮等等，然后就出現(xiàn)了前端工程化歪赢。前端工程化一般可分為五個(gè)步驟：（1） 初始点楼，生成基礎(chǔ)目錄結(jié)構(gòu)和樣式庫掠廓。（2） 開發(fā)换怖，實(shí)時(shí)預(yù)覽、預(yù)編譯蟀瞧。（3） 構(gòu)建沉颂，預(yù)編譯、合并铸屉、壓縮。（4） 發(fā)布切端，將構(gòu)建后靜態(tài)文件發(fā)布上線彻坛。（5） 打包，資源路徑轉(zhuǎn)換踏枣，源碼打包 昌屉。
這里推薦一個(gè)工具fis，解決前端開發(fā)中自動(dòng)化工具茵瀑、性能優(yōu)化间驮、模塊化框架、開發(fā)規(guī)范马昨、代碼部署蜻牢、開發(fā)流程等問題烤咧。還有凹凸實(shí)驗(yàn)室研發(fā)的athena，O2Team構(gòu)建項(xiàng)目流程工具抢呆，可以生成相應(yīng)目錄和代碼煮嫌，同時(shí)對(duì)項(xiàng)目進(jìn)行編譯， 一次安裝抱虐，到處運(yùn)行昌阿。
1.3 閱歷和經(jīng)驗(yàn)
我所理解的程序員兼并聰明以及“懶惰”精神，推崇懶惰式開發(fā)恳邀，即把問題理解清楚懦冰，確保將要寫的代碼能真正的解決問題，這將會(huì)避免之后寫出大量無用的代碼谣沸，正所謂“懶”出效率刷钢。我們的閱歷和經(jīng)驗(yàn)可以大大提高開發(fā)效率，思考代碼的時(shí)間增加從而選出最優(yōu)方案乳附，因此寫代碼速度更快以及代碼長(zhǎng)度更短内地，對(duì)問題的透徹理解使調(diào)試代碼的速度也更快唉工。根據(jù)閱歷和經(jīng)驗(yàn)预皇，或借助其他人的，我們進(jìn)行整理從而形成自己或團(tuán)隊(duì)的規(guī)范金抡，這可大大提高我們的寫碼速度举农。
1.4 使用新技術(shù)
使用新技術(shù)如何提高我們的工作效率荆针。一貫我們都使用我們熟悉的技術(shù)去開發(fā)一個(gè)技術(shù)處理方案，畢竟學(xué)習(xí)新技術(shù)的時(shí)間成本還是存在的颁糟。但是還是不能忽略一些新技術(shù)的存在航背，一般新技術(shù)包含了一些很棒的新特性，可以更加方便的實(shí)現(xiàn)很多復(fù)雜的操作棱貌，提高開發(fā)人員的效率玖媚，比如ES6。用你的慧眼去積累新技術(shù)键畴，會(huì)派上用場(chǎng)的最盅。
2 速度性能
為什么需要前端性能優(yōu)化？性能優(yōu)化可以從哪幾個(gè)方面入手起惕？遇到一個(gè)頁面涡贱，5秒還沒加載完成，那個(gè)菊花轉(zhuǎn)啊轉(zhuǎn)惹想，或者頁面完全白屏问词，那簡(jiǎn)直把人逼瘋了。從用戶體驗(yàn)的角度看嘀粱，前端性能優(yōu)化是非常有必要的激挪。網(wǎng)頁最長(zhǎng)加載時(shí)間一般不能超過3秒辰狡。首先我們需要確定網(wǎng)頁的性能指標(biāo)，可量化的目標(biāo)以及可持續(xù)跟蹤的優(yōu)化數(shù)據(jù)是性能優(yōu)化工作得以持續(xù)進(jìn)行的保障垄分，同時(shí)也是源動(dòng)力宛篇！比如：
首屏加載時(shí)長(zhǎng)
DOM加載時(shí)長(zhǎng)
頁面白屏?xí)r長(zhǎng)

我們一般通過三種方式來檢驗(yàn)我們的網(wǎng)頁性能：
通過瀏覽器開發(fā)者工具或?yàn)g覽器插件、Fiddler薄湿、Charles等查看頁面加載情況叫倍。原理是通過追蹤HTTP請(qǐng)求與響應(yīng)的時(shí)間，以圖形的方式列出所有資源的下載情況豺瘤。缺點(diǎn)是人為操作吆倦，難以實(shí)現(xiàn)批量測(cè)試與統(tǒng)計(jì)。
在頁面中引入額外的代碼鉤子來記錄時(shí)間等相關(guān)數(shù)據(jù)坐求。缺點(diǎn)是加重了開發(fā)者與測(cè)試人員的負(fù)擔(dān)蚕泽，還有可能因?yàn)闄z測(cè)代碼本身的潛在問題影響頁面的性能。如果好一點(diǎn)的話桥嗤，會(huì)接入一個(gè)性能數(shù)據(jù)收集系統(tǒng)须妻，采取并分析數(shù)據(jù)。

img

可喜可賀篓像，W3C推出了一套性能API標(biāo)準(zhǔn)，目的是簡(jiǎn)化開發(fā)者對(duì)網(wǎng)站性能進(jìn)行精確分析與控制的過程皿伺，最終實(shí)現(xiàn)性能的提高员辩。比如通過Navigation Timing記錄的關(guān)鍵時(shí)間點(diǎn)來統(tǒng)計(jì)頁面完成所用的時(shí)間，部分使用方法：
1
2
3
4
5
6

var timing = window.performance.timing
timing.domLoading //瀏覽器開始解析 HTML 文檔第一批收到的字節(jié)
timing.domInteractive // 瀏覽器完成解析并且所有 HTML 和 DOM 構(gòu)建完畢
timing.domContentLoadedEventStart //DOM 解析完成后鸵鸥，網(wǎng)頁內(nèi)資源加載開始的時(shí)間
timing.domContentLoadedEventEnd // DOM 解析完成后奠滑，網(wǎng)頁內(nèi)資源加載完成的時(shí)間（如 JS 腳本加載執(zhí)行完畢）
timing.domComplete //網(wǎng)頁上所有資源（圖片等）下載完成,且準(zhǔn)備就緒的時(shí)間

持續(xù)追蹤性能數(shù)據(jù)，要選擇合適的頁面性能測(cè)量工具或API妒穴，一旦選定后宋税，不再更換，以保證歷史數(shù)據(jù)的可參照性讼油。我們還要形成一種意識(shí)杰赛，達(dá)成性能聯(lián)盟小組，對(duì)于重要的業(yè)務(wù)或者頁面矮台，一定要從性能的角度考慮問題乏屯，有理有據(jù)地拒絕有損于前端性能的業(yè)務(wù)需求或改動(dòng)根时。
人人都知道雅虎軍規(guī)，那我就來個(gè)截圖吧辰晕！

img

img

LocalStorage：用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)谜悟，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的话肖。

2.2 省著點(diǎn)用-網(wǎng)絡(luò)
2.2.1 減少請(qǐng)求數(shù)
可通過以下方式減少請(qǐng)求數(shù)：
小圖片合并雪碧圖；
JS葡幸、CSS文件選擇性合并最筒；
避免重復(fù)的資源請(qǐng)求。

減少請(qǐng)求數(shù)對(duì)于速度優(yōu)化來說最重要最有效的蔚叨，特別是網(wǎng)絡(luò)差的用戶床蜘。一個(gè)完整的請(qǐng)求需要經(jīng)過域名解析以及DNS尋址、與服務(wù)器建立連接缅叠、發(fā)送數(shù)據(jù)悄泥、等待服務(wù)器響應(yīng)虏冻、接收數(shù)據(jù)的過程肤粱；每個(gè)請(qǐng)求都需要攜帶數(shù)據(jù)，因此每個(gè)請(qǐng)求都需要占用帶寬厨相；瀏覽器進(jìn)行并發(fā)請(qǐng)求的請(qǐng)求數(shù)是有上限的领曼。請(qǐng)求多了的情況，明顯增加了網(wǎng)頁的響應(yīng)時(shí)間蛮穿。一個(gè)頁面由多個(gè)模塊拼接而成庶骄，幾個(gè)模塊中請(qǐng)求了同樣的資源時(shí)，就會(huì)導(dǎo)致資源的重復(fù)請(qǐng)求践磅。
2.2.2 減少文件大械サ蟆（減少請(qǐng)求帶寬）
壓縮CSS、JS府适、圖片羔飞；
盡可能控制DOM節(jié)點(diǎn)數(shù)肺樟；
精簡(jiǎn)css、 JavaScript逻淌，移除注釋么伯、空格、重復(fù)css和腳本卡儒。
開啟Gzip田柔，Gzip的思想就是把文件先在服務(wù)器端進(jìn)行壓縮，且壓縮率達(dá)到85%骨望，然后再傳輸硬爆，傳輸完畢后瀏覽器會(huì) 重新對(duì)壓縮過的內(nèi)容進(jìn)行解壓縮，并執(zhí)行擎鸠。摆屯。好處在于Gzip的支持已經(jīng)很好，且爬蟲可識(shí)別糠亩，壓縮率達(dá)到66%-85%顯著減少了文件傳輸?shù)拇笮∨捌铩Ａ硗猓琯zip對(duì)pdf文件的壓縮效果不大赎线，而且會(huì)浪費(fèi)CPU廷没。

2.2.3 合理使用靜態(tài)資源域名
域名的要求是短小且獨(dú)立。短小可以減少頭部開銷垂寥，因?yàn)橛蛎蕉陶?qǐng)求頭起始行的 URI 就越短颠黎。之所以要求獨(dú)立，因?yàn)楠?dú)立域名不會(huì)共享主域的 Cookie滞项，可以有效減小請(qǐng)求頭大小狭归，這個(gè)策略一般稱之為 Cookie-Free Domain；另外一個(gè)原因是瀏覽器對(duì)相同域名的并發(fā)連接數(shù)限制文判，一般允許同域名并發(fā) 6~8 個(gè)連接过椎，域名不是越多越好，每個(gè)域名的第一個(gè)連接都要經(jīng)歷 DNS 查詢（DNS Lookup）戏仓，導(dǎo)致會(huì)耗費(fèi)一定的時(shí)間疚宇，控制域名使用在2-4個(gè)之間。另外注意：同一靜態(tài)資源在不同頁面被散列到不同子域下赏殃，會(huì)導(dǎo)致無法利用 HTTP 緩存敷待。
2.2.4 使用HTTP 2
HTTP 2 相比 HTTP 1.1 的更新大部分集中于：
多路復(fù)用：多路復(fù)用很好地解決如何讓重要資源盡快加載這個(gè)問題。同域名下或者不同域但是同時(shí)滿足同一個(gè) IP以及使用同一個(gè)證書的這兩個(gè)條件中的所有通信都在單個(gè)連接上完成仁热，此連接上同時(shí)打開任意數(shù)量的雙向數(shù)據(jù)流（ HTTP 1.1 有連接數(shù)限制）榜揖。使用多域名加上相同的 IP 和證書部署 Web 服務(wù)有特殊的意義：讓支持 HTTP/2 的終端只建立一個(gè)連接，用上 HTTP/2 協(xié)議帶來的各種好處；而只支持 HTTP/1.1 的終端則會(huì)建立多個(gè)連接举哟，達(dá)到同時(shí)更多并發(fā)請(qǐng)求的目的钳幅。
HEAD 壓縮：HTTP/2 將請(qǐng)求和響應(yīng)數(shù)據(jù)分割為更小的幀，并對(duì)它們采用二進(jìn)制編碼（ Binary Framing ）炎滞。在 HTTP/1 中敢艰，HTTP 請(qǐng)求和響應(yīng)都是由「狀態(tài)行、請(qǐng)求 / 響應(yīng)頭部册赛、消息主體」三部分組成钠导，狀態(tài)行和頭部卻沒有經(jīng)過任何壓縮，直接以純文本傳輸森瘪。如下圖的比較：

img

2.2 學(xué)會(huì)持家泳唠，讓家變得簡(jiǎn)潔漂亮-客戶端
使用外鏈CSS和JS狈网，CSS放頭，JS放尾警检，防止阻塞以減少對(duì)并發(fā)下載的影響孙援，盡早刷新文檔的輸出。
html的代碼優(yōu)化扇雕，如：避免空的圖片src；
協(xié)議自適應(yīng)窥摄，減少html文件大小镶奉，將https://和http://都替換成//。

css的代碼優(yōu)化，如：建議使用類選擇器哨苛，訪問比較快鸽凶；
不建議使用很長(zhǎng)的base64；
避免CSS表達(dá)式建峭；
避免使用Filters玻侥。

js的代碼優(yōu)化，如：避免使用eval和width亿蒸；
減少作用域鏈查找凑兰；
減少DOM訪問，盡量緩存DOM边锁；
充分利用事件委托姑食；
減少Repaint（重繪）和Reflow（重排）最好通過批量更新元素減少重排次數(shù)，如設(shè)置類class統(tǒng)一更新樣式茅坛，在添加多個(gè)li
元素將會(huì)觸發(fā)多次頁面重排的情況下使用 DOM fargment 在內(nèi)存中創(chuàng)建完整的 DOM 節(jié)點(diǎn)音半，然后再一次性添加到 DOM 中。

圖片格式的選擇：顏色較為豐富的圖片而且文件比較大的（40KB - 200KB）或者有內(nèi)容的圖片優(yōu)先考慮 jpg贡蓖；圖標(biāo)等顏色比較簡(jiǎn)單曹鸠、文件體積不大、起修飾作用的圖片斥铺，優(yōu)先考慮使用 PNG8 格式物延；圖像顏色豐富而且圖片文件不太大的（40KB 以下）或有半透明效果的優(yōu)先考慮 PNG24 格式。
條件允許的仅父，使用新格式WEBP和BPG叛薯。
用SVG和ICONFONT代替簡(jiǎn)單的圖標(biāo)。
用字蛛來代替藝術(shù)字體切圖笙纤，它可剔除沒有使用的字符耗溜，從而解決中文字體過大的問題，并編碼成跨平臺(tái)兼容的格式省容。

合理分配資源加載時(shí)間抖拴，按需加載，包括CSS腥椒、JS文件以及圖片阿宅、業(yè)務(wù)模塊等。根據(jù)我們網(wǎng)頁最初加載需要的最小內(nèi)容集推斷其他內(nèi)容延遲加載笼蛛；無條件提前加載公共內(nèi)容或根據(jù)用戶行為推斷提前加載某些內(nèi)容洒放，如根據(jù)搜索框輸入的文字來判斷加載的內(nèi)容。加載機(jī)制如下：預(yù)加載
Dom Ready后加載
onLoad后加載
滾動(dòng)加載

img

3 穩(wěn)定性
穩(wěn)定性的第一要求是可用领追。最起碼的要求是頁面得出來他膳，要不然沒法用了。其次講究的是頁面的可維護(hù)性绒窑，假如頁面掛了棕孙，多久可以恢復(fù)過來，另外考慮頁面掛的期間是否可以采取靜態(tài)頁面處理等方式些膨。頁面的穩(wěn)定性其實(shí)和前端安全掛鉤蟀俊，即使頁面可以出來了，但是不能保證不會(huì)被黑掉傀蓉，下文從前端安全的方面講解欧漱。
3.1 常見攻擊：
XSS (Cross Site Script) ，跨站腳本攻擊葬燎，往Web頁面里插入惡意html代碼误甚。特點(diǎn)是攻擊者的代碼必須能獲取用戶瀏覽器端的執(zhí)行權(quán)限，要杜絕此類攻擊出現(xiàn)可以在入口和出口進(jìn)行嚴(yán)格的過濾谱净。三種類型：（1） 反射型XSS：一次性窑邦；將包含注入腳本的惡意鏈接發(fā)送給受害者。（2） 持久型XSS：用戶輸入的數(shù)據(jù)“存儲(chǔ)”在服務(wù)器端壕探，比如一條包含XSS代碼的留言冈钦。（3） DOM XSS：使用一些eval等有輸出的語句意味著多了一份被XSS的風(fēng)險(xiǎn)。
應(yīng)對(duì)策略：
當(dāng)惡意代碼值被作為某一標(biāo)簽的內(nèi)容顯示：在不需要html輸入的地方對(duì)html 標(biāo)簽及一些特殊字符( ” < > & 等等 )做過濾李请，將其轉(zhuǎn)化為不被瀏覽器解釋執(zhí)行的字符钞诡。
當(dāng)惡意代碼被作為某一標(biāo)簽的屬性顯示棠笑，通過用 “將屬性截?cái)鄟黹_辟新的屬性或惡意方法：屬性本身存在的 單引號(hào)和雙引號(hào)都需要進(jìn)行轉(zhuǎn)碼；對(duì)用戶輸入的html 標(biāo)簽及標(biāo)簽屬性做白名單過濾，也可以對(duì)一些存在漏洞的標(biāo)簽和屬性進(jìn)行專門過濾废累。

CSRF(Cross Site Request Forgery)女仰，跨站點(diǎn)偽造請(qǐng)求瓷式，通過偽造連接請(qǐng)求在用戶不知情的情況下馋贤，讓用戶以自己的身份來完成攻擊者需要達(dá)到的一些目的。

cookie劫持滤馍，通過獲取頁面的權(quán)限岛琼，在頁面中寫一個(gè)簡(jiǎn)單的到惡意站點(diǎn)的請(qǐng)求，并獲取用戶的cookie登錄某些站點(diǎn)巢株。

對(duì)于crsf 和cookie 劫持的策略：
通過 referer槐瑞、token 或者 驗(yàn)證碼 來檢測(cè)用戶提交。
盡量不要在頁面的鏈接中暴露用戶隱私信息纯续。
對(duì)于用戶修改刪除等操作最好都使用post 操作 随珠。
避免全站通用的cookie灭袁，嚴(yán)格設(shè)置cookie的域猬错。

3.2 數(shù)據(jù)通道安全
國(guó)內(nèi)的眾多網(wǎng)站都沒有實(shí)現(xiàn)全站HTTPS窗看。這是目前為止最重要的一步，所有的數(shù)據(jù)在發(fā)送之前就會(huì)被加密倦炒，攻擊者無法查看或篡改數(shù)據(jù)包的內(nèi)容显沈。HTTPS可以理解為HTTP+SSL/TLS，通過數(shù)據(jù)加密逢唤、校驗(yàn)數(shù)據(jù)完整性和身份認(rèn)證三種機(jī)制來保障安全拉讯。HTTPS的缺點(diǎn)是網(wǎng)站在加上TLS證書時(shí)，可能導(dǎo)致RTT往返時(shí)延增加鳖藕，并且 HTTPS通信過程的非對(duì)稱和對(duì)稱加解密計(jì)算會(huì)產(chǎn)生更多的服務(wù)器性能和時(shí)間上的消耗魔慷，但是這是可以優(yōu)化的，這里就不細(xì)說了著恩。
3.3瀏覽器安全
3.3.1 同源策略
首先了解一下同源策略：
源指的是有相同的HOST院尔、相同的協(xié)議、相同的端口喉誊。
同源策略以源為單位邀摆，把資源天然分隔，保護(hù)了用戶的信息安全伍茄。
繞過同源策略讓javascript訪問其他源的資源的方法栋盹，如：JSONP、CORS敷矫、flash等例获。
同源策略不是絕對(duì)安全的，面對(duì)很多攻擊是無能為力的曹仗，比如XSS榨汤，因?yàn)榇藭r(shí)攻擊者就在同源之內(nèi)。

不建議使用JSONP整葡，因?yàn)镴SONP通常在腳本中寫一個(gè)回調(diào)函數(shù)件余，然后把回調(diào)函數(shù)的名字寫在請(qǐng)求的URL中，因此如果請(qǐng)求數(shù)據(jù)的服務(wù)器被黑了遭居，那么黑客就能在返回的數(shù)據(jù)中植入惡意代碼啼器，從而竊取用戶的隱私信息。
跨域資源共享CORS允許資源提供方在響應(yīng)頭中加入一個(gè)特殊的標(biāo)記俱萍，使你能通過XHR來獲取端壳、解析并驗(yàn)證數(shù)據(jù)。這樣就能避免惡意代碼在你的應(yīng)用中執(zhí)行枪蘑。在響應(yīng)頭中加入的標(biāo)記如下：
1

Access-Control-Allow-Origin: allowed origins

如果對(duì)Access–Control-Allow-Origin設(shè)置為*其實(shí)是比較危險(xiǎn)的损谦，如果沒有攜帶會(huì)話認(rèn)證意味著信息被公開在全網(wǎng)岖免，建議設(shè)置具體的域名，而且跨域的時(shí)候記得帶上session id照捡；嚴(yán)格審查請(qǐng)求信息颅湘，比如請(qǐng)求參數(shù)，還有http頭信息栗精，因?yàn)?http頭可以偽造闯参。
3.3.2 CSP(Content Security Policy)
CSP指定網(wǎng)站上所有腳本和圖片等資源的源站點(diǎn)，也能阻止所有內(nèi)聯(lián)（inline）的腳本和樣式悲立。即使有人在頁面評(píng)論或者留言中嵌入了腳本標(biāo)簽鹿寨，這些腳本代碼也不會(huì)被執(zhí)行⌒较Γ可通過兩種方式設(shè)置脚草，如果 HTTP 頭與 Meta 定義同時(shí)存在，則優(yōu)先采用 HTTP 頭中的定義：
通過 HTTP 頭原献，比如只允許腳本從本源加載：Content-Security-Policy: script-src ‘self’馏慨，其中script-src ‘self’是策略。
通過HTML的Meta標(biāo)簽嚼贡，比如只允許腳本從本源加載：
1

<meta http-equiv="Content-Security-Policy" content="script-src 'self'">

其他策略：
script-src – 設(shè)置可以接受的JavaScript代碼的源站點(diǎn)
style-src – 設(shè)置可以接受的CSS樣式代碼的源站點(diǎn)
connect-src – 定義瀏覽器可以通過XHR熏纯、WebSocket或者 EventSource訪問哪些站點(diǎn)
font-src – 設(shè)置可以接受的字體文件的源站點(diǎn)
frame-src – 定義瀏覽器可以通過iframe訪問哪些站點(diǎn)
img-src – 設(shè)置可以接受的圖片的源站點(diǎn)
media-src – 設(shè)置可以接受的音頻和視頻文件的源站點(diǎn)
object-src – 設(shè)置可以接受的Flash和其它插件的源站點(diǎn)

缺點(diǎn)：默認(rèn)情況下，所有的內(nèi)聯(lián)JavaScript腳本都不會(huì)被執(zhí)行粤策，因?yàn)闉g覽器無法區(qū)分自己的內(nèi)聯(lián)腳本和黑客注入的腳本樟澜。CSP還會(huì)默認(rèn)阻止所有eval()風(fēng)格的代碼的執(zhí)行，包括setInterval/setTimeout中的字符串和類似于new Function(‘return false’)之類的代碼叮盘。
3.3.3 iframe 沙箱環(huán)境
利用iframe進(jìn)行跨源：HTML5為iframe提供了安全屬性 sandbox秩贰，iframe的能力將會(huì)被限制。
3.3.4 Secure和HttpOnly屬性
Secure能確保cookie的內(nèi)容只能通過SSL連接進(jìn)行傳輸柔吼。Secure和HttpOnly屬性告訴瀏覽器cookie的內(nèi)容只能分別通過HTTP(S)協(xié)議進(jìn)行訪問毒费，從而避免了被輕易竊取，比如禁止從JavaScript中的document.cookie訪問愈魏，因此cookie在瀏覽器document中不可見了觅玻。如果單獨(dú)使用的話，無法全面抵御跨站點(diǎn)腳本攻擊培漏，通常和其他技術(shù)組合使用溪厘。使用方法如下：
1

Set-Cookie: <name>=<value>[; <name>=<value>] [; expires=<date>][; domain=<domain_name>][; path=<some_path>][; secure][; HttpOnly]

3.3.5 其他安全相關(guān)的HTTP 頭
X-Content-Type-Options 告訴瀏覽器相信此服務(wù)器下發(fā)的資源的類型，防止類型嗅探攻擊牌柄。

HPKP(Public Key Pinning) Public Key Pinning 是一個(gè)response 頭畸悬，用來檢測(cè)一個(gè)證書的公鑰是否發(fā)生了改變，防止中間人攻擊珊佣。

HSTS (HTTP Strict-Transport-Security) 強(qiáng)制使用TSL作為數(shù)據(jù)通道蹋宦。

3.4 HTML5 對(duì)web安全的影響
html5有很多新的特性能力披粟，然而能力越大，被攻破后的危險(xiǎn)就越大冷冗。HTML5 對(duì)xss的影響主要體現(xiàn)在:
攻擊面更大守屉，html5帶來更多的標(biāo)簽和更多的屬性如<video>,<audio>,<canvas>
等；
危害更大贾惦，HTML5更多的資源可以被xss利用胸梆。黑客可以利用瀏覽器的一切權(quán)限敦捧，比如本地存儲(chǔ)须板、GEO、服務(wù)器推送機(jī)制WebSocket兢卵，js多線程執(zhí)行Webworker等习瑰。

比如localstorage只能通過js設(shè)置和獲取，導(dǎo)致的結(jié)果是不能像cookie一樣設(shè)置httponly等屬性秽荤，所以localstorage中不能存放敏感信息甜奄，最好能夠在服務(wù)端進(jìn)行加密，可以配合CORS來獲取網(wǎng)站的localstorage的信息窃款。
4 響應(yīng)式
響應(yīng)式布局簡(jiǎn)而言之课兄，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端，可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)晨继。
基于柵格布局規(guī)劃響應(yīng)式設(shè)計(jì)烟阐，每個(gè)模塊盡可能嚴(yán)格遵循柵格布局，符合柵格的小模塊能很靈活的適應(yīng)多個(gè)分辨率的展示紊扬。
擁抱flexbox蜒茄。
使用動(dòng)態(tài)的字體大小單位+rem單位使用。
使用CSS3 mediaQuery 技術(shù)響應(yīng)用戶設(shè)備餐屎。
利用百分比檀葛。
對(duì)低版本瀏覽器使用JS動(dòng)態(tài)響應(yīng)。
一套“自適應(yīng)”素材兼容各種分辨率腹缩，提升頁面性能屿聋，比如自適應(yīng)的圖片/視頻素材。

比如凹凸實(shí)驗(yàn)室博客頁面在PC端藏鹊、iPad润讥、手機(jī)端的排版：PC端：

img

img

img

img

淘寶首頁在兼容性上做了一個(gè)小創(chuàng)新：Html鉤子在html上加上操作系統(tǒng)烁巫、瀏覽器內(nèi)核、瀏覽器類型宠能、CSS3動(dòng)畫支持亚隙、IE各版本類，好處在于：
漸進(jìn)增強(qiáng) 可以實(shí)現(xiàn)不同瀏覽器下差異化體驗(yàn)违崇。
能快速定位并修復(fù)某個(gè)瀏覽器下的特定bug阿弃。

淘寶首頁html鉤子：

img

6.2 衡量站點(diǎn)關(guān)鍵詞優(yōu)化
站點(diǎn)內(nèi)容以及關(guān)鍵詞的選擇。
描述標(biāo)簽暗挑、關(guān)鍵詞標(biāo)簽笋除、代替屬性。
長(zhǎng)尾關(guān)鍵詞：非目標(biāo)關(guān)鍵詞但也可以帶來搜索流量的關(guān)鍵詞炸裆；例如垃它，目標(biāo)關(guān)鍵詞是服裝，其長(zhǎng)尾關(guān)鍵詞可以是男士服裝烹看、冬裝国拇、戶外運(yùn)動(dòng)裝等。長(zhǎng)尾關(guān)鍵詞基本屬性是：可延伸性惯殊，針對(duì)性強(qiáng)酱吝，范圍廣。
關(guān)鍵詞的分布情況土思。
關(guān)鍵詞密度务热、看重：合理的關(guān)鍵字密度可獲得較高的排名位置，密度過大會(huì)起到相反的效果己儒。一般說來崎岂，在大多數(shù)的搜索引擎中，關(guān)鍵詞密度在2%~8%是一個(gè)較為適當(dāng)?shù)姆秶镣澹欣诰W(wǎng)站在搜索引擎中排名冲甘。
是否存在作弊行為。

6.3 鏈接
優(yōu)化文件目錄結(jié)構(gòu)和URL。URL應(yīng)該有語義性江醇，簡(jiǎn)短易懂省艳。
通過推廣暴露自己的鏈接，增加信任度嫁审。鏈接分為外向鏈接和內(nèi)向（反向）鏈接跋炕，外向鏈接就是從本站點(diǎn)到其他站點(diǎn)，內(nèi)向鏈接就是從其他站點(diǎn)到我的站點(diǎn)律适，可以嘗試使用反向鏈接生成器辐烂。或者通過寫軟文捂贿、發(fā)布分類信息纠修、發(fā)布博客文章來推廣自己的網(wǎng)站。
錨文本 ：把關(guān)鍵詞做一個(gè)鏈接厂僧，指向別的網(wǎng)頁扣草，這種形式的鏈接就叫作錨文本。搜索引擎可以根據(jù)指向某一個(gè)網(wǎng)頁的鏈接的錨文本描述來判斷該網(wǎng)頁的內(nèi)容屬性颜屠。

6.4 良好的網(wǎng)站導(dǎo)航和sitemap
網(wǎng)站需要有一個(gè)良好的導(dǎo)航辰妙，控制根目錄和各子目錄的關(guān)鍵，通過sitemap可以幫助網(wǎng)站主了解網(wǎng)站結(jié)構(gòu)甫窟，也方便搜索引擎收錄整個(gè)站點(diǎn)密浑。
7 其他優(yōu)化
7.1 信息無障礙
信息無障礙一般可以從以下幾點(diǎn)入手：
添加landmark角色，在頁面主要操作區(qū)域（搜索框粗井、登錄框尔破、列表內(nèi)容）添加“role”標(biāo)簽加以說明。landmark值一般有：banner（banner）浇衬、complementary（輔助內(nèi)容區(qū)）懒构、contentinfo（網(wǎng)站信息和版權(quán)）、form（表單）耘擂、main（主內(nèi)容區(qū)）胆剧、navigation（導(dǎo)航區(qū)）、search（搜索區(qū)）梳星，如：

img

具體可參考無障礙閱讀
7.2 微動(dòng)畫
通過前端動(dòng)畫技術(shù)給頁面進(jìn)行優(yōu)化，比如：
商品圖片hover效果
小圖標(biāo)旋轉(zhuǎn)效果
購物車微動(dòng)畫
loading動(dòng)畫铝条，當(dāng)加載頁面需要一定時(shí)間靖苇，特別是移動(dòng)端，可以通過有趣的loading動(dòng)畫吸引用戶班缰，這里有一些有趣的loading動(dòng)畫

7.3 requireJs
requireJs框架特性：
前端設(shè)計(jì)及開發(fā)人員統(tǒng)一代碼規(guī)范贤壁。
按需加載。
AMD規(guī)范：以簡(jiǎn)單而優(yōu)雅的方式統(tǒng)一了JavaScript的模塊定義和加載機(jī)制埠忘，降低了學(xué)習(xí)和使用各種框架的門檻脾拆，能夠以一種統(tǒng)一的方式去定義和使用模塊，提高開發(fā)效率莹妒，降低了應(yīng)用維護(hù)成本名船。
與Grunt結(jié)合可實(shí)現(xiàn)一站式工作流。

7.4 多標(biāo)簽狀態(tài)同步
場(chǎng)景如下：頁面一：去一個(gè)網(wǎng)站買東西动羽，未登錄狀態(tài)下包帚，進(jìn)入首頁；頁面二：然后新窗口打開任意頁面运吓，登錄并成功返回。再次訪問頁面一疯趟，發(fā)現(xiàn)頁面還是未登錄狀態(tài)拘哨，實(shí)際上用戶已經(jīng)登錄了，這種體驗(yàn)是很差的信峻。我們是不是有什么辦法可以實(shí)現(xiàn)多標(biāo)簽狀態(tài)同步呢倦青？有的，利用Page Visibility：
頁面可見性API就是表示網(wǎng)頁可見還是不可見的盹舞。頁面可見性API有兩個(gè)屬性产镐，一個(gè)事件，如下：document.hidden: Boolean值踢步，表示當(dāng)前頁面可見還是不可見
document.visibilityState: 返回當(dāng)前頁面的可見狀態(tài)癣亚，狀態(tài)值有hidden、visible获印、prerender述雾、preview。
visibilitychange: 當(dāng)可見狀態(tài)改變時(shí)候觸發(fā)的事件。

瀏覽器支持：IE10+玻孟、Chrome唆缴、FireFox。
多標(biāo)簽狀態(tài)同步demo: 網(wǎng)頁可見性API與登錄同步

7.5 個(gè)性化推薦
HTML5 Geolocation API獲得用戶的地理位置黍翎，進(jìn)行基于地理位置的運(yùn)營(yíng)面徽。

8 參考
能提高前端工作效率的那些事基于Gulp的前端自動(dòng)化繁星網(wǎng)的前端性能優(yōu)化之路前端性能優(yōu)化—-yahoo前端性能團(tuán)隊(duì)總結(jié)的35條黃金定律前端性能數(shù)據(jù)之采集和分析Web性能API——幫你分析Web前端性能前端工程師如何系統(tǒng)地整理和累積兼容性相關(guān)的知識(shí)？玩轉(zhuǎn)HTML5移動(dòng)頁面(優(yōu)化篇)HTTP/2 與 WEB 性能優(yōu)化（一）HTTP/2 與 WEB 性能優(yōu)化（二）HTTP/2 與 WEB 性能優(yōu)化（三）HTTP/2 頭部壓縮技術(shù)介紹從零開始學(xué)web安全（1）關(guān)于Web安全匣掸，99%的網(wǎng)站都忽略了這些網(wǎng)頁前端常見的攻擊方式和預(yù)防攻擊的方法Web客戶端安全性最佳實(shí)踐HTML5 安全問題解析10步大幅提升網(wǎng)站可訪問性Page Visibility(頁面可見性)API介紹趟紊、微拓展