国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

web前端開發(fā)編碼規(guī)范及性能優(yōu)化

zhaofeihao / 2729人閱讀

摘要：性能優(yōu)化頁面渲染減少頁面修改元素多個樣式可以通過修改完成這樣可以把多次減少為一次修改元素多個樣式可以分為三步先隱藏再修改最后顯示。

代碼優(yōu)化 
這個部分僅僅將代碼優(yōu)化本身,不考慮性能,關(guān)于代碼部分的性能優(yōu)化在 頁面渲染 部分 代碼優(yōu)化 中
HTML+CSS

符合 XHTML 規(guī)范: 小寫,正確嵌套,必須關(guān)閉;

雙引號,合理縮進(jìn),utf-8編碼;

標(biāo)簽語義化,便于維護(hù);

合理注釋,比如 div 關(guān)閉的地方表明配對的 div;

HTML,CSS,JS 分離,方便維護(hù);

避免使用 iframe, 否則會阻塞父文檔 onload;

樣式繼承,不要重復(fù);

不要亂用 href 和 onclick, 他們本質(zhì)不同,href 偏向資源加載,而 onclick 僅僅是點(diǎn)擊;其次 click 事件在 href 之前執(zhí)行;

css偽類選擇器不宜太多,防止選擇器過載;

不要讓樣式難以覆蓋,少用!improtant;

善于利用樣式繼承(注意繼承和層疊是不一樣的概念);

不要保留過時的瀏覽器前綴和兼容性寫法;

JavaScript

標(biāo)識符簡短清晰,不用 1 和 0 代替 true 和 false,合理編寫注釋,提高代碼可讀性;

定義變量一定寫 var,以免污染全局,同時,new Function() 和 eval() 也會污染全局;

長字符串用字符串鏈接寫法,而非跨行。在兼容的情況下,用 ES6 中的多行字符串也更好;

不要在 if 和 for 中定義函數(shù),前置沒有意義,破壞分支;后者易出現(xiàn)循環(huán)參數(shù)拖尾的情況;

在此法作用域開始處聲明變量,提高可讀性;

var Name = function Name(){}; 有利于堆棧跟蹤(注意變量名一致性);

位運(yùn)算不要大于32位;

不要隨意重寫已有原型,可以用其實(shí)例化對象代替,實(shí)現(xiàn)實(shí)例繼承;

對象方法盡量返回 this 以便鏈?zhǔn)秸{(diào)用;

函數(shù)的放入同名文件夾中,定義 noConflict 方法導(dǎo)出前一版本并返回當(dāng)然版本;

設(shè)計封裝(類,閉包,模塊)時,盡量使用嚴(yán)格模式;

在內(nèi)容為 js 的 script 標(biāo)簽上和內(nèi)容為 css 的 link 標(biāo)簽上省略 type 屬性和 lang 屬性;

注意變量名不要使用保留字和系統(tǒng)全局變量(方法)一樣;

以下行為污染全局: setTimeout 和 setInterval 的首參傳入字符串; eval()函數(shù); new Function() 構(gòu)造函數(shù)。

性能優(yōu)化 頁面渲染 減少頁面 reflow

修改元素多個樣式可以通過修改 className 完成,這樣可以把多次 reflow 減少為一次 reflow;

修改元素多個樣式可以分為三步：先隱藏(display:none), 再修改,最后顯示。這樣可以把多次 reflow 減少為兩次次 reflow;

添加頁面內(nèi)容可以通過將所有內(nèi)容寫入 docuemnt fragment 元素后再一次性 append 到頁面中;

添加頁面內(nèi)容可以通過將所有內(nèi)容組成長字符串,再一次性編輯 innerHTML 加入到頁面中;

css(style 標(biāo)簽和 link 標(biāo)簽) 放在 head 中,這樣瀏覽器在加載數(shù)據(jù)時候可以直接通過 css tree 生成 render tree, 減少不必要的重新渲染;

在不影響視覺效果的情況下,盡量減少 js 動畫精度;

div 布局優(yōu)于 table 布局,因?yàn)楹笳咧性厝我鈱傩愿拿紩φ麄€表進(jìn)行回流;

優(yōu)化用戶體驗(yàn)

使用懶加載技術(shù),保證首屏優(yōu)先加載;

使用異步腳步,不阻塞主頁面渲染;

先渲染界面,在不影響首屏情況下,使用 js 腳本動態(tài)加載后續(xù)數(shù)據(jù);

將不影響渲染的腳本后置(放在 body 之后),優(yōu)先渲染;

添加自定義的錯誤頁面（如404 not found 頁面）;

利用 GPU 加速;

代碼優(yōu)化

圖片 img 標(biāo)簽的 src 不要空著,以免產(chǎn)生多余請求;

href, url()和 src 中的鏈接,用//代替http://,/content/a.jpg代替content/a.jpg, 被替代的后者會多發(fā)送一個 http 請求;

合理優(yōu)化外鏈 css 和 JS 以利用緩存;

資源控制在25kB之內(nèi),否則移動端可能無法緩存;

減少不必要的 DOM 節(jié)點(diǎn);

十六進(jìn)制顏色優(yōu)于 rgb/hsl 函數(shù),圖形轉(zhuǎn)換優(yōu)于動畫,css 動畫優(yōu)于 js 動畫,少用 hack 寫法;

盡量避免 css 表達(dá)式;

不要重復(fù)加載相同代碼;

利用事件委托減少事件定義;

利用變量保存多次用到的 DOM 查詢結(jié)果,減少反復(fù)查找;

