http://www.web008.net

Web性能优化系列,热点回顾第一期

CSS 紧俏回想第风流浪漫期

2013/12/30 · CSS · CSS

本文由 伯乐在线 - 黄余粮 翻译。未经许可,禁止转发!
藏语出处:css-weekly。迎接参预翻译组。

CSS的走俏回看涉及的内容囊括:最新推荐阅读的篇章、产业界的动态、最新推荐的工具和各个创意。固然每大器晚成期或然天渊之别,但大致是其风流洒脱协会。假使您也在跟进CSS那块的才干,接待投递分享CSS手艺小说与音讯到这里,大概投入大家的 前端开辟 小组,同大家一齐翻译与传播杰出的原委。

本文由 伯乐在线 - 压力山大 翻译,sunbiaobiao 校稿。未经许可,幸免转载!
阿尔巴尼亚语出处:gokulkrishh.github.io。接待加入翻译小组。

推荐介绍阅读

《用Chrome DevTools来为你的网址提速》

Addy 奥斯曼i 通过那篇作品呈报了怎么行使Chrome DevTools来令你的网址更通畅。

《创立一个简约的响应式HTML邮件》

在此篇教程中,Nicole Merlin 体现了何等创建一个差不离的响应式HTML邮件,並且保障能够在每三个邮件客商端(包涵手提式有线电话机邮件客商端和App卡塔 尔(英语:State of Qatar)上科学突显。其艺术就是选拔最小的Media query和不定点宽度的不二诀要,尽可能地保管宽容性。

生机勃勃经你的网址在1000ms内加载成功,那么会有平均一个客商停留下来。二零一四年,平均网页的轻重是1.9MB。看下图精晓越来越多总计音信。

散文与课程

《经过Emmet来为您的CSS开垦提速》

Josh Medeski 在此篇小说中分享了一些经过Emmet来增加帮衬您更加高效地写CSS的手艺。

《响应式相册》

Terry Mun 写的风姿罗曼蒂克篇教程,介绍了如何支付一个用来展现相册的Wordpress插件。展现照片的效能很好,请参见这么些Demo。

《BEM,多修饰符,尝试利用性质选取器》

汤米 马歇尔在这里篇小说中搜求了黄金时代种让您的前端代码保持 DRY 的新格局。可是,这种方式也许有四个缺陷,参见作者的介绍和作品的评说。

《Firefox 29支持CSS变量》

Firefox 29 起首援救CSS变量了,大概叫做自定义属性。你能够定义CSS变量,然后在样式中引用它们。

《Sasstraction》

CSS变量应该继续交给预微机(举例:Saas, LESS卡塔 尔(英语:State of Qatar),依然浏览器?

《什么样解决在谷歌(Google卡塔 尔(英语:State of Qatar)Chrome下的低首下心的书体渲染难题》

Christian Lavie 展示了怎样文雅地消亡WebFonts的渲染难题。这种方案的并世无两美中不足就是您一定要本中国人民保险公司留字体相关的文本。

图片 1

工具

《Myth》

Myth 是一个CSS预微型机。通过它,你能够小心于写纯CSS代码,而毋庸顾虑浏览器的版本(不扶植新特点卡塔尔。

《Unison.js – 在CSS、JS和HTML中集结断点》

Unison.js是三个插件,它同意你在二个地点定义断点,然后自动同步到JS、CSS和HTML中。

赞 收藏 评论

网址的主题内容需求在1000ms内彰显出来。假若失利了,顾客将生生世世不会再寻访你的网址。通过降落页面加载的时日,非常多盛名集团的受益和下载量有明显的进级换代。例如

至于小编:黄余粮

图片 2

伯乐在线发起人。热爱才能和制品,崇尚极客文化。 个人主页 · 笔者的文章 · 13 ·  

图片 3

  • Walmart 每下落100ms的加载时间, 他们的收益就拉长1%.
  • Yahoo 每下落400ms的加载时间,他们的访谈量就进级9%。
  • Mozilla 将他们的页面速度升高了2.2秒,每一年多收获了1.6亿firefox的下载量。

网站优化的步子

  1. 设定性能预算。
  2. 测试当前的性子。
  3. 搜索引致质量难点的地点。
  4. 最后,duang,使用优化特殊本领。

上边有二种艺术能够升官你的页面质量,让我们来看看

进程目的

过程目标是指页面包车型地铁可视部分被呈现在浏览器中的平均速度。表示为飞秒的样式,並且决意于viewport的高低。请看下图(用录像帧的方式展现页面加载时间,以秒为单位卡塔 尔(阿拉伯语:قطر‎。

进程目标越低越好。

图片 4

进程目标能够因而Webpagetest 来测试(由Google维护)

删繁就简

Webpage test 有点不清特征,举例在分裂的地点用分化的浏览器跑七个测验。 还是能总计其余的数额譬喻加载时间,dom成分的多少,首字节时光等等…

例如:查看amazon在webpagetest上的测验结果 。

能够看看这几个视频,了解由 Patrick Meenan 上课的关于webpagetest的越多音讯(需求FQ卡塔 尔(英语:State of Qatar)。

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。