前端最佳实践

最佳实践，最佳实践，最佳实践，重要的事情说三遍，网上看了好多最佳实践总觉得不够，可能是因为合适的才是最佳的，所以自己也来总结一下最佳实践，不妥之处还望走过路过的大牛指正。

前端简单说起来就是html、css、js三分天下吧，深的就不说了（此时的我也不懂哈）以下主要从编码规范、兼容问题、性能优化及常用插件等方面进行总结（希望基于相关书籍和工作实践不断完善我自己的最佳实践）

HTML篇

1. 首先一点就是一定要用最新技术，技术在飞快发展别让一些“钉子户”拖慢了你的脚步，当然用户至上，该兼容的咱回头继续兼容
2. 遵循H5规范，使用语义化标签（使用html5shiv兼容ie9以下）
3. 新增加的接口的使用，必须添加条件判断（Modernizr特性检测）
4. 兼容IE，使用IE特有的条件表达式
5. 加快代码和资源文件传输的方式 ：CDN分发、缓存

CSS篇

1. 让不支持CSS3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询（respond.js）
2. 编写 CSS 时不需要添加浏览器前缀，直接使用标准的 CSS 编写（使用 Autoprefixer 自动添加浏览器厂商前缀）
3. 不要使用@import，与 <link> 相比，@import 要慢很多，不光增加额外的请求数，还会导致不可预料的问题

JS篇

1. JS最重要的就是性能优化，详见JS性能优化

 

 

兼容性插件

　　　　 <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
        <!-- 警告：通过 file:// 协议访问页面时 Respond.js 不起作用 -->
        <!--[if lt IE 9]>
        <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

 

工具篇

• 压缩代码和资源文件（最优）
• Gzip算法（压缩，header可以检查是否开启）
• JS压缩（UglifyJS压缩和优化，YUI Compressor 仅压缩，Closure Compiler压缩和优化）
• CSS(CSS Compressor,YUI Compressor)
• HTML(HtmlCompressor使用时仔细调查和测试，避免压缩工具和破坏)
• 图片资源压缩（TinyPNG，JPEGmini，ImageOptim）
• 使用ANT（构建代码和资源压缩任务）
• grunt压缩（js：grunt-contrib-uglify，css：grunt-contrib-cssmin，图片：grunt-contrib-imagemin）