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

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

相關文章
相關標籤/搜索