成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Web最佳實(shí)踐閱讀總結(jié)(1)

Cympros / 1067人閱讀

摘要：介紹最近開始刷一些書和題此系列是介紹在讀最佳實(shí)踐的一些收獲和體會(huì)。先修改諸如命名，格式等不涉及具體邏輯的內(nèi)容重構(gòu)過程中要持續(xù)測試，在多個(gè)瀏覽器測試，確保重構(gòu)的部分功能正確。

介紹

最近開始刷一些書和題,此系列是介紹在讀Web最佳實(shí)踐的一些收獲和體會(huì)。

web前端發(fā)展現(xiàn)狀

存在問題：

代碼組織混亂

代碼格式的問題突出

頁面布局隨意

網(wǎng)站整體性能差，沒有意識(shí)到應(yīng)用諸如緩存，動(dòng)態(tài)加載，腳本壓縮，圖片壓縮等提高性能技術(shù)

推薦做法：

壓縮樣式表和腳本文件

減少HTTP請求次數(shù)

簡潔和符合W3C標(biāo)準(zhǔn)的HTML和CSS代碼能減少瀏覽器解析的時(shí)間，加快渲染過程

頁面請求數(shù)量越少，相對(duì)頁面的加載速度更快

在JS代碼中選擇性能更好的實(shí)現(xiàn)方案，如延遲加載，動(dòng)態(tài)加載等技術(shù);

延遲加載

最后加載

引入外部js腳本文件時(shí)，如果放入html的head中,則頁面加載前該js腳本就會(huì)被加載入頁面，而放入body中，則會(huì)按照頁面從上倒下的加載順序來運(yùn)行javascript的代碼，所以可以把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度

動(dòng)態(tài)加載

     
     
    s1.src="test.js"

前端代碼重構(gòu)

刪除無用代碼，精簡代碼（不起作用的CSS樣式和廢棄的JavaScript函數(shù)）

前端代碼規(guī)范化，把CSS代碼放到獨(dú)立的文件中，在JS定義局部變量，把部分全局變量改變成局部變量

前端代碼模塊化，引入面向?qū)ο蟮乃枷雭碇貥?gòu)JavaScript代碼，進(jìn)一步明確公有接口和私有接口

提高頁面性能：

將部分不影響首頁展示的JS文件延遲到頁面的加載后加載

刪除頁面中初始隱藏的區(qū)域，改為通過JS按需動(dòng)態(tài)生成

頁面中的部分圖片延遲加載

調(diào)整CSS和JS文件引用順序，即CSS在前，JS在后

給靜態(tài)文件設(shè)置緩存，使用CSS Sprite，合并背景圖

合并和壓縮發(fā)布后的CSS和JS代碼模塊

前端重構(gòu)最佳實(shí)踐

重構(gòu)前一定要預(yù)測風(fēng)險(xiǎn)，最好先完善自動(dòng)化測試代碼

重構(gòu)的目的和范圍要明確，提高代碼的可維護(hù)性，可讀性和性能

最好先易后難，循序漸進(jìn)。先修改諸如命名，格式等不涉及具體邏輯的內(nèi)容

重構(gòu)過程中要持續(xù)測試，在多個(gè)瀏覽器測試，確保重構(gòu)的部分功能正確。切記大量重構(gòu)后再進(jìn)行測試，因?yàn)榇罅恐貥?gòu)后基本很難記得重構(gòu)的邏輯，也可能遺漏部分測試用例

性能提升，先進(jìn)行檢測網(wǎng)站的整體性能并量化，找出性能瓶頸。重構(gòu)過程中要持續(xù)監(jiān)控性能，并進(jìn)行對(duì)比

前端框架的使用

項(xiàng)目需求

調(diào)查項(xiàng)目是否需要AJAX操作

是否需要模塊化

數(shù)據(jù)傳輸格式JSON或者XML

需要支持的瀏覽器

移動(dòng)還是普通網(wǎng)站

需要的UI模塊（模態(tài)窗口，滑塊控件，進(jìn)度條，提示框，分割框，幻燈顯示，自動(dòng)填充）

項(xiàng)目的特點(diǎn)

框架的特點(diǎn)

代碼質(zhì)量

編寫高質(zhì)量，標(biāo)準(zhǔn)的HTML（標(biāo)準(zhǔn)校驗(yàn)工具，ESLint, Flow, JSDoc, ts）

明確瀏覽器支持范圍

Chrome和Safari IE Tester（IE兼容測試工具

避免瀏覽器兼容性的問題

先考慮更改方案，使用沒有兼容問題的代碼

考慮如何兼容的問題

兼容IE，使用IE特有的條件表達(dá)式(hack)

讓兼容的代碼獨(dú)立，提高代碼的可維護(hù)性

HTML5新特性

新標(biāo)簽的兼容，CSS3的兼容，新增的API（使用html5shiv框架）

CSS3本身不支持，會(huì)直接忽略

新增加的接口的使用，必須添加條件判斷（Modernizr）

多看Can I use

web性能分析

YSlow，pagespeed

基于不同的規(guī)則評(píng)定網(wǎng)站整體性能評(píng)分

給出提高網(wǎng)頁性能的建議

統(tǒng)計(jì)頁面加載的組件

頁面的統(tǒng)計(jì)信息視圖

相關(guān)性能分析工具集：Smush.it

Chrome開發(fā)工具

Network中可以查看各資源請求和下載所用的時(shí)間

Timeline可以查看網(wǎng)頁渲染和交互過程中個(gè)步驟所花費(fèi)的時(shí)間，從資源到JS的解析執(zhí)行，樣式的應(yīng)用和繪制

