xml地图|网站地图|网站标签 [设为首页] [加入收藏]
编织璀璨星空图,前端性能优化方案索引
分类:web前端

前端性能优化方案索引

2015/10/07 · CSS, HTML5, JavaScript · 性能

原文出处: HaoyCn   

陆续整理和不断更新网络上给出的前端性能的优化方案。

这里只是做一个总概括式的索引,每一个方案都十分值得推敲和细说。

用 Canvas 编织璀璨星空图

2016/05/14 · CSS · Canvas, 画布

原文出处: Cyandev   

先来看看最终的效果:

图片 1

GitHub项目: CyandevToys / ParticleWeb
是不是还蛮酷的呢?本文我们就来一点一点分析怎么实现它!


前端工程师应该了解的 CSS 进化史

2016/07/20 · CSS · 2 评论 · 进化史

本文由 伯乐在线 - 刘唱 翻译,艾凌风 校稿。未经许可,禁止转载!
英文出处:Sheena Lyonnais。欢迎加入翻译组。

CSS生日快乐!你毫无疑问地在你短暂的生命里产生了巨大的影响,永远地改变了网络的审美。

层叠样式表(CSS)就像一位神童,从一开始就展示出了巨大的潜力。当它还在“青春期”努力地寻找兼容性的时候,这种样式语言就已经克服了大部分的障碍并证明了自己足以成为Web技术的基石。

让我们回顾一下迄今为止CSS的一生。

1 请求和响应

缓存控制

请求头里,可以发送 If-Modified-Since 以及 If-None-Match 等信息,来询问服务端请求内容是否有更新,如果没有更新,可返回304,告诉浏览器使用缓存,避免重新下载资源。Pragma 和 Cache-Control 等也能控制缓存。如告诉服务端不要缓存等。

响应头里,Expires 可以告诉浏览器过期时间,Last-Modified 最近更新时间,ETag 则可允许浏览器进行缓存验证(在 If-None-Match 请求信息中使用)。

复用TCP

请求头里,Connection 可控制 TCP 通道的使用,使用 keep-alive 可以复用上次打开的 TCP。

GZIP压缩

如果可以启用 gzip 压缩,将减少响应数据大小,加快响应。请求头里面可用 Accept-Encoding 告知浏览器支持的压缩方式,而服务端则用 Content-Encoding 作为回应。

Cookies

发送请求时,cookies 也在请求之中。因此,cookies 也可以作为减少请求的优化对象。如,根据同源限制策略,可以使用多个域名加载资源,如加载静态资源,就不会发送多余的 cookies;同时,合理设置 cookies 的路径和域名,如在子站避免不必要的来自父站的 cookies。

减少HTTP请求

有很多细节可以实现,比如CSS Sprites、Data URL等等,由于此部分内容和下述内容有所重复,故部分细节在下面会讲到。

多域名分发

同域下浏览器能并发的请求有限,而为了增加并发,尤其是一些静态资源上,可以使用多个域名。但由于域名DNS解析本身也是耗时的,所以实践原则是2-4个为宜。

需要额外提醒的是,加载图像资源的时候,并发没有问题;但在加载 JavaScript 脚本的时候,还是会暂停加载其他资源。

使用CDN

根据用户能访问的最快位置加速访问。

避免重定向和404

重定向和404将浪费加载请求。

favicon.ico

浏览器默认加载的资源,最好能够缓存之。

分析

首先我们看看这个效果具体有那些要点。首先,这么炫酷的效果肯定是要用到 Canvas 了,每个星星可以看作为一个粒子,因此,整个效果实际上就是粒子系统了。此外,我们可以发现每个粒子之间是相互连接的,只不过离的近的粒子之间的连线较粗且透明度较低,而离的远的则相反。

1996年12月—CSS 1

互联网上对CSS正式的介绍要追溯到1996年,万维网联盟 (W3C) 面向全世界发布CSS的时候。CSS并不是当时唯一一种正在开发中的样式语言,但是层叠这个绝对要素和开发序列将它与其他的语言区别开来。

“HTML 是一种具有语义并用来传达网页内容的语言,CSS 最初的设计目的,就是为了使 HTML 的这一理念能够保持下去。”一位Google的规范黑客(spec hacker)Tab Atkins Jr.在网络播客平台说,“尤其是让机器能够理解。”

样式表并不是全新的,自从标准通用标记语言(SGML)的开发以来,它(样式表)就因为一些能力而被使用。但在当时,将它应用于网页还是很新奇的。

CSS最初并没有什么闪光点,但是它的影响力是突然的。为了正确地来看待它,下图是第一个发布在网络上的网页看起来的样子:

图片 2

下面是一个类似的使用了CSS的基础网页的例子:

图片 3

正如你所看到的那样,CSS的加入使得网页元素能够采用独特的特征。其主要的益处是设计师和开发人员现在可以不用通过更改HTML就能改变CSS的一些属性了。例如,蓝色的高亮区域可以换成绿色或红色。

但是在当时它大体上也就是这样了。W3C发布的CSS推荐标准拥有以下初始属性:

  • 前景和背景颜色/图片
  • 字体属性例如字体和加粗
  • 文本,包括单词和字母间距
  • 外边距,边框,内边距
  • 分类和对齐

2 HTML

减少DOM

过多的DOM元素会影响渲染、加载、执行。除了精简页面结构外,还可以适时删除不必要的DOM元素(页面内已经不会再访问的元素),又或者可以懒加载(不一定会使用到的元素,如登录框)。

CSS 和 JavaScript 文件位置

CSS 放 head,JavaScript 放 body 闭标签前。乃是因为:

  • 样式表不参与 DOM 修改,所以不会为了解析样式停止文档解析
  • 浏览器要避免重绘,在没有拿到全部样式前不会开始渲染
  • 解析样式时,有的浏览器(FF)会停止脚本运行,而有的(Webkit)则会在脚本访问样式属性但可能受未加载样式影响时停止脚本运行
  • 脚本解析中可能请求样式,如果样式还未解析完毕就会出错
  • 脚本执行将暂停文档的解析和资源的下载

因此,将二者放在适当的位置,能够极大提高渲染效率。

脚本延迟加载

可将脚本添加 defer 和 async 属性。两个属性的共通点在于,脚本的加载和文档的解析是同步进行的,而区别在于:async 一旦加载完毕,立即停止文档解析并执行脚本;defer 等待文档解析完毕后再执行。

合理使用内联

脚本和样式,应按需选择内联或者外链。对于访问少、样式和脚本复用少的页面,可以考虑使用内联样式从而减少 HTTP 请求。但如果页面访问频繁,样式脚本在多个页面经常复用,使用外链则是最优选择。

无论如何,需要避免使用 @import 来导入样式。

而图像也是一样,高级浏览器支持将图像数据直接 base64 编码在 src 属性里,必要时可直接在 HTML 里输出图片数据。

减少iframe

iframe 本身有许多优点,比如可以并行下载脚本,适合加载慢内容(如广告),同时浏览器可以对其进行安全控制。

减少使用 iframe 的主要考虑是:iframe 会阻碍页面加载,同时也没有语义。

开始 Coding

1998年5月—CSS 2

参考CSS1中建立的属性,CSS 2的第一份工作草案在1997年11月发布,并且在1998年5月成为了W3C的推荐标准。

这个版本拓展了属性的能力,使其更加多样化。例如:有 :hover伪类和臭名昭著的文本阴影效果(现在已过时):

图片 4

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:编织璀璨星空图,前端性能优化方案索引

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文