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

資訊專欄INFORMATION COLUMN

Web最佳實踐閱讀總結(1)

liaosilzu2007 / 1304人閱讀

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

介紹

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

web前端發展現狀

存在問題：

代碼組織混亂

代碼格式的問題突出

頁面布局隨意

網站整體性能差，沒有意識到應用諸如緩存，動態加載，腳本壓縮，圖片壓縮等提高性能技術

推薦做法：

壓縮樣式表和腳本文件

減少HTTP請求次數

簡潔和符合W3C標準的HTML和CSS代碼能減少瀏覽器解析的時間，加快渲染過程

頁面請求數量越少，相對頁面的加載速度更快

在JS代碼中選擇性能更好的實現方案，如延遲加載，動態加載等技術;

延遲加載

最后加載

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

動態加載

     
     
    s1.src="test.js"

前端代碼重構

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

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

前端代碼模塊化，引入面向對象的思想來重構JavaScript代碼，進一步明確公有接口和私有接口

提高頁面性能：

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

刪除頁面中初始隱藏的區域，改為通過JS按需動態生成

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

調整CSS和JS文件引用順序，即CSS在前，JS在后

給靜態文件設置緩存，使用CSS Sprite，合并背景圖

合并和壓縮發布后的CSS和JS代碼模塊

前端重構最佳實踐

重構前一定要預測風險，最好先完善自動化測試代碼

重構的目的和范圍要明確，提高代碼的可維護性，可讀性和性能

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

重構過程中要持續測試，在多個瀏覽器測試，確保重構的部分功能正確。切記大量重構后再進行測試，因為大量重構后基本很難記得重構的邏輯，也可能遺漏部分測試用例

性能提升，先進行檢測網站的整體性能并量化，找出性能瓶頸。重構過程中要持續監控性能，并進行對比

前端框架的使用

項目需求

調查項目是否需要AJAX操作

是否需要模塊化

數據傳輸格式JSON或者XML

需要支持的瀏覽器

移動還是普通網站

需要的UI模塊（模態窗口，滑塊控件，進度條，提示框，分割框，幻燈顯示，自動填充）

項目的特點

框架的特點

代碼質量

編寫高質量，標準的HTML（標準校驗工具，ESLint, Flow, JSDoc, ts）

明確瀏覽器支持范圍

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

避免瀏覽器兼容性的問題

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

考慮如何兼容的問題

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

讓兼容的代碼獨立，提高代碼的可維護性

HTML5新特性

新標簽的兼容，CSS3的兼容，新增的API（使用html5shiv框架）

CSS3本身不支持，會直接忽略

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

多看Can I use

web性能分析

YSlow，pagespeed

基于不同的規則評定網站整體性能評分

給出提高網頁性能的建議

統計頁面加載的組件

頁面的統計信息視圖

相關性能分析工具集：Smush.it

Chrome開發工具

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

Timeline可以查看網頁渲染和交互過程中個步驟所花費的時間，從資源到JS的解析執行，樣式的應用和繪制

Profiles中可以查看網頁的CPU及內存占有情況報告

Audits中提供了各種資源和配置優化的建議和未使用CSS規則的列表

加快代碼和資源文件傳輸的方式

CDN分發

緩存(meta)

壓縮代碼和資源文件（最優）

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

JS壓縮（UglifyJS壓縮和優化，YUI Compressor 僅壓縮，Closure Compiler壓縮和優化）

CSS(CSS Compressor,YUI Compressor)

HTML(HtmlCompressor使用時仔細調查和測試，避免壓縮工具和破壞)

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

Airbnb規范: https://github.com/airbnb/jav...

Eslint規范: https://eslint.org/docs/rules/

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51341.html

相關文章

  • Web最佳實踐閱讀總結(1)

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

    Cympros 評論0 收藏0

  • Web最佳實踐閱讀總結(1)

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

    DirtyMind 評論0 收藏0

  • Web最佳實踐閱讀總結(2)

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

    chavesgu 評論0 收藏0

  • Web最佳實踐閱讀總結(2)

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

    selfimpr 評論0 收藏0

  • Web最佳實踐閱讀總結(2)

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

    RiverLi 評論0 收藏0

發表評論

0條評論

liaosilzu2007

男|高級講師

TA的文章

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