高效web前端開發 bookjavascript
PageSpeed 出自google公司 是一款 免費的工具 性能分析css
Timeline網頁交互 和渲染 所要花費的時間html
Profile誰 能夠查看網頁cpu以及內存佔有的狀況報告前端
Audits 中提供了各類資源及配置的優化建議和未使用的css規則的列表html5
代碼的壓縮java
文本服務器開啓Gzip壓縮。jquery
UglifyJs 不只僅是一個壓縮工具,同事具備JS語法分析和代碼美化工能web
圖片壓縮工具 以在線工具居多 TinyPNG 壓縮 PNG格式圖片。chrome
使用 JPEGmini 壓縮 JPG格式圖片瀏覽器
本地應用程序 推薦使用 ImageOptim
發佈階段 也能夠用 ANT來構建 代碼 和 資源壓縮的任務。
id 用 _ 鏈接 class 用 - 鏈接。
css文件 頭部 也能夠寫上註釋 還有就是 解釋性說明
文件 版本 版權信息 做者等
js註釋
局部變量 採用首字符小寫 其餘單詞首字母大寫的方式
面向對象 私有接口小寫 公有接口大寫。
給jquery 變量 前面加上 $前綴
驗證頁面大麥
HTML Validator自動糾正 和美化代碼
更好的語義化
用<del> 代替 <s> <strike>
<abbr>表示的是一個縮寫的 標籤 內容縮寫
<noscript>表示 沒有 js的時候 使用的。替代方案 可是有的時候會無效
較好的作法是 不能使用javascript的時候 傳值到服務器上 有服務期計算 返回
能夠設置頁面在禁用js的狀況下 跳轉網頁 百度的作法是
<noscript><meta http-equiv = 「refresh」 content = 「0; url=/baidu.html?from=noscript」/></noscript>
meta 的屬性
name 元信息
http-equiv 指令請求
content
charset 字符編碼
name content 構成 名/值 對用於描述 網站信息
名稱包括 application-name author description generator
http-equiv屬性 和content屬性 組合,設置特定的HTTP指令
content-type default-style(不多用) refresh (前三個已經肯定)content-language set-cookie
<meta http-equiv=」refresh」 content =」300」> 5分鐘後刷新
務必在 <title> 標籤 以前 設置charset
能夠手動設置一些頁面的兼容模式 不是不標準 可是是經常使用的meta
<meta http-equiv=」x-UA-Compatible」 content=」IE=8」/> 從ie8 開始支持
會在 IE9以及如下瀏覽器激活chrome frame 強制IE使用chrome frame 渲染頁面
<meta http-equiv=」x-UA-Compatible」 content=」chrome = 1」/>
是設備在移動設備中顯示正常
<meta name=」viewport」 content=」width = device-width,initial-scale = 1,maximum-scale = 1」>
IE 瀏覽器的固定網站的功能
<meta name=」misapplication-task」 content=」name=」xinxianshi」;action-uri=http://www.renren.com/home;icon-uri=http://a.xnimg.cn/n/res/icons/newsfeed.ico」 />
語義化標籤
div 和 span 是沒有語義化的
在css 中是能夠用 content=「|」 來設置內容,而沒必要全部內容都放在html中
.spliter:before
:before 選擇器在被選元素的內容前面插入內容。
請使用 content 屬性來指定要插入的內容。
使用能夠平穩退化 並且具備語義化的標籤實現
<li class="reader-action-library">libarary</li> 又因爲文字 不用顯示
.reader-main-action li{
text-indent:-99999px;
}
沒有禁用css時候不會顯示文字 當禁用css 的時候 可以平穩顯示
html 新加入的標籤
<header> <footer> <article> <section> <nac> <aside>
提升html 的 語義 重要屬性 alt title
上面的元素一個在左邊 一個在右邊 下面的元素要想不受上面的元素的影響
須要先清除浮動 clear:both;
text-indent 來達到影藏文字的目的
使用table 標籤構建 登錄 表單 語義化 不明確 並且代碼臃腫
最好用label 展示登陸表單的文本標籤
label 實現關聯 用for 後面指向關聯的 標籤id 在單選框 和 多選框 有很大的 優勢
<form>
<fieldset disabled> // 表單分組 而且禁止輸入
<legend>健康信息</legend> // 標題信息
身高:<input type="text" />
體重:<input type="text" />
</fieldset>
</form>
tabindex 設置tab順序切換
required = ‘true’ 即輸入 不能爲空
塊元素能夠包含其餘元素
行內元素只能包含行內元素
html5 沒必要記住這些 更多的是語義化的記憶
html5 <meta charset=」UTF-8」> //表示的是定義頁面編碼
在HTML4.01 中<meta http-equiv=」content-Type」 content = 「text/html;chars=utf-8」>
變得更爲簡潔方便
html5 引入css樣式表
<link rel=」stylesheet」 href=」/cssdafda」> //都不用再次設定type=「text/css」
引入js
<strcipt src=」afdaf.js」></script> //type=「text/javascript」
新的輸入類型的空間會獲得平穩的降級
script 的 兩個屬性 defer 和 async 只有在src 設置了之後纔會做用
defer 表示 並行下載 而且不會修改dom樹 最後加載執行
async 表示 異步加載 下載完成後 會馬上直接執行代碼 有依賴關係 不能使用這個
若是頁面有內聯的腳本依賴於加載的腳本,則不適合使用defer屬性。
<base> 設置a 標籤的 默認 target 好比 _blank
屬性值 自定義 data-length=「xx」 讀取這個屬性值 .dataset[‘length’] 設置一樣
<i> <b> <u> <small> 斜體 黑體 下劃線 小字體
h5 有不少的標籤 廢棄了 strike 和 big 。。
還有一些標籤的屬性被移除
ie 老的 能夠 經過 creatElement 方法 產生的標籤
框架 支持 h5 舊了瀏覽器 html5shim
Modernizr 表示監測新特性的框架
type 都是 總共的類 和 格式名稱
<sourc src=」video.mp4」 type=」video/mp4」>
<iframe 插入一些東西>
css 中的文件 一個默認樣式文件 一個共有文件 一個IE特有的文件
在頁面中使用IE瀏覽器獨有的條件註釋方式引用此文件
<!—[if lt IE 8]>
<link rel=stylesheet’ href=」ie-style.css」 />
<![endif]-->
要對html5中的新標籤 在 IE89 中顯示正常要定義一個display cssreset 中的一項要求
YUI框架彷佛很強大。
css 中的樣式排序 字母從小到大 推薦
按照對頁面影響的大小排序 形象佈局排在前面 不影響佈局排在後面
csscomb css 免費自動化排序程序
css 權重
ID>類 僞類 屬性選擇器 >標籤類型 僞對象 > 通配符
儘可能 不用id選擇器 複用的css 會減小
爲了提升兼容樣式的優先級 能夠再更元素 <html> 或者是 <body>上正對 不一樣的劉來氣添加不一樣的樣式類
<!—[if lt IE 8]> // 還有一種方法 <!—[if gt IE 8]><!--> <html> <!--<![endif]-->
<html class=」ie7」>
<![endif]-->
相對單位 和 絕對單位 px pt cm mm in pc
相對單位 視窗相對單位vw vh vmin vmax 字體相對單位em ex ch rem
儘可能設置性對尺寸 當總體模塊更改時就不須要更改 模塊內部子模塊的尺寸了。
能夠顯式的設置body的字體大小爲 16px 後面的 子模塊 用 0.8 em 之類的
rem 是根據 根元素設定 相對值的
css的匹配規則和咱們的習慣是相反的 是從右向左的。
避免使用通配符 *
由於 id選擇器都是惟一的 前面加上標籤名 無心識多此一舉 增長匹配時間
css selectors Test 表示的是測試css 的開銷
儘可能不要設定圖片的大小 正價系統渲染的cpu的開銷
縮略圖 和 正常的大圖片不要使用相同的圖片 分紅兩個圖片
sprint圖 推薦長*寬 《=2500 雪碧圖最好控制在200k之內 圖片態度啊會消耗更多的傳輸時間
csssprit 生成器 Generator在線的
css sprit cow 雪碧圖 css 代碼生成器
spriteMe 經過分析網站 產生雪碧圖 和對應的css 代碼 *****挺好的吧
css 不少屬性是能夠繼承的 color font line-heighttext-align text-tansform
chrome 能夠有工具 能夠出 沒必要要的 css
audits 中的remove unused cssrules
針對特定的瀏覽器前綴 -webkit chrome safari
firefox -moz
ie -ms opera -o
自動化添加瀏覽器前綴
Perfixr autoperfixr
html5please 對應的建議網站
JS
避免全局變量污染 封裝在一個變量對象上面 var myCurrentAction = {
length:0,
init:function(){},
action:function(){}
}
var myCurr = (function () {
var length = 0;
function init(){}
function action(){}
return init:init;// 外部代碼訪問init()方法是 能夠經過調用 myCurr.init 返回 公開的接口
})()
null 與 undefined 本身 互相 比較 爲true
原始類型(數值,布爾,字符類型) 都會轉換爲數值類型進行比較
對象 和原始類型比較時 會將對象對象轉換爲原始類型進行比較
with(object){
}
js運行的時候會給with單獨創建一個做用於 這個做用於裏的變量變爲了局部變量
避免 使用with 只有運行時才知道 變量屬於那個對象
with 兼容問題 ecma 5 和 6 在width [] 參數上實現 不一樣
eval(「x = 1;y = 2;x*y」) 就是把字符串的內容做爲代碼執行。 存在安全問題
最好不要編寫瀏覽器判斷邏輯 直接檢測瀏覽器特性支持
只要在 script 中添加 以下
「use strict」;
最好不要在全局中使用嚴格模式
最好寫在 函數中
JS代碼檢查工具 JSHint
JS 能夠設置 obj.style.cssText += 「border:1px solid #f00」
上述不是最佳作法 最佳作法是更改 class
經過 innerHTML 生成 元素的內部子元素
<script id = 「xxx」 type=」text/x-tmpl」>
</script>
當須要獲取模板代碼的時候 經過
var infoTemplate = document.getElementById(‘main_info’).innerHTML;
<template> HTML5中的標籤
Mustache 模板系統
mvc CMV
JS模塊 化 規範 主要有兩種 commonjs 和 amd
同步 與 異步加載模塊 一個主要用在 服務器 和一個主要用在前端
實現AMD 模塊的 js庫 主要有requireJS
Ajax 不能濫用 不然 替換y一整個 ui 能夠 換頁面 破壞瀏覽器上的 後退按鈕jquery有相關插件
JS 是單線程 阻塞狀態下下載 和 加載的
推薦 把js放在 body的底部
defer
告訴瀏覽器 這個js代碼不會產生任何頁面內容,所以瀏覽器能夠在加載此引用時繼續解析頁面的後續內容。
按需求加載
少用forin
js 不存在 塊做用域
多個函數嵌套定義的時候會造成做用域包含的關係關係稱爲 做用域鏈
內部做用屢次外部的數據 精良簡寫爲一次
var doc = document;
prototype 原型對象
實例上的屬性和方法 來自自身 和和對應的原型對象。
原型鏈上的對象和屬性 頻繁讀取會影響性能。
DOM 和js 是存儲到兩個不相干的模塊中的 模塊的交互會致使性能的損耗
並且dom的重排和重繪 也會致使 性能的損耗
DOM 的增長 和刪除 和修改 可見DOM元素。
請求 DOM 元素佈局信息 會形成很到的性能損耗 offersetTop clientX
頻繁修改DOM樣式
ele.style.border …..
不提倡 合併爲一種
優化 更改classname cssText +=
克隆 dom 內存操做
var old = document.daadfafdsaf
var clone = old.cloneNode(true);
動畫效果 設定爲 fixed 或者是 absolute 避免頁面的從新排布。
事件 綁定過多 會致使 性能變差 最好是 使用冒泡機制 在父元素上綁定事件即事件託管
利用TIMELINe 工具 chrome
在線代碼性能分析工具 jsPerf
常見的web前端攻擊方式
XSS 盡一切 辦法在瀏覽器頁面上運行 不是 瀏覽器的代碼
csrf 能夠沒有 js參與
DDos
劫持 上面覆蓋一個iframe
cookie 設置爲 HttpOnly禁止js操做cookie
viewport 對移動端的支持
兼容移動端 使用 流式佈局 百分比定寬
借用 media queries 技術
@media (max-wdith:600px){
.facet_sidebar{
display: none;
}
}
/*按照上面的從大到小 編寫相應的 媒體查詢 顯示 特定的 html*/
正對 不一樣的設別像素比 設定不一樣清晰的圖片
@media only screen animation-delay: (min-device-pixel-radio:1.5){
#my-image{
background:url(high.png);
}
}
/*一樣也能夠用圖片的方法*/
background-image:image-set(
/*表示像素 比 是1 和 2 */
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
更多的是使用 技術類庫 picturefill
Bootstap 響應式設計 有關
Howtogomo 檢查網站對移動設備的兼容性效果
移動端站點通常選取桌面端網站的二級域名 m開頭
監測移動設備的 信息 use-agent
設計移動應用爲單頁模式 避免頁面跳轉
移動端開發框架 jquery mobile
chrome 中有相關的技術 能夠實現手機端 開啓debug 而後電腦端 開始調試
但願瀏覽器可以自動識別電話號碼
<meta name=」format-detection」 content=」telephone=yes」>
<a href=」tel:1-406-666-xxxx」>ddafdaf</a> 電話
<a href=」sms:1-406-666-xxxx」>ddafdaf</a> 短信
移動端 儘可能少用 table 和 iframe
用 ul ol 代替
圖表類型的字體 Font Awesome
內聯圖片 Base64
一些不須要長按跳出對話框的 方法
user-select:none;
mouse相關事件 有對應的手勢相關事件
tab 事件 是click事件的模擬 由於click事件在移動端 會形成300ms的延遲
還有一個tabhold事件 經過實踐斷定是哪個事件~
在web移動開發的時候 避免使用Timer來完成須要準確控制時間的任務。