入門書籍 web前端開發最佳實踐

時間 2019-11-16

標籤入門書籍 web 前端開發最佳實踐欄目 HTML 简体版

原文原文鏈接

高效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>表示的是一個縮寫的標籤內容縮寫

較好的作法是不能使用javascript的時候傳值到服務器上有服務期計算返回

能夠設置頁面在禁用js的狀況下跳轉網頁百度的作法是

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

務必在 <title> 標籤以前設置charset

能夠手動設置一些頁面的兼容模式不是不標準可是是經常使用的meta

會在 IE9以及如下瀏覽器激活chrome frame 強制IE使用chrome frame 渲染頁面

是設備在移動設備中顯示正常

IE 瀏覽器的固定網站的功能

語義化標籤

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 新加入的標籤

提升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樣式表

引入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 都是總共的類和格式名稱

css 中的文件一個默認樣式文件一個共有文件一個IE特有的文件

在頁面中使用IE瀏覽器獨有的條件註釋方式引用此文件

<!—[if lt IE 8]>

<![endif]-->

要對html5中的新標籤在 IE89 中顯示正常要定義一個display cssreset 中的一項要求

YUI框架彷佛很強大。

css 中的樣式排序字母從小到大推薦

按照對頁面影響的大小排序形象佈局排在前面不影響佈局排在後面

csscomb css 免費自動化排序程序

css 權重

ID>類僞類屬性選擇器 >標籤類型僞對象 > 通配符

儘可能不用id選擇器複用的css 會減小

爲了提升兼容樣式的優先級能夠再更元素 <html> 或者是 <body>上正對不一樣的劉來氣添加不一樣的樣式類

<!—[if lt IE 8]> // 還有一種方法 <!—[if gt IE 8]>

<![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 對應的建議網站

避免全局變量污染封裝在一個變量對象上面 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>

當須要獲取模板代碼的時候經過

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 而後電腦端開始調試

但願瀏覽器可以自動識別電話號碼

<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來完成須要準確控制時間的任務。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。