摘要:
Web 前端优化最佳实践最后一部分是针对移动应用的,其实只是针对 iPhone 的,目前只有两条规则。1. 单个数据对象小于 25K (Keep Components under 25K)这个似乎只是针对 iPhone 研究的。建议保持单个 Web 数据对象在 25 K 以下。为什么是 25K? Apple 官方信息指出可缓存到内存中的 Web 对象最大支持到 10M,但经过测试,发现也就是 25K 左右。iPhone 在市场上的优异表现,让 Web 人员不得不考虑如何针对其进行优化。相信这部分内容也在不断变化中。2. Pack Components into a Multipart Docu 阅读全文
摘要:
Web 前端优化最佳实践第六部分面向 图片(Image),这部分目前有 4 条规则。在最近的 Velocity 2008 技术大会上,Yahoo! 的 Stoyan Stefanov 做的 Image Optimization: How Many of These 7 Mistakes Are You Making 也非常有参考价值。结合一起说一下。1. 优化图片 (Optimize Images)使用 GIF 、JPG 还是 PNG 格式的图片? 尽可能的使用 PNG 格式的图片,更多的功能,更小的尺寸(与 GIF 相比)。对于 PNG 图片,考虑用 Pngcrush 或类似的工具进行优化。 阅读全文
摘要:
Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条。前端优化最佳实践,最重要的还是"实践",要理解这东西容易得很,关键是要去"实践",去"执行",去"反馈",去获取受益。1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)当一个脚本在下载的时候,浏览器干不了其它的事儿(串行了)。所以,把它扔到最后面去处理。对于一些功能性的脚本,可能实现起来有些两难。不过对于国内网站来说,有很多使用 Google Analytics 服务进 阅读全文
摘要:
Web 前端优化最佳实践第四部分面向 CSS。目前共计有 6 条实践规则。另请参见 Mozilla 开发者中心的文章:Writing Efficient CSS1. 把 CSS 放到代码页上端 (Put Stylesheets at the Top)官方的解释我觉得多少有点语焉不详。这一条其实和用户访问期望有关。CSS 放到最顶部,浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。没有人喜欢等待,而浏览器已经考虑到了这一点。2. 避免 CSS 表达式 (Avoid CSS Expressions)个人认为通过 CSS 表达式能做到的事情,通过其它手段也同样能做到而且风险更小一些。3 阅读全文
摘要:
Web 前端优化最佳实践第三部分面向 Cookie 。目前只有 2 条实践规则。1. 缩小 Cookie (Reduce Cookie Size)Cookie 是个很有趣的话题。根据 RFC 2109 的描述,每个客户端最多保持 300 个 Cookie,针对每个域名最多 20 个 Cookie (实际上多数浏览器现在都比这个多,比如 Firefox 是 50 个) ,每个 Cookie 最多 4K,注意这里的 4K 根据不同的浏览器可能不是严格的 4096 。别扯远了,对于 Cookie 最重要的就是,尽量控制 Cookie 的大小,不要塞入一些无用的信息。2. 针对 Web 组件使用域名无 阅读全文
摘要:
Web 前端优化最佳实践第二部分面向 Server 。目前共计有 6 条实践规则。【注,这最多算技术笔记,查看最原始内容,还请访问:Exceptional Performance : Best Practices for Speeding Up Your Web Site 】1. 使用 CDN (Use a Content Delivery Network)国内 CDN 的普及还不够。不过我们有独特的电信、网通之间的问题,如果针对这个作优化,基本上也算能收到 CDN 或类似的效果吧(假装如此)。【Tin 说国内 CDN 用的挺多,看看 CDN 厂商的市场就知道了,还没走入寻常百姓家】2. 添加 阅读全文
摘要:
Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献。广为人知的优化规则也由 13 条到 14 条,再到 20 条,乃至现在的 34 条--真是与时俱进啊。最新的 34 条也针对不同的角度做了分类。面向内容的优化规则目前有 10 条。1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条。根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最大受益。有几种常见的方法能切实减少 HTTP 请求:1) 合并文件,比如把多个 CSS 文件合成一个;2) 阅读全文
摘要:
CSS不兼容的原因是因为各浏览器给CSS默认属性值不一样造成的第一招:给常用的CSS规定属性值body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0; padding:0;}img{border:0;}ul{margin:0; padding:0;} ul li{list-style:none;}上面的建站常用代码就像是格式化CSS样式,让各浏览器按照我们设置的属性值渲染网页或者这样写代码:*{margin:0; padding:0;}第二招:IE和FF下对象居中问题IE下大家应该知道只要设置body{text-al 阅读全文
摘要:
网站数据库的主要目的就是存储信息,一般是通过前台页面与浏览者的交互收集信息,然后结合前台的程序(一般为动态页面),实时生成浏览者所看到的最新内容,从而具备普通静态页面所不能达到的效果。常规的网站后台数据开发包含以下的一些内容和功能: 1、访问者信息收集系统: 包括会员注册、会员登录、忘记密码查找及注册会员的管理等功能,这项功能能够帮助企业收集目标客户的资料,为企业网站营销提供分析的资料,并可以考察网站的使用频率及对目标消费者的吸引程度。在以后的网络营销中,这些注册会员是相当准确的目标客户。 2、企业信息发布及管理系统: 如果您有大量的企业内部、行业或相关新闻需要频繁在网站中发布,... 阅读全文
摘要:
一、避免出现脚本失控不论什么脚本,在任何时间、任何浏览器上执行,都不应该超过100毫秒。如果实际执行的时间长于这个底限,一定要将进程分解成若干更小的代码段。脚 本失控基本上有以下四个方面的原因:1. 在循环中执行了太多的操作解决这个问题的诀窍就是用下面这两个问题来评估每个循环:◆这个循环必须要同步执行么?◆循环里面的数据,必须要按顺序执行么?如果1和2都可以否定,那么建议使用setTimeout方式将循环体切分成小块进行异步处理,将循环中的定义变量及初始化操作放到循环外。2. 臃肿的函数体在JavaScript中,我们应该尽可能的用局部变量来代替全局变量!◆理解JavaScript作用域链。◆ 阅读全文
摘要:
原理一:直截了当页面编辑:单字段行内编辑/多字段行内编辑/覆盖层编辑/表格编辑/群组编辑/模块配置利用拖放:趣味瞬间/拖放的用途/拖放模块/拖放列表/拖放对象/拖放操作/拖放集合直接选择:切换选择/集合选择/对象选择/混合选择原理二:简化交互上下文工具:上下文交互/费茨定律/上下文工具/实时可见工具/悬停即现工具/开关显示工具/级联递进工具/二级菜单原理三:足不出户覆盖层:对话框覆盖层/详情覆盖层/输入覆盖层嵌入层:对话框嵌入层/列表嵌入层/详情嵌入层/标签页/嵌入层与覆盖层虚拟页面:虚拟滚动/内置分页/滚动分页:传送带/虚拟摇摄/伸缩式用户界面/分页与滚动流程处理:Google Blogge 阅读全文
摘要:
从自我管理走向团队管理,做自己的主人是第一步,如下分享十条原则:【自信】自信是谁给的呢?既然是自信,自信不是别人给的,而是自己给的。自信是一种自我评估,是对通过自身能力而达成目标的信念。自信可以通过自我暗示和取得阶段成功而不断巩固。【坚持】需要保持对目标的坚定信念,坚持是对自信的坚持把握和实践,坚持是每一次战胜自己懒惰的斗争,坚持是每一天付诸的行动。【勤奋】勤奋就是发挥自己的潜能,勤奋就是付出超越100%的努力,勤奋就是每天早起1小时,勤奋就是思考更多和行动更多。【智慧】请不要停止学习,带着观察的眼睛,倾听的耳朵,思考的头脑,分享的语言。以扎实做事的态度为基础,寻求创新的解决方案。【淡定】荣辱 阅读全文