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

原文链接: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前端开发最佳实践>这本书的读后感,以及梳理这本书中比较有用的核心知识点 二.书之印象 <web前端开发最佳实践>其实说到底就是一本提高你的涉猎面的书籍,但是缺点就是这本书的标题是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…

一般在网站发布时,会压缩前端HTML.CSS.JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页更快的展现.当然,CDN分发.缓存等方式也是加快代码或资源文件传输的方式,但压缩代码和资源文件是最简单有效的手段,代码压缩的优点逐渐得到了大部分的开发者的认可,并已经成为了Web前端开发中不可或缺的一个步骤.以下是代码和资源压缩的具体实践方法. 1. Web服务器开启Gzip压缩 在HTTP协议中允许客户端可以选择从服务器上下载压缩的内容,Gzip就是其中…

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

前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借助工具,不太容易按照既定的顺序来定义CSS属性,这是前端程序员很少给CSS样式属性排序的最主要原因. 尽管给CSS样式属性排序需要花费一些精力,但从代码的可读性和可维护性角度来考虑,这些付出还是值得的.如果CSS属性按照一定的规则排序,在开发过程中可以防止属性的重复定义,代码的检查者也能很清晰地查看…

引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了大家认可的技术文章,多篇文章也得到了编辑推荐.大家的认可也更激发了我写技术文章的热情,借助公司在博客园的账号葡萄城控件技术团队博客发布了多篇有关Web前端开发的文章,尤其是如下三篇前端开发最佳实践相关的文章引来了大家的热烈讨论: 前端代码标准最佳实践:javascript篇 前端代码标准最佳实践:C…

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

算起来至今,我进入软件开发行业已经有11年之久.从最初的研究人工智能,到后来的Web开发,控件开发,直到现在纯粹的Web前端开发.虽然没有大的作品问世,但也是勤勤恳恳,踏实做事,低调做人.从来不吹牛逼,不忽悠客户.从2011年起,开发培养一些新人或者实习生,把我的开发理念,做事方式也传递给了不少新人,这些人也逐渐成为了各公司的骨干. 除了一般的开发和培训新人之外,我也会写一些文章到公司的博客上.机缘巧合,有编辑找到我说希望我能出一本前端开发相关的书籍.起初我很纠结,因为自己的文采实在不行,后来想…

正确闭合HTML标签 HTML元素的内容模型定义了元素的结构,表明元素可以包含哪些内容以及元素可以有哪些属性.元素可以包含的内容包括其他元素和字符,但是也有一些元素是空元素,即不能包含任何内容,这些元素对应的HTML标签也称之为自闭合标签,下面列出了HTML中所有的自闭合标签: area.base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr W3C制定了多个版本的H…

前言 前端程序员在学习HTML的过程中,肯定接触过页面元素的两个基本类型:块状元素和行内元素,也有大量的技术文章或者教程在介绍这两个概念.但这两个HTML元素相关的概念从字面上却和CSS样式有着很深的联系,这种联系有悖于Web规范中一直倡导的表现和样式分离这一核心思想.在HTML5新规范中,已经淡化了元素的这两种分类,取而代之的方案是更具有语义的HTML元素分类方式.在介绍新分类之前,先来谈谈块状元素和行内元素这两个概念. 块元素和行内元素 在W3C制定的HTML4.01规范中,有关内容模型部分…

文档对象模型(DOM)是一个独立于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得DOM成为了JavaScript中重要的组成部分.在富客户端网页应用中,界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化的一个主要的关注点就是DOM操作的优化.DOM操作优化的总…

一.常用的前端文件的组织结构: 1.js (放置JavaScript代码) lib(放置框架JavaScript文件) custom.js 2.css(放置CSS样式代码) lib(放置框架CSS文件) images(放置用于样式中的背景图) reset.css( 统一元素默认样式的样式文件) custom.css(业务相关样式文件) 3.resource(放置页面图片文件以及其他类型资源文件) 4.index.html 代码文件整体按照文件类型的不同归类,同一类型的代码文件则需要安装具体的业务…

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

前言 JavaScript语言由于其固有的灵活性,所以导致开发者可以写出很多诡异的代码,甚至一些较为正常的特性,如类型隐式转换.this的指代等等,也会让刚接触此语言的开发者头大不已.尤其是那些熟知其他诸如Java和C#等高级语言的开发者.使用更严格的编码方式,可以最大量避免 启用严格模式 随着JavaScript的发展,开发者及规范制定者也意识到了JavaScript语言本身的一些设计缺陷,所以在ECMAScript5中引入了严格模式.设立严格模式的目的主要是为了消除JavaScript语法上…

P77 P89 CSS Reset P94 给CSS样式定义排序    排序工具:CSScomb P97 什么是CSS的权重?权重是指选择符的优先级 P100 工具:Sass Less P101 框架:YUI.ExtJS P102 hack代码,不易理解且维护困难 P103 条件注释 P104 em px % 2016.3.8   P110 CSS的匹配原理和我们习惯的匹配过程是相反的,它是从右到左进行匹配的. P111 CSS选择器定义的最佳实践(四个避免): 1.* { } 2.refere…

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