Profiles中可以查看網(wǎng)頁的CPU及內(nèi)存占有情況報(bào)告

Audits中提供了各種資源和配置優(yōu)化的建議和未使用CSS規(guī)則的列表

加快代碼和資源文件傳輸?shù)姆绞?/p>

CDN分發(fā)

緩存(meta)

壓縮代碼和資源文件（最優(yōu)）

Gzip算法（壓縮，header可以檢查是否開啟）

JS壓縮（UglifyJS壓縮和優(yōu)化，YUI Compressor 僅壓縮，Closure Compiler壓縮和優(yōu)化）

CSS(CSS Compressor,YUI Compressor)

HTML(HtmlCompressor使用時(shí)仔細(xì)調(diào)查和測試，避免壓縮工具和破壞)

圖片資源壓縮（TinyPNG，JPEGmini，ImageOptim)

Airbnb規(guī)范: https://github.com/airbnb/jav...

Eslint規(guī)范: https://eslint.org/docs/rules/

Beachmark.js性能測試: https://benchmarkjs.com/docs#toc

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88906.html

相關(guān)文章

  • Web最佳實(shí)踐閱讀總結(jié)(1)

    摘要：介紹最近開始刷一些書和題此系列是介紹在讀最佳實(shí)踐的一些收獲和體會(huì)。先修改諸如命名，格式等不涉及具體邏輯的內(nèi)容重構(gòu)過程中要持續(xù)測試，在多個(gè)瀏覽器測試，確保重構(gòu)的部分功能正確。 介紹 最近開始刷一些書和題,此系列是介紹在讀Web最佳實(shí)踐的一些收獲和體會(huì)。 showImg(https://segmentfault.com/img/remote/1460000011465909?w=309&...

    liaosilzu2007 評(píng)論0 收藏0

  • Web最佳實(shí)踐閱讀總結(jié)(1)

    摘要：介紹最近開始刷一些書和題此系列是介紹在讀最佳實(shí)踐的一些收獲和體會(huì)。先修改諸如命名，格式等不涉及具體邏輯的內(nèi)容重構(gòu)過程中要持續(xù)測試，在多個(gè)瀏覽器測試，確保重構(gòu)的部分功能正確。 介紹 最近開始刷一些書和題,此系列是介紹在讀Web最佳實(shí)踐的一些收獲和體會(huì)。 showImg(https://segmentfault.com/img/remote/1460000011465909?w=309&...

    DirtyMind 評(píng)論0 收藏0

  • Web最佳實(shí)踐閱讀總結(jié)(2)

    摘要：代碼符合標(biāo)準(zhǔn)標(biāo)準(zhǔn)的頁面會(huì)保證正確的渲染頁面容易被搜索引擎搜索，提高搜索排名提高網(wǎng)站的易用性網(wǎng)頁更好維護(hù)和擴(kuò)展，屬于插件停止使用不標(biāo)準(zhǔn)的標(biāo)簽和屬性，簡化代碼標(biāo)簽沒有實(shí)際意義，僅設(shè)置樣式不推薦使用不推薦使用，讓擁有更好的語義移除不常用的標(biāo)簽樣式 代碼符合標(biāo)準(zhǔn) 標(biāo)準(zhǔn)的頁面會(huì)保證正確的渲染 頁面容易被搜索引擎搜索，提高搜索排名(SEO) 提高網(wǎng)站的易用性 網(wǎng)頁更好維護(hù)和擴(kuò)展（Validato...

    chavesgu 評(píng)論0 收藏0

  • Web最佳實(shí)踐閱讀總結(jié)(2)

    摘要：代碼符合標(biāo)準(zhǔn)標(biāo)準(zhǔn)的頁面會(huì)保證正確的渲染頁面容易被搜索引擎搜索，提高搜索排名提高網(wǎng)站的易用性網(wǎng)頁更好維護(hù)和擴(kuò)展，屬于插件停止使用不標(biāo)準(zhǔn)的標(biāo)簽和屬性，簡化代碼標(biāo)簽沒有實(shí)際意義，僅設(shè)置樣式不推薦使用不推薦使用，讓擁有更好的語義移除不常用的標(biāo)簽樣式 代碼符合標(biāo)準(zhǔn) 標(biāo)準(zhǔn)的頁面會(huì)保證正確的渲染 頁面容易被搜索引擎搜索，提高搜索排名(SEO) 提高網(wǎng)站的易用性 網(wǎng)頁更好維護(hù)和擴(kuò)展（Validato...

    selfimpr 評(píng)論0 收藏0

  • Web最佳實(shí)踐閱讀總結(jié)(2)

    摘要：代碼符合標(biāo)準(zhǔn)標(biāo)準(zhǔn)的頁面會(huì)保證正確的渲染頁面容易被搜索引擎搜索，提高搜索排名提高網(wǎng)站的易用性網(wǎng)頁更好維護(hù)和擴(kuò)展，屬于插件停止使用不標(biāo)準(zhǔn)的標(biāo)簽和屬性，簡化代碼標(biāo)簽沒有實(shí)際意義，僅設(shè)置樣式不推薦使用不推薦使用，讓擁有更好的語義移除不常用的標(biāo)簽樣式 代碼符合標(biāo)準(zhǔn) 標(biāo)準(zhǔn)的頁面會(huì)保證正確的渲染 頁面容易被搜索引擎搜索，提高搜索排名(SEO) 提高網(wǎng)站的易用性 網(wǎng)頁更好維護(hù)和擴(kuò)展（Validato...

    RiverLi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Cympros

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<