YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Page 5

前端性能优化:Compress components with gzip

Compress components with gzip(用GZip压缩组件),GZip压缩组件相关的信息并不多,所以这次介绍GZip的优化规则就根据Steve Souder的《High Performance Web Sites》的相关章节来介绍。好了,不绕弯子,直接进入主题吧。 GZip 简介 (摘选至维基百科 Gzip) GZip是若干种文件压缩程序的简称,通常指GNU计划的实现,此处的gzip代表GNU zip。也经常用来表示gzip这种文件格式。软件的作者是Jean-loup Gailly和Mark Adler。在1992年10月31日第一次公开发布,版本号0.1。 HTTP/1.1协议允许客户端选择要求从服务器下载压缩… [阅读全文]

前端性能优化:Add Expires headers

前端性能优化:Add Expires headers

今天接着介绍YSlow关于前端优化的另一个规则:Add Expires headers(使用浏览器缓存)。在介绍这个规则前,我们先要了解Expires headers是什么。 Expires headers 是什么? Expires headers:直接翻译是过期头。Expires headers 告诉浏览器是否应该从服务器请求一个特定的文件或者是否应该从浏览器的缓存抓住它。Expires headers 的设计目的是希望使用缓存来减少HTTP requests的数量,从而减少HTTP相应的大小。 Expires headers 中的 Expires 说明了 Expires headers 是有时间限制的,只有在这个指定的时间期限内… [阅读全文]

前端性能优化:Avoid empty src or href

前端性能优化:Avoid empty src or href

今天我们继续讲解YSlow的前端优化的性能指标——Avoid empty src or href(避免使用空的(IMG 标签的)src地址或者(A标签)的href地址)。 这条优化的规则起初并不在Steve Souders的前端性能优化规则中,它是最近研究前端性能时新增加的。当然,我们首先还是来看看YSlow的规则说明: Empty Image src 的两种情况和浏览器的不同处理方式 Avoid Empty Image src Image with empty string src attribute occurs more than one will expect. It appears in two form: straigh… [阅读全文]

前端性能优化:Make fewer HTTP requests

前端性能优化:Make fewer HTTP requests

作为前端工程师,一个重要的职责就是要做前端性能优化。今天开始我就带着大家对照YSlow的前端性能优化的指标,逐个经行讲解。今天我们要介绍的就是:Make fewer HTTP requests(尽量减少请求的数量)。 如何查看页面的 HTTP requests 的数量? 在讲解具体怎么减少 HTTP requests 之前,我们要知道如何查看页面的 HTTP requests 的数量?这里我先给出一个Firebug的网络请求的视图给大家看看,讲解起来会更加直观。 YAOHAIXIAO.COM 首页的网络请求视图 是的,HTTP requests 的数量我们很难通过肉眼观察来计算,我们需要借助网络流量的分析工具,例如我这里要介绍的Fi… [阅读全文]

推荐4款在线图片压缩工具

推荐4款在线图片压缩工具

之前写过文章《隐藏 JavaScript 源代码?不,你只能混淆和压缩JavaScript源代码》介绍过几款压缩JavaScript的工具,今天就再介绍几款在线的图片压缩工具。相信对要做前端开发,优化前端性能的朋友会有一定的帮助。 PunyPNG PunyPNG 支持压缩PNG, JPEG 和 GIF 3中格式的图片,而不仅仅只是像网站名字那样的只支持PNG格式的图片。不过免费版的一次最多只能处理20张图片,图片大小不能超过500K。如果你升级为付费的用户,会有更多更强大的功能。 TinyPNG TinyPNG 一款很不错的免费软件,不限制图片的大小,也不限制图片的数量,不过只支持PNG格式的图片的压缩。TinyPNG是我非常喜欢的… [阅读全文]

隐藏 JavaScript 源代码?不,你只能混淆和压缩JavaScript源代码

隐藏 JavaScript 源代码?不,你只能混淆和压缩JavaScript源代码

隐藏、加密 JavaScript 源代码 自己写了很酷的代码,希望防止别人剽窃你的JavaScript代码。怎么才可以隐藏或者说是加密我的JavaScript代码啊?说实话,我以前也这么想过,不过很遗憾。JavaScript代码是一种天然的开放源代码的语言。除非你的JavaScript代码在你的本机里保存着,一旦作为在线的程序发布出去,只要浏览器可以运行访问它,任何人也就可以阅读到它。 你可能在网上看过有人说可以加密JavaScript源代码,但就像其他所有的加密方法一样,都是无法保证别人解密不了的。而实际上,从实际的前端性能来说,这些经过加密的代码反而会造成不必要的性能损失,甚至可能会让JavaScript代码无法正常运行。所以我… [阅读全文]

申请Google AdSense的步骤详解

申请Google AdSense的步骤详解

相信很多拥有个人博客的朋友都希望能让自己的站点获取收益,Google AdSense 就是一种获取收入的快速简便的方法,适合于各种规模的网站发布商。它可以在网站的内容网页上展示相关性较高的 Google 广告,并且这些广告不会过分夸张醒目。由于所展示的广告同用户在您的网站上查找的内容相关,因此,最终您的内容网页不仅会为您带来经济效益,还能够得以充实。 今天我就来讲讲如何申请Google AdSense,如何在你的网站上添加Google 广告,从而让你的网站为你产生收益。 一、注册Google AdSense Google AdSense 的登录注册地址:https://accounts.google.com/ServiceLogin… [阅读全文]

jQuery API 教程 – add() 方法详解

jQuery API 教程 – add() 方法详解

jQuery 官方的 API 文档 Description: Add elements to the set of matched elements. 描述:向匹配的元素集合中添加元素 version added: 1.0.add( selector ) selector Type: Selector 参数类型: 选择器 A string representing a selector expression to find additional elements to add to the set of matched elements. Selector为一个选择器字符串,将这个选择器匹配的元素添加到匹配的元素集合。 versio… [阅读全文]

Brackets 专注 HTML、CSS、JavaScript 开发的编辑器

Brackets 专注 HTML、CSS、JavaScript 开发的编辑器

Brackets 专注 HTML、CSS、JavaScript 开发的编辑器。这个是我一直寻求的编辑器,没有其他复杂的功能,专注前端开发、专注HTML、CSS、JavaScript、开源免费、支持中文、多平台支持。还有什么要求,真的很完美了。强烈推荐打击试一试。 Code the Web. Brackets is an open source code editor for the web. It’s built with JavaScript, HTML and CSS by web developers like you. Download: http://download.brackets.io/ Brackets… [阅读全文]

IcoMoon App 一个在线的图标字体生成工具

IcoMoon App 一个在线的图标字体生成工具

相信用过 CSS3 的朋友对 @font-face 这个新特性一定不陌生,使用它我们可以在线给用户添加他们系统默认没有的字体,让网站的界面开起来更加美观。但是你有没有想过,网站上常用的图标也可以直接使用图标字体来实现呢? IcoMoon App 今天介绍的这个在线应用(个人是非常喜欢),它就可以在线生成图标字体。真的很不错哦! 生成自定义的字体包,并下载 IcoMoon App 提供免费服务,界面操作很简单,就像网站介绍的那样,在这里你几乎可以找到你需要的所有图标。而且最赞的就是,它可以根据你的需要只生成你需要的自定义的图标字体,而不需要下载全部的字体库。 例如上图,我只需要5个图标,那么你就选中5个我要的就好。然后点击“Font”… [阅读全文]

Toggle side bar