前言 这篇文章本应该在上一篇文章:使用更严格的JavaScript编码方式,提高代码质量之前发布,但当时觉得这篇文章太过基础,也就作罢.后来咨询了一些初级的开发者,他们觉得有必要把这篇文章也放上来.尽管这篇文章内容基础,但是很多初中级开发者还是会犯同样的错误,发布出来也算是再一次提醒. 良好的编码习惯,这是每个程序员应具备的最基本素质.无论是前端程序员还是后端程序员,都要遵循基本的规范,减少因代码混乱而造成难以维护的局面.要做到不管有多少人共同参与同一个项目,一定要确保每一行代码都像是同一个人编…

前言 JavaScript代码基本上都是由业务逻辑和数据组成的,逻辑代码根据数据完成一定的操作.很多数据在代码中是写死的,比如一些URL.显示在界面上的提示信息.页面元素相关的样式值及其他使用到的固定值,这部分无逻辑的数据可统称为配置数据.一种好的编码实践是把这部分配置数据和业务逻辑分离,这样修改配置数据时就不需要修改业务逻辑代码了,从而提高了代码的可维护性.同时,配置数据的分离,使得业务逻辑代码也可以重用了,不同的配置数据可以对应相同的业务逻辑. 配置数据和逻辑分离 那么,要如何把配置数据和代…

系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps Sentry For React 完整接入详解 Sentry For Vue 完整接入详解 Sentry-CLI 使用详解 Sentry Web 性能监控 - Web Vitals Sentry Web 性能监控 - Metrics Sentry Web 性能监控 - Trends 目录 创建一个 Sentry 项目…

一.HTML语义化 HTML5中增加了很多标签都是基于此类原则设计的(article   nav  header  footer).页面标签语义化的优点是使得搜索引擎以及第三方抓包工具等更容易读懂页面代码.提高可读性. 如果图片是作为网页内容的一部分,则应该使用<img>元素,如果图片仅仅是起装饰作用,则应该使用背景图方式. 给空标签添加隐藏文字,用于说明表情帝额实际功能(使用text-indent达到隐藏文字的目的). 在页面内容的标题部分使用<hx>标签. 页面中只使用一个&l…

一.验证代码是否符合标准 优点: 标准的页面会保证浏览器正确的渲染 网页能更容易被搜索引擎搜索,提高网站的搜索排名 提高网站的易用性 网页更好维护和扩展 常用工具: W3 Validator HTML Validator(Firefox) 二.常用规范 自闭合标签:area  base br col command embed hr img input keygrn link meta param source track wbr 过时标签不再使用:basefont  big  center f…

paip.前端加载时间分析之道优化最佳实践 1.另存为 ,查看文件尺寸..和图片. 2.view the 另存为的htm静态的文件单个的加载,看时间...可以排除编程语言的问题and 数据库.. ##页面加载速度对于用户体验的影响. 1秒内,最好的.. 5秒, >>5秒 ,坏的.. ##index  一.Google的Web优化最佳实践  二.雅虎的Web优化最佳实践  2. 服务器优化  4. CSS优化  5. JavaScript优化      作者 老哇的爪子 Attilax 艾龙, …

paip.前端载入时间分析之道优化最佳实践 1.另存为 ,查看文件尺寸..和图片. 2.view the 另存为的htm静态的文件单个的载入,看时间...能够排除编程语言的问题and 数据库.. ##页面载入速度对于用户体验的影响. 1秒内,最好的.. 5秒, >>5秒 ,坏的.. ##index  一.Google的Web优化最佳实践  二.雅虎的Web优化最佳实践  2. server优化  4. CSS优化  5. JavaScript优化      作者 老哇的爪子 Attilax 艾…

网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属于web前端的技术范畴,要回答清楚这个问题我们要明确下网站应用的本质到底是什么?网站的本质其实就是BS,这里的BS我没有带上架构二字,而就是指Browser和Server即浏览器和服务器,而网站静态化技术的作用目标就是让客户端即浏览器的用户体验更好,但是如果我们想让网站在浏览器上运行的更快,在更快的…

网站静态化处理—web前端优化—上(11) 网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属于web前端的技术范畴,要回答清楚这个问题我们要明确下网站应用的本质到底是什么?网站的本质其实就是BS,这里的BS我没有带上架构二字,而就是指Browser和Server即浏览器和服务器,而网站静态化技术的作用目标就是让客户端即浏览器的用户体验更好,但是如…

网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属于web前端的技术范畴,要回答清楚这个问题我们要明确下网站应用的本质到底是什么?网站的本质其实就是BS,这里的BS我没有带上架构二字,而就是指Browser和Server即浏览器和服务器,而网站静态化技术的作用目标就是让客户端即浏览器的用户体验更好,但是如果我们想让网站在浏览器上运行的更快,在更快的…