具有梦天堂特色的.pptVIP

具有梦天堂特色的 叫我三桂吧 Web前端开发规范 /aNd1coder 主要内容 关于规范 现状 文件管理规范 版本控制规范 页面设计规范 代码编写规范 性能优化规范 网站SEO规范 开发调试工具 未来计划 互动交流 关于规范 何为规范： 对于某一工程作业或者行为进行定性的信息规定。 主要是因为无法精准定量而形成的标准，所以，被称为规范。[百度百科: /view/113045.htm] 为何规范： 规范并不是一种限制，而是约定，强调团队的一致性 加强团队之间的合作，提高协作效率 形成一种团队文化 最终是为项目服务的．我们所做的一切都是为了优化项目和流程，提高我们的工作效率 现状 静态资源文件目录结构混乱 与上下游流程不顺畅，没有约定的规范 代码没有标准可言，命名、代码组织等不统一 代码签入签出无规律导致冲突死锁 网站存在性能问题，没有统一的性能优化方案 网站没有针对性的做SEO，比较随意 开发工具不够强大导致效率低下 前端团队缺少交流，知识零散，没有积累 文件管理规范 静态资源架构图 文件管理规范 静态资源架构图(static) 文件管理规范 静态资源架构图(www) 版本控制规范 代码提交前清理无关文件(比如Dreamweaver产生_note，缩略图缓存数据文件thumb.db等等) 对于CSS以及JS约定好的代码注释必须加上之后再提交到SVN，方便SVN自动更新文件编辑信息以及版本号 变更文件(特别是模版文件以及重要的页面)比较大时最好做好备份工作，方便发布到正式线出现问题时快速撤回 代码修改或发布前获取下最新版本，有规律的提交代码。签入代码前经过良好的测试。 页面设计规范 为规范公司网页版面，防止出现页面之间的尺寸跳跃性太大，保证在主流显示器分辨率下内容正常显示（不出现横向滚动条等），规定： 平台、官网页面分辨率：960px × *px 专题转或页面分辨率：小于1004px ×*px 静态页面上使用的图片大小必须控制在200K以内，内容图片在不影响视觉效果的前提下压缩到最小体积。(接下来改版会出各页面图片的详细规格，比如平台首页切换图片的宽高以及大小等) 页面设计规范 设计师出设计稿时： 最好附带上色卡并在各块区域标识出来，防止颜色丢失 有状态切换的区域做好对照图，防止遗漏 标识出各模块之间留白的精确像素，防止抓狂 交付页面给技术时： 格式化代码，让代码富有有层次感，并做适当的区域注释，方便技术快速定位并修改代码，防止标签丢失造成版面错乱难以找到问题 合理的拆分页面模块，充分利用SSI，让技术知道哪些模块是可以重用 页面设计规范 代码编写规范 命名规范 用简短有意义的英文或者拼音（不能出现中文命名）来命名文件夹和文件，不能起有歧义的命名并统一小写；(后期可以整理一份常用的词汇表,减少为命名而浪费太多时间) 编码规范 目前我们的所有文件编码以及代码编码都统一为utf-8,所以出现很多诡异问题首先看看是不是编码不一致导致的 注释规范 给代码加上适当的注释，便于协作以及后期维护(CSS以及JS文件头注释，以及代码块注释等等，见SVN中代码段模版) 代码编写规范 - HTML注释示例 代码编写规范 - CSS注释示例 代码编写规范 - Javascript注释示例 性能优化规范 合理布局并书写语义化的HTML，保持简洁清晰的代码是最最好的优化，也是性能优化的第一步 合理利用class和id，书写高效的css选择器，合并前批量去掉最后一个分号减少文件体积，尽量不要使用expression等等，由于细节比较多可单独出一份文档 由于大多都是操作DOM，所以在查找节点时书写高效的选择器是关键(jQuery)；缓存频繁使用的对象、数组及相关的属性；使脚本尽可能少地运行或者不运行(按需加载,比如选项卡数据在页面加载时只加载第一个选项卡的内容数据；suggest搜索框只在用户输入内容时才去加载和执行相应的脚本)，由于细节比较多可单独出一份文档（由旺旺单独整理） 性能优化规范 合理的使用图片格式，并进行压缩优化，保持图片最佳视觉以及大小 Css，Js压缩以及合并，力求降低http请求数(合并请求方案已与运维沟通) 合理的使用CSS Sprite，力求降低http请求数 对于大数据，多屏页面进行数据延迟加载处理，以及图片预加载等，效果可观 参考《网站性能优化的34条黄金法则》以及YSlow，PageSpeed等建议和参考 性能优化规范 - 延迟加载 性能优化规范 没人愿意等待：网页打开速度的心理学(针对网页首屏) 性能优化规范 优化代价太高 勿超前优化 有针对性的做优化… 网站SEO规范 设计页面时确保有Title,Description,Keywords等完整的meta标签(目前项目组有专人