能用 !== 或 ===,就不要用 != 或 ==,減少不必要的隱式類型轉(zhuǎn)換;

盡量使用現(xiàn)有的函數(shù)方法,比如數(shù)組所有元素求和,直接用 reduce 方法, 再考慮用 map 方法,接著考慮 forEach 方法,然后是 for...in, 最后是 for;

利用 {} 或 [] 定義對象或數(shù)組,比 new Object() 或 new Array() 效率高;

避免 String 類型隱式裝箱（隱式調(diào)用 new String());

用 switch 代替過多的 if, 并按判斷條件的可能性排序,以便盡早結(jié)束判斷;

[].join() 動態(tài)生成字符串比字符串鏈接(+)性能更好;

nextSibling() 性能比 children 好；

cloneNode() 比 createElement() 效率高；

考慮在頁面渲染完畢以后再動態(tài)加載輔助用的外部 js 腳本；

網(wǎng)絡(luò)通信 減少通信鏈接次數(shù)

css spirit 將多次請求變?yōu)?次請求;

設(shè)置 http頭的屬性：connection: keep-alive,使得鏈接為長連接,減少頻繁的握手揮手過程;

設(shè)置合適的 http頭的屬性：expires, cache-control 和 max-age

合理利用瀏覽器本地緩存,路由緩存,使得一些數(shù)據(jù)不需要從服務(wù)器獲取;

去除不必要的重定向;

合并文件 如 css js腳本;

保存(緩存)必要的 Ajax 請求數(shù)據(jù);

減少數(shù)據(jù)傳輸距離和數(shù)據(jù)大小

壓縮代碼;

使用內(nèi)容分發(fā)網(wǎng)絡(luò)(cdn), 如 Akamai, Limelight等;

使用 Gzip 壓縮;

使用新的圖片格式或矢量圖,如 .apng, .webp 和 .svg;

必要時, 減小 cookie, 以減少 http 請求中的數(shù)據(jù)量;

盡量用縮寫的 css 樣式;

合理利用服務(wù)器緩存,cdn緩存;

盡量少用或不用 ETag,一般情況下 Expires 頭已經(jīng)夠用了;

合理利用服務(wù)器資源

使用負(fù)載均衡技術(shù),如硬件技術(shù)：Alteon, F5和軟件技術(shù)：Nginx, LVS;

減少 DNS 查找時間(控制在20ms~100ms);

設(shè)置圖片服務(wù)器;

增加 TTL 時長,建議為24hours(引自Steve Souders的《High Performance Web Sites》)

SEO

完善 meta 標(biāo)簽,discription 簡潔明了,keywords 清晰;

重要內(nèi)容不要用 js 或后端語言加載;

合理利用 h標(biāo)簽,尤其 h1 標(biāo)簽,有很高權(quán)重;

圖片寫上合理的 alt 值;

URI 控制在 256KB 之內(nèi);

不要使用 iframe;

語義化標(biāo)簽的使用;

綜合優(yōu)化

用多個域名存儲網(wǎng)站資源(減小cookie, 節(jié)約主域名連接數(shù),突破瀏覽器并發(fā)限制,優(yōu)化cdn緩存)

使用 base64 Encode 圖片,減小鏈接數(shù)量和傳輸大小。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/54629.html

相關(guān)文章

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...

    princekin 評論0 收藏0

  • web前端開發(fā)編碼規(guī)范及性能優(yōu)化

    摘要：性能優(yōu)化頁面渲染減少頁面修改元素多個樣式可以通過修改完成這樣可以把多次減少為一次修改元素多個樣式可以分為三步先隱藏再修改最后顯示。 代碼優(yōu)化 這個部分僅僅將代碼優(yōu)化本身,不考慮性能,關(guān)于代碼部分的性能優(yōu)化在 頁面渲染 部分 代碼優(yōu)化 中 HTML+CSS 符合 XHTML 規(guī)范: 小寫,正確嵌套,必須關(guān)閉; 雙引號,合理縮進(jìn),utf-8編碼; 標(biāo)簽語義化,便于維護(hù); 合理注釋,比如 ...

    zsy888 評論0 收藏0

  • web前端開發(fā)編碼規(guī)范及性能優(yōu)化

    摘要：性能優(yōu)化頁面渲染減少頁面修改元素多個樣式可以通過修改完成這樣可以把多次減少為一次修改元素多個樣式可以分為三步先隱藏再修改最后顯示。 代碼優(yōu)化 這個部分僅僅將代碼優(yōu)化本身,不考慮性能,關(guān)于代碼部分的性能優(yōu)化在 頁面渲染 部分 代碼優(yōu)化 中 HTML+CSS 符合 XHTML 規(guī)范: 小寫,正確嵌套,必須關(guān)閉; 雙引號,合理縮進(jìn),utf-8編碼; 標(biāo)簽語義化,便于維護(hù); 合理注釋,比如 ...

    susheng 評論0 收藏0

  • 前端周刊第62期：學(xué)習(xí)學(xué)習(xí)再學(xué)習(xí)

    摘要：騰訊前端技術(shù)大會和全球技術(shù)領(lǐng)導(dǎo)力峰會都于上周閉幕，我翻看了下講稿，有價值的參考還是不少。騰訊前端大會下載騰訊前端大會是由騰訊主辦，廣邀國內(nèi)外的前端大牛，有著名流行框架的作者知名前端書籍的作者工程化方面的權(quán)威等。 showImg(https://segmentfault.com/img/bVQk0r?w=757&h=427); 共 2462 字，讀完需 4 分鐘。騰訊前端技術(shù)大會（TFC...

    tinylcy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<