Web開發須要關注的技術細節

時間  2019-11-19
標籤 web 開發 須要 關注 技術 細節 欄目 HTML 简体版
原文   原文鏈接

摘要：在網站發佈前，開發者須要關注有許多的技術細節，好比接口設計、用戶體驗、安全性、Web標準、性能、SEO等，假若一個疏忽就會影響到總體的體驗效果。做爲一名Web開發者，哪些技術細節須要考慮呢？php

【編者按】在網站發佈前，開發者須要關注有許多的技術細節，好比接口設計、用戶體驗、安全性、Web標準、性能、SEO等，假若一個疏忽就會影響到總體的體驗效果。在Stackexchange上有人提出：做爲一名Web開發者，哪些技術細節是須要考慮的？做者Hedgehog對該文進行了編譯，這些資源有助於你瞭解一些關鍵技術，好比HTML、HTTP、XML、CSS、JavaScript、瀏覽器兼容性，減小網站加載時間的技巧、XML站點地圖、W3C規範等。一塊兒來看下：css

 

問：對於一個Web開發人員來講，在發佈一個站點以前，他須要處理哪些細節性的問題。假如Jeff  Atwood能在站點上忽略了對HttpOnly cookies，sitemaps和cross-site request  forgeries的關注，那我還能忽略些什麼呢？html

對於一個設計或提供站點內容的人來講，他們總認爲站點的可用性及內容總比這個平臺重要的多，固然在這個方面，Web開發人員沒有什麼話語權。對於一 個Web開發人員來講，其更多須要關注的是站點的穩定性，是否表現良好，安全性，是否知足了其餘商業目標（例如花費很多過高，構建時間很多太長，在 Google提供的搜索結果中是否有個良好的排名）。html5

咱們能夠從這個角度上討論這個問題：一個Web開發者在可信網絡環境下作了些成成果，而且他打算將這個成果部署到當前這個糟糕的互聯網環境上。另外，我也尋找一個更具體的答案而非一個模糊的」Web標準」，個人意思是已經瞭解了HTTP上的HTML、JavaScript、CSS技術，且認爲你已是一個專業的Web開發人員。那麼，除此以外還有那些標準，在什麼環境下使用？爲何？請提供一個連接到標準的規範。node

答：如下大部分的觀點也許大部分都已知悉，可是其中有少許的觀點你獲取歷來沒有看過，別擔憂，你沒必要所有理解他們，或許對你來講你永遠也不須要了解到他們。web

1、接口設計及用戶體驗算法

 

  • 你須要知道各類瀏覽器實現標準不一致，你須要保證你的站點在主流瀏覽器上可以良好運行。至少須要測試：基於Gecko引擎的瀏覽器（例如：Firefox），基於Webkit引擎的瀏覽器（例如Safari和其餘一些手機瀏覽器），Chrome，IE及Opera。同時也須要考慮在不一樣的操做系統上，各類瀏覽器如何渲染你的站點。
  • 考慮你的站點將會被如何使用：是在手機端訪問，PC上的瀏覽器訪問，亦或是搜索引擎。
  • 在避免影響用戶的狀況下如何發佈更新。是否有一個或者多個測試/臨時以便在不打斷站點訪問的狀況下進行架構、代碼及內容的更新。是否有自動化的方式對在線站點進行發佈。這些可使用一套版本控制系統及自動化構建方式來有效實施。
  • 不容許向用戶提示不友好的錯誤信息。
  • 不要以純文本的方式提供出用戶的email地址，由於他們會收到過多的垃圾郵件而死亡。
  • 在用戶生成的連接上增長rel=」nofollow」屬性，以免垃圾郵件。
  • 對你的站點創建些限制，固然這應該是通過深思熟慮的-這也屬於安全性範圍。
  • 學習如何逐步提升站點功能。
  •  爲避免重複提交，當POST成功執行後須要進行頁面跳轉。
  •  不要忘記考慮輔助功能。它老是一個好主意，且在某些狀況下這是一個法律要求。 WAI-ARIA和WCAG2個在這方面的良好資源。
  • 不要讓我想該如何進行操做。

 

2、安全性數據庫

 

  •  有不少須要闡述，可是OWASP開發指南中依據對Web站點安全性從頭到腳進行了介紹。
  •  要了解注入特別是SQL注入，並學會如何避免他。
  •  永遠不要相信用戶的輸入，也不是來自於請求別的(包括cookie和隱藏的表單字段值)。
  •  不要使用單獨相似MD5或SHA加密策略，在進行散列密碼值時，使用做料或多種做料以防止彩虹攻擊。對於短密碼，採用一個短散列算法處理，例如：bcrypt或scrypt。
  • 不要使用你想象中的身份認證系統，很容易獲得一個微妙的錯誤和不可測試的問題，甚至你本身都不知道會怎麼回事。
  • 瞭解處理信用卡規則。
  • 使用SSL/HTTPS處理任何敏感數據。
  • 防止會話劫持。
  • 避免跨站點腳本攻擊。
  • 避免跨站點請求僞造。
  • 避免點擊劫持。
  • 確保你的系統安裝了最新的補丁。
  • 確保你的數據庫鏈接信息是安全的。
  • 瞭解最新的攻擊技術以避免影響到你的平臺。
  •  閱讀谷歌安全手冊。
  •  閱讀web應用程序黑客手冊。
  • 考慮最小權限的負責人機制。

 

3、性能canvas

 

  • 若是有必要的話實現緩存策略。理解Http caching和html5 manifest並在合適的地方使用它們。
  • 優化圖像-不要使用20 KB大小的圖像作重複背景。
  • 瞭解如何gzip/deflate內容。
  • 合併/鏈接多個樣式表或多個腳本文件，以減小瀏覽器鏈接的數量，並經過gzip來壓縮多個文件中的重複內容。
  • 閱覽雅虎卓越性能站點，其中包含大量很棒的指南，例如端到端的性能提高方法，YSlow工具。Goole page speed是是一個優化參考的好去處。
  • 使用CSS image sprite技術減小圖片請求。(ps:前段時間用node-canvas作了個本地化的css-sprite工具，有須要的能夠找我拿源碼^_^)。
  • 訪問量大的站點能夠將內容劃分到多個域下，但不要超過4個域。
  • 靜態內容(例如圖片，css文件，js文件及一些靜態文本)應該存放在一個單獨的域下面，而且不能使用cokies，由於在每次請求時，都會將cookies帶上。CDN(內容分發網絡)是一個不錯的選擇。
  • 減小一個瀏覽器頁面上發起的http請求數量。
  • 使用JavaScript文件壓縮技術。
  •  確保在站點的根目錄下有一個favicon.ico文件，即便該文件未被任何使用，流量器也會自動加載它。若是沒有這個文件的話，將會致使大量的404錯誤，從而佔用你的服務器帶寬。

 

4、SEO（搜索引擎優化）瀏覽器

 

  • 使用搜索引擎友好的的url，例如：使用example.com/pages/45-article-title 而非example.com/index.php?page=45
  • 當使用＃動態內容更改＃到＃！而後在服務器$_REQUEST[「_escaped_fragment_」]是什麼Googlebot使用，而不是＃！換句話說，＃！頁= 1/變成/？_escaped_fragments_=頁= 1。此外，對於可能使用FF.b4或鉻，history.pushState用戶（{「foo」的：「酒吧」}「。？/頁=1」，「關於」，）;是一個偉大的命令。所以，即便在地址欄改變了頁面不會從新加載。這使您可使用？而不是＃！保持動態內容，並告訴服務器當您發送電子郵件，咱們是這個頁面後的連接，以及AJAX並不須要再做額外的要求。（Google翻譯，沒有徹底理解…）
  • 不要使用」click here」這樣的連接，這樣會浪費SEO的機會而且也會讓人更加難以理解。
  • 要有一個XML站點地圖，最好是在默認位置/sitemap.xml的。
  • 當你有兩個指向不一樣的地址，可使用<link rel="canonical".../>，這個問題也能夠從谷歌網站管理員
  • 使用Google Webmaster Tools 和 Bing Webmaster Tools.
  • 使用Google Analytics。
  • 瞭解機器人搜尋算法和搜索引擎爬蟲的工做方式。
  • 重定向請求（使用301永久移動）要求www.example.com到example.com（或者反過來），以防止分裂谷歌兩個網站之間的排名。
  • 你還要知道還有不少噁心的爬蟲程序運做在網絡上。(之前在作一個百科詞條整理時，對某網站的詞條進行了深度遍歷，但程序運行不久IP就被封殺了。)

 

5、技術點

 

  • 理解HTTP協議，例如：GET，POST，Session，Cookies以及「無狀態」的含義。
  • 根據W3C規範寫你的XHTML/ HTML和CSS，並確保他們經過驗證。這是爲了不瀏覽器的使用非標準的瀏覽器，如屏幕讀取器和移動設備的正常工做。
  • 瞭解JavaScript在瀏覽器中的運行機制。
  • 理解JavaScript、css及其餘資源在頁面上是如何被加載的，並考慮他們對性能的影響。如今廣泛接受將腳本放在應用程序或html5底部執行。
  • 瞭解JavaScript沙箱的工做原理，特別是若是你打算使用iframe。
  • 你要注意到JavaScript是能夠被禁止的，而且AJAX是一個拓展而非基線。不少普通用戶已經離開了它，NoScript愈來愈受歡迎，移動設備或許不會像你想象的那樣運行，谷歌將沒法運行大部分的的JavaScript。(不解，noscript標籤是定義在未能執行js時的輸出，當是當前js橫行的時代，真的還有不少用戶禁用js嗎？？？)
  • 理解重定向301和302的區別。(這也是SEO中的一項)
  • 儘量深刻了解你的開發環境。
  • 考慮使用Reset CSS或Normalize.css。
  • 考慮JavaScript框架（如jQuery，MooTools，Prototype，Dojo或YUI3），這將使用JavaScript進行DOM操做時，隱藏了不少的瀏覽器差別。
  • 考慮到JS框架及性能，可使用一個服務，如谷歌庫API來加載框架，使瀏覽器可使用它已經緩存，而不是從你的網站下載一個副本的框架副本。(CDN)
  • 不要重複造輪子。作任何事情以前先搜索關於如何作到這一點的組件或例子。有99％的可能性有人已經作到了和發佈了一個開源版本的代碼。
  • 在明確你的需求以前，不要使用20個庫去堆砌功能。特別是在客戶端訪問，其最重要的就是讓事情輕便、快速和靈活。

 

6、Bug修復

 

  • 你要知道你將要花費80%的時間去維護你20%時間寫的代碼，因此編碼時請仔細。
  • 創建一個良好的錯誤報告解決方案。
  • 有一個能讓你們提供建議或提出批評的系統。
  • 將將來支持的功能及維護人員記錄在文檔中。
  • 頻繁的備份！ （而且確保這些備份是功能性）埃德·盧卡斯的回答有一些忠告。有一個恢復策略，而不僅是一個備份策略。
  • 有一個版本控制系統來存放文件，例如Subversion，Mercurial或Git。
  • 不要忘記作些驗收測試，相似Selenium框架能夠提供方便。
  • 請確保您有足夠的日誌記錄在案，例如使用框架log4j，log4net或log4r。若是你的網站發生了錯誤，你要知道發生了什麼事情。
  • 當登陸時請務必同時捕獲處理異常和未處理的異常。報告/分析日誌的輸出，由於它會告訴你網站中的關鍵問題。
不少知識都省略了，並非由於他們不是有用的答案，而是它們要麼過於詳細，要麼超出了範圍，亦或對某些人來講過於深刻。你們應該知道這知識概述，請隨意暢談，由於我可能錯過了一些東西或者也犯了一些錯誤。

 

推薦閱讀：

 

 

http://www.csdn.net/article/2014-05-19/2819818-technical-details-programmer

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程