构建现代化网站的 20 个技巧(一)

鲁虺 · 發表於 2018-7-12 16:30:02

构建现代化网站的 20 个技巧(一) 在过去几年中，我们与web开发者花了很多时间交流，听得最多的一件事情就是创建一个能很好的跨越各种类型浏览器版本与各种设备的网站有多么难。我们为jQuery项目写代码的时候一直有这个问题。因此我们整理了20条编码模式与经验，它们是从出席无休止的会议和读了几百篇专稿中摘取出来的。我们希望能在你建站的时候给你节省一些时间（和麻烦）。
一.跨浏览器基础
1.网站不需要在所有浏览器里渲染得一样
一件普遍被开发者所关心的事情是确保他们的网站在所有浏览器中渲染得一样，包括非现代的一些。那一般并不需要。更好的路线是考虑逐渐增强你的网站，对非现代浏览器的用户提供一个可靠的工作基线，而给用现代浏览器的用户提供一个更丰富的UI。

2.从固体模版开始以简化开发
许多的技巧已经创建进项目模版如HTML5 Boilerplate 以节省你一些时间。这些准则对以现代浏览器为目标的项目和需要旧浏览器（一直回退到IE6）支持的项目工作得一样好。
3.关注稳定的标准
当一个新又酷的特性出现的时候很容易令人兴奋，但其中的一些可能仍然在为技术参数实验、仍然在开发中。重要的是要记得，在规范发展的早期是很容易变化的，这有可能影响你的网站的稳定性和你的用户的体验。通过关注稳定的标准，你可以确保你的用户能获得他们期望的体验，你的网站会更易维护。
4.用IE兼容检测工具帮助你的网站迁移到基于标准的代码
标准是IE10的一个核心部分，帮助开发者迁移他们的代码以便能发挥这项长处，这对IE工程项目组来说无比重要。这就是为什么他们创造了IE兼容检测工具，它能实时分析你的网站，准确的找到通常问题的类型并给出解决方法。通过在你的代码中包括一个简单的JavaScript脚本文件，在你的页面你就能得到可视化的结果。它也可以被集成进Fidder HTTP 分析工具。
5.谨慎使用polyfills和shims（模拟标准API）
如果你必须在不同浏览器实现系统的体验，polyfills和shims提供了代码和标签，可以帮助模拟标准的API和功能。需要谨记的是，确保你引入的代码适合你的需要，并且可以在日后维护。
6.开发时多浏览器测试
尽管相对以前，现代浏览器已经接近统一标准，但还是有不同。偶尔的多浏览器测试避免不会在最后一刻发现大问题——甚至已经上线了。确保查看所有浏览器调试器比如IE的F12 Dev Tools，检查有没有警告或错误信息。一些老浏览器比如IE7没有内建调试器，可以用Firebug Lite调试。或者使用跨浏览器解决方案如BrowserStack。
7.用工具参与创建过程来检测错误和缩小文件大小
有好一批创建工具如 HTML validators, CSS validators, Uglify, JSHint, 或者 GruntJS ，他们能找到潜在的问题，增强项目代码的标准，减少文件的大小提升性能。如果你的IDE或者代码编辑器支持它们，这些步骤就不会成为绊脚石。例如，Visual Studio提供了在创建过程中运行外部工具和合并/压缩脚本文件的能力。
!二.HTML
8.总是使用标准模式避免怪癖模式
直接用<!DOCTYPE html>吧！现代化网站不需要怪癖模式，不需要考虑90年代中期为了兼容现代化的浏览器比如IE6和FireFox 2.大多数现今的网页在怪癖模式下要么文档声明无效，要么出现无关文本。很容易导致布局异常，而且很难调试。

9.理解有限向后兼容的HTML标签
新HTML5标签比如<section>,<header>和<footer>改善标签的语义化，但需要特殊的辅助脚本让IE6,7和8认识他们。页面在太旧的浏览器或者禁止脚本时无法使用HTML5标签，那么使用<div>标签是对这些情况比较靠谱的解决方法。
10.将CSS在HTML文件顶部引入
在文档body中引入CSS会导致页面全空，直到CSS加载后才显示。CSS文件应该放在HTML文档的head中，让浏览器尽早地读取他们。欲知后事如何，请听下回分解！深圳网站建设

		自動登錄	找回密碼
密碼			立即註冊

[搜索优化] 构建现代化网站的 20 个技巧(一)