前端开发中的MCRV模式
发布日期：2011年7月08日
类别：HTML/CSS, JavaScript | 评论(5)针对前端开发中基于ajax的复杂页面开发所面临的代码规模大，难以组织和维护，代码复用性、扩展性和适应性差等问题，本文尝试以MVC思想为基础，结合Web前端开发中内容-结构-表现-行为相分离的开发标准，提出一种将Web页面代码分为视图（View，页面静态部分，包括内容、结构、表现）、模型(Model，负责数据缓存、数据校验与本地逻辑处理、发起ajax请求)、控制器（Controller，负责用户和系统事件响应、模型和呈现器调度）、呈现器（Renderer，对视图的渲染，控制器与事件的绑定、数据搜集）的页面开发新模式，并基于此模式提出了一个开发框架原型。
摘要
针对前端开发中基于ajax的复杂页面开发所面临的代码规模大，难以组织和维护，代码复用性、扩展性和适应性差等问题，本文尝试以MVC思想为基础，结合Web前端开发中内容-结构-表现-行为相分离的开发标准，提出一种将Web页面代码分为视图（View，页面静态部分，包括内容、结构、表现）、模型(Model，负责数据缓存、数据校验与本地逻辑处理、发起ajax请求)、控制器（Controller，负责用户和系统事件响应、模型和渲染器调度）、渲染器（Renderer，对视图的渲染，控制器与事件的绑定、数据搜集）的页面开发新模式，并基于此模式提出了一个开发框架原型。
关键字:
MCRV设计模式 Javascript MVC Web开发标准
浏览器的加载与页面性能优化
发布日期：2011年2月15日
类别：HTML/CSS, JavaScript, 前端技术 | 评论(16)本文将探讨浏览器渲染的loading过程，主要有2个目的：
- 了解浏览器在loading过程中的实现细节，具体都做了什么
- 研究如何根据浏览器的实现原理进行优化，提升页面响应速度
由于loading和parsing是相互交织、错综复杂的，这里面有大量的知识点，为了避免过于发散本文将不会对每个细节都深入研究，而是将重点放在开发中容易控制的部分（Web前端和Web Server），同时由于浏览器种类繁多且不同版本间差距很大，本文将侧重一些较新的浏览器特性
现有知识
提升页面性能方面已经有很多前人的优秀经验了，如Best Practices for Speeding Up Your Web Site和Web Performance Best Practices
本文主要专注其中加载部分的优化，总结起来主要有以下几点：
-
带宽
- 使用CDN
- 压缩js、css，图片优化
-
HTTP优化
- 减少转向
- 减少请求数
- 缓存
- 尽早Flush
- 使用gzip
- 减少cookie
- 使用GET
-
DNS优化
- 减少域名解析时间
- 增多域名提高并发
-
JavaScript
- 放页面底部
- defer/async
-
CSS
- 放页面头部
- 避免@import
-
其它
- 预加载
接下来就从浏览器各个部分的实现来梳理性能优化方法
浏览器渲染与web前端开发 – 在电子科技大学的技术交流
发布日期：2010年10月27日类别：HTML/CSS, JavaScript, 前端技术 | 评论(7)10月23日下午，借着校园招聘的机会，我们来到了电子科技大学与同学们进行技术交流。
基于Canvas的热力图绘制方法
发布日期：2010年8月31日
一. 介绍
最近参与的一个项目Marmot中需要根据点坐标绘制热力图。
热力图
以特殊高亮的形式显示访客热衷的页面区域或访客所在的地理区域
特点为：
1. 可以显示不可点击区域发生的事情。你将发现用户经常会点击那些不是链接的地方，也许你应该在那个地方放置一个资源链接。比如：如果你发现人们总是在点击某个产品图片，你能想到的是，他们也许想看大图，或者是想了解该产品的更多信息。 同样，他们可能会错误地认为特别的图片就是导航链接。
2. 热力图同时还能告诉你，页面的哪些部分吸引了大多数用户的注意。这对那些对web分析数据没有很多经验的产品人员非常有用。
3. 如果你在一个页面上有多个链接指向同一个URL，例如：如果有不同位置的3个链接指到同一个特定的产品页面 ，那么热力图将会显示你的访客最喜欢点击哪一个链接，这将帮助你提升网页的设计并让它对用户更加友好，不过实现这个功能需要一些设置。
…………
实例如下：
Web Storage全解析
发布日期：2010年6月21日
类别：HTML/CSS, JavaScript, 前端技术 | 评论(6)Web应用的发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie，但是作为真正的客户端存储，Cookie则存在很多致命伤。此外，在IE6及以上版本中还可以使用userData Behavior、在Firefox下可以使用globalStorage、在有Flash插件的环境中可以使用Flash Local Storage，但是这几种方式都存在兼容性方面的局限性，因此真正使用起来并不理想。针对以上情况，HTML5中给出了更加理想的解决方案：假如你需要存储复杂的数据则可以使用Web Database，可以像客户端程序一样使用SQL（不过Web Database标准当前正陷于僵局之中，而且目前已经实现的浏览器很有限）；假如你需要存储的只是简单的用key/value对即可解决的数据则可以使用Web Storage。 本文主要从各个方面介绍一下Web Storage的具体情况。
如何更好地控制input输入框的高度
发布日期：2010年5月05日很久以前Roger Johansson就在他的blog上做了一个用样式控制表单元素的测试, 告诉我们企图用样式控制表单元素是一件不可能的事情
using CSS to style form controls to look exactly the same across browsers and platforms is impossible
甚至css2.1规范中也没有明确这方面的规定, 而是打算将它fix in future
CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further.
所以如果想要让表单元素在各个浏览器下完全一致, 最好的解决方法莫过于完全不理会操作系统的样式, 用自定义的ui风格, 就像bing或Google的Jazz UI那样
然而, 这会导致界面和用户的系统格格不入, 目前google主要还是针对浏览器做了些特殊处理, 如webkit下用gradient使得按钮看上去好些
mac下webkit的按钮不好控制
本文将就输入框高度的问题进行调研, 寻找更好的解决方法
前端模块化设计思路
发布日期：2010年2月24日
模块化概念
模块化就是为了减少循环依赖，减少耦合，提高设计的效率。为了做到这一点，我们需要有一个设计规则，所有的模块都在这个规则下进 行设计。良好的设计规则，会把耦合密集的设计参数进行归类作为一个模块，并以此划分工作任务。而模块之间彼此通过一个固定的接口（所谓的可见参数）进行交互，除此之外的内部实现（所谓的隐参数）则由模块的开发团队进行自由发挥。
程序模块化的目的：
- 减 少循环依赖
- 减少耦合
- 提高设计效率
程序模块化的实施：
- 把耦合密集 的归为一个模块
- 模块间通过固定的接口交互
- 模块内部实现自由发挥
HTML CSS Images的模块化设计
页面模块化的实施，这里指的是针对除去JavaScript部分的页面代码进行模块化实施。通过html css 图片进行模块化。
页面模块化的实施思路是高度耦合的页面片段封装，模块布局作为公开接口，高度耦合的页面进行封装，使用独立的css文件，高度耦合的图片进行封装，给某类相关性强的图片建立文件夹。
页面模块化的目的是，实现多人协同开发页面，提高页面研发速度和降低维护难度。研发速度的提升体现在多人协同并行开发， 维护难度体现在减少版本的混乱，根据模块区分版本降低版本间代码冲突和文件错误覆盖。 more »