前端文章-1

時間 2019-11-13

標籤前端文章简体版

原文原文鏈接

原文地址：http://www.open-open.com/solution/view/1435631238232javascript

很難想象一個半年前還在作後臺開發，對前端知之甚少的我，如今也能夠從事前端開發了。這半年的學習過程將會是我人生一筆寶貴的財富，這讓我想到一句話「在成長的道路上，咱們不要給本身設定界限，只要擁有成長的力量，就能不斷超越本身」。下面以我本身的經歷講講前端的學習過程。css

Jquery基礎知識準備html

學習前端須要掌握的基礎知識有jquery,css。作移動端開發最好掌握CSS3，CSS3的許多新特性會讓佈局簡單不少。Jquery能夠不用每一個知識點都很熟練，可是最好都瞭解，用的時候知道有這個東西再進行細緻學習會更牢固。必須掌握的幾個點前端

1.選擇器java

基礎的id樣式選擇器是必須掌握的，這裏很少說。jquery

2.事件綁定git

不推薦的寫法github

<button id="foo" onclick="dosomething()">Bar</button>web

缺點：這樣作的結果就是html前端和js前端的工做混在了一塊兒，原則上HTML代碼只能體現網頁的結構ajax

建議寫法

$(「#foo」).click(function(){});

優勢：jQuery是追加綁定的，綁多少執行多少，還解決了IE的不兼容問題。

Jquery中的事件綁定方式有不少 click,live,bind,one,on…,它們之間的區別這裏就很少講了。on方法是官方推薦的綁定事件的一個方法，從性能和試用場景上來講都是很好的。

$(「#foo」).on(「click」,function(){});

高級用法，場景（在多行的表格表格中，動態添加了一行，若是想給新增的這行綁定點擊事件）

$(「#table」).on(「click」,」.row」,function(){});

這裏在頁面初始化的時候能夠給表格裏面帶row樣式的行綁定click事件，就算row是新增的，也會添加上該click事件，即事件委託。用C#來解釋：發佈者會把click事件發佈給全部繼承row這個類的訂閱者身上，即常說的發佈-訂閱者模式。

3.函數閉包（一個是前面提到的能夠讀取函數內部的變量，另外一個就是讓這些變量的值始終保持在內存中。）

推薦使用閉包的方式封裝函數，避免函數覆蓋。

var PublicHandle=(function(){

/*私有變量和函數*/

var _privateVar;

var _getName=function(){

};

/*對外提供的接口*/

return{

verifyName:function(){

getName:function(){

}

});

掌握的jquery的幾個基礎知識，結合前端開任務對js會愈來愈熟練。

CSS學習與技巧

CSS的學習主要重點是多看，能夠學習別人現成的例子。看看是怎麼佈局的，CSS怎麼寫是規範的，網上有不少現成的資源如?W3CSchool???前端網。移動端開發框架如?Agile??Ratchet??Junior。

框架會提供許多功能都是能夠拿來直接使用的，弄懂其中一個框架和CSS和JS會讓本身的前端學習更加迅速，固然這是須要花時間的。

代碼優化

掌握了基本知識，就得向更高層級代碼和性能優化方面前進了，網上有不少前端優化的指導意見，如下意見引用了博客毫秒必爭，前端網頁性能最佳實踐。最佳實踐我引用的來自yahoo前端性能團隊總結的35條黃金定律。原文猛擊這裏。下面引用的是我瞭解的一些原則。

網頁內容

減小http請求次數
避免頁面跳轉
減小DOM元素數量
避免404

服務器

Gzip壓縮傳輸文件
避免空的圖片src

Cookie

減小Cookie大小

CSS

將樣式表置頂
避免CSS表達式

Javascript

將腳本置底
使用外部Javascirpt和CSS文件
精簡Javascript和CSS
去除重複腳本
減小DOM訪問

網頁內容

減小http請求次數

80%的響應時間花在下載網頁內容(images, stylesheets, javascripts, scripts, flash等)。減小請求次數是縮短響應時間的關鍵！能夠經過簡化頁面設計來減小請求次數，但頁面內容較多能夠採用如下技巧。

1.合併文件: 如今有不少現成的工具能夠幫你將多個腳本文件文件合併成一個文件，將多個樣式表文件合併成一個文件，以此來減小文件的下載次數。

2.CSS Sprites: 就是把多個圖片拼成一副圖片，而後經過CSS來控制在什麼地方具體顯示這整張圖片的什麼位置。給你們看個熟悉的Sprites實例。

豆瓣把他的圖標集中在一塊兒，而後咱們看他如何控制只顯示第一個圖標的

.app-icon-read {

background-position: 0 0;

}

.app-icon {

background: url("/pics/app/app_icons_50_5.jpg") no-repeat scroll 0 0 transparent;

border-radius: 10px 10px 10px 10px;

box-shadow: 1px 1px 2px #999999;

display: inline-block;

height: 50px;

width: 50px;

}

3.BASE64編碼圖標: 經過編碼的字符串將圖片內嵌到網頁文本中。例以下面的inline image的顯示效果爲一個勾選的checkbox。

.sample-inline-png {

padding-left: 20px;

background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;

}

能夠看到其中有很長的一串，那個就是base64編碼的圖片，網上有在線生成的工具。圖片在線轉換Base64

減小DOM元素數量

網頁中元素過多對網頁的加載和腳本的執行都是沉重的負擔，500個元素和5000個元素在加載速度上會有很大差異。想知道你的網頁中有多少元素，經過在瀏覽器中的一條簡單命令就能夠算出，

document.getElementsByTagName('*').length

避免404

404咱們都不陌生，表明服務器沒有找到資源，咱們要特別要注意404的狀況不要在咱們提供的網頁資源上，客戶端發送一個請求可是服務器卻返回一個無用的結果，時間浪費掉了。更糟糕的是咱們網頁中須要加載一個外部腳本，結果返回一個404，不只阻塞了其餘腳本下載，下載回來的內容(404)客戶端還會將其當成Javascript去解析。

服務器

Gzip壓縮傳輸文件

Gzip一般能夠減小70%網頁內容的大小，包括腳本、樣式表、圖片等文件。Gzip比deflate更高效，主流服務器都有相應的壓縮支持模塊。IIS中內建了靜態壓縮和動態壓縮模塊，如何配製能夠參考Enable HTTP Compression of Static Content (IIS 7)和Enable HTTP Compression of Dynamic Content (IIS 7)。

值得注意的是pdf文件能夠從須要被壓縮的類型中剔除，由於pdf文件自己已經壓縮，gzip對其效果不大，並且會浪費CPU。

避免空的圖片src

空的圖片src仍然會使瀏覽器發送請求到服務器，這樣徹底是浪費時間，並且浪費服務器的資源。尤爲是你的網站天天被不少人訪問的時候，這種空請求形成的傷害不容忽略。瀏覽器如此實現也是根據RFC 3986 –?Uniform Resource Identifiers標準，空的src被定義爲當前頁面。因此注意咱們的網頁中是否存在這樣的代碼

straight HTML

< img src=」">

JavaScript

var img = new Image();

img.src = 「」;

Cookie

減小Cookie大小

Cookie被用來作認證或個性化設置，其信息被包含在http報文頭中，對於cookie咱們要注意如下幾點，來提升請求的響應速度，

去除沒有必要的cookie，若是網頁不須要cookie就徹底禁掉
將cookie的大小減到最小
注意cookie設置的domain級別，沒有必要狀況下不要影響到sub-domain
設置合適的過時時間，比較長的過時時間能夠提升響應速度。

CSS

將樣式表置頂

經樣式表(css)放在網頁的HEAD中會讓網頁顯得加載速度更快，由於這樣作可使瀏覽器逐步加載已將下載的網頁內容。這對內容比較多的網頁尤爲重要，用戶不用一直等待在一個白屏上，而是能夠先看已經下載的內容。

若是將樣式表放在底部，瀏覽器會拒絕渲染已經下載的網頁，由於大多數瀏覽器在實現時都努力避免重繪，樣式表中的內容是繪製網頁的關鍵信息，沒有下載下來以前只好對不起觀衆了。

避免CSS表達式

CSS表達式能夠動態的設置CSS屬性，在IE5-IE8中支持，其餘瀏覽器中表達式會被忽略。例以下面表達式在不一樣時間設置不一樣的背景顏色。

background-color: expression( (new Date()).getHours()%2 "#B8D4FF" : "#F08A00" );

CSS表達式的問題在於它被從新計算的次數遠比咱們想象的要多，不只在網頁繪製或大小改變時計算，即便咱們滾動屏幕或者移動鼠標的時候也在計算，所以咱們仍是儘可能避免使用它來防止使用不當而形成的性能損耗。若是想達到相似的效果咱們能夠經過簡單的腳本作到。

<html>

<head>

</head>

<body>

var currentTime = new Date().getHours();

if (currentTime%2) {

if (document.body) {

document.body.style.background = "#B8D4FF";

}

else {

if (document.body) {

document.body.style.background = "#F08A00";

}

</script>

</body>

</html>

Javascript

將腳本置底

HTTP/1.1 specification建議瀏覽器對同一個hostname不要超過兩個並行下載鏈接，因此當你從多個domain下載圖片的時候能夠提升並行下載鏈接數量。可是當腳本在下載的時候，即便是來自不一樣的hostname瀏覽器也不會下載其餘資源，由於瀏覽器要在腳本下載以後依次解析和執行。

所以對於腳本提速，咱們能夠考慮如下方式，

把腳本置底，這樣可讓網頁渲染所須要的內容儘快加載顯示給用戶。
如今主流瀏覽器都支持defer關鍵字，能夠指定腳本在文檔加載後執行。

HTML5中新加了async關鍵字，可讓腳本異步執行。

使用外部Javascirpt和CSS文件

使用外部Javascript和CSS文件可使這些文件被瀏覽器緩存，從而在不一樣的請求內容之間重用。同時將Javascript和CSS從inline變爲external也減少了網頁內容的大小。使用外部Javascript和CSS文件的決定因素在於這些外部文件的重用率，若是用戶在瀏覽咱們的頁面時會訪問屢次相同頁面或者能夠重用腳本的不一樣頁面，那麼外部文件形式能夠爲你帶來很大的好處。但對於用戶一般只會訪問一次的頁面，例如microsoft.com首頁，那inline的javascript和css相對來講能夠提供更高的效率。

精簡Javascript和CSS

精簡就是將Javascript或CSS中的空格和註釋全去掉，用來幫助咱們作精簡的工具不少，主要能夠參考以下，

JS compressors: