原文链接:http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_server_mobile.html Web 前端优化最佳实践最后一部分是针对移动应用的,其实只是针对 iPhone 的,目前只有两条规则. 1. 单个数据对象小于 25K (Keep Components under 25K) 这个似乎只是针对 iPhone 研究的.建议保持单个 Web 数据对象在 25 K 以下.为什么是 25K? Apple…

Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎PageSpeedYSlow 摘要:前端的性能对于Web应用的用户体验来说非常重要.不要以为你的Web应用的性能已经足够好了,其实还会有很多可以提升的地方.本文将介绍Google和雅虎关于前端优化的最佳实践以及工具,你可以逐一检验你的Web应用. 前端的性能对于一个Web应用来说非常重要,如果一个Web应用的…

一.有效组织CSS代码 规划组织CSS代码:组织CSS代码文件,所有的CSS都可以分为2类,通用类和业务类.代码的组织应该把通用类和业务类的代码放在不同的目录中. 模块内部的另一样式规则:样式声明的顺序是按照模块中元素的层级关系来处理,从父级元素开始,如果是同一级元素则按照元素在页面的位置从上到下.从坐到右地定义对应的样式.如果多个公用,则先声明公用的样式,然后声明个体样式. CSS排序实践: 对CSS样式排序 推荐按样式属性功能分组排序 推荐在CSS样式代码编写完成并准备嵌入的时候排序 使用如…

一.养成良好的编码习惯,提高可维护性 1.避免定义全局变量和函数,解决全局变量而导致的代码“污染”最简单的额方法就是把变量和方法封装在一个变量对象上,使其变成对象的属性: var myCurrentAction = { length : 0 , init : function(){}, action : function(){} } 还可以将全局的变量包含在一个局部作用域中,然后在这个作用域中完成这些变量的定义以及变量使用的逻辑: (function(){ var length = 0; fun…

一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开发最佳实践>这本书的读后感,以及梳理这本书中比较有用的核心知识点 二.书之印象 <web前端开发最佳实践>其实说到底就是一本提高你的涉猎面的书籍,但是缺点就是这本书的标题是web前端开发最佳实践,但是其实也就是一些很基础的东西没有什么很高深的,所以前端最佳实践这个书名就是标题党,而且里面的东…

Web前端开发最佳实践(1):前端开发概述 Web前端开发最佳实践(2):前端代码重构 Web前端开发最佳实践(3):前端代码和资源的压缩与合并 Web前端开发最佳实践(4):在页面中添加必要的meta信息 Web前端开发最佳实践(5):正确闭合HTML标签,停止使用不标准的标签和属性 Web前端开发最佳实践(6):过时的块状元素和行内元素 Web前端开发最佳实践(7):使用合理的技术方案来构建小图标 Web前端开发最佳实践(8):还没有给CSS样式排序?其实你可以更专业一些 Web前端开发最佳…

前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大小的手段.以下将讨论CSS代码相关的代码精简方案. 定义简洁的CSS规则 CSS的每条规则中都包含了规则的属性及属性值.定义简洁的CSS规则主要是指合并相关规则和定义简洁的属性值. 1. 合并相关CSS规则 CSS中的某些样式是由多个规则组成的,比如字体样式,就包含:font-family.font…

大家都对网站上使用的小图标肯定都不陌生,这些小图标作为网站内容的点缀,增加了网站的美观度,提高了用户体验,可是你有没有看过在这些网站中使用的图标都是用什么技术实现的?虽然大部分网站还是使用普通的图片实现,不过可供使用的技术方案还不少,这些都归功于新的Web技术的应用. 常见的小图标应用方案 1. 最简单的还是图片,图片 这个方案是使用最广的方案,简单有效.jQuery UI使用的就是这样的方案.jQuery UI是把所有需要用到的小图标放置在一张大的sprite图片中,类似如下的图片: 用法也很…

前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来确保重构后的代码逻辑,可对于普遍缺乏自动化测试的前端代码来说,重构之前一定要考虑再三才能下手. 有效地重构代码 我曾经有一次不算太成功的前端重构经历,所幸的是没有导致太大的问题,但教训是惨痛的.此次重构的项目本身没有足够的自动化测试,尤其是针对前端的自动化测试,所以在重构之前也预想到了重构的风险.先…

meta标签放置在HTML页面的head中,主要用于标识网站.其中基本上包含了网站的一些描述信息,例如,简介.作者等.这些信息有助于搜索引擎更准确地识别网页的内容,也有助于第三方工具抓取网站基本信息. 按照W3C的标准介绍,<meta>标签有四个属性:name.http-equiv.content和charset.<meta>标签通过name属性来表述页面文档的元信息,通过http-equiv属性设置HTTP请求指令,通过charset设置页面的字符编码.所以从属性设置分类,met…