Web 前端优化最佳实践之 CSS 篇

奇葩TMD朵朵开

奇葩TMD朵朵开

2016-02-19 19:42

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的Web 前端优化最佳实践之 CSS 篇教程,一起来看看吧!超容易上手~

  Web 前端优化最佳实践第四部分面向 CSS。目前共计有 6 条实践规则。另请参见 Mozilla 开发者中心的文章:Writing Efficient CSS

  1. 把 CSS 放到代码页上端 (Put Stylesheets at the Top)

  官方的解释我觉得多少有点语焉不详。这一条其实和用户访问期望有关。CSS 放到最顶部,浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。没有人喜欢等待,而浏览器已经考虑到了这一点。

  2. 避免 CSS 表达式 (Avoid CSS Expressions)

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  个人认为通过 CSS 表达式能做到的事情,通过其它手段也同样能做到而且风险更小一些。

  3. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

  剥离后,能够有针对性的对其进行单独的处理策略,比如压缩或者缓存策略。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  4. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

  如果没有 JavaScript 与 CSS 可能更好。但,这是不可能的,SO,尽量小点吧。语法能简写的简写。

  5. 使用 link 而不是@importChoose link over @import

  在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部。而这与第一条相违背。

  6. 避免使用Filter (Avoid Filters)

  --EOF--

展开更多 50%)
分享

猜你喜欢

Web 前端优化最佳实践之 CSS 篇

Web开发
Web 前端优化最佳实践之 CSS 篇

遵循web标准 网页前端得3类优化

Web开发
遵循web标准 网页前端得3类优化

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

使用CSS Sprite的一些最佳实践

Web开发
使用CSS Sprite的一些最佳实践

CSS优化:less优化CSS

Web开发
CSS优化:less优化CSS

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

WEB标准,Web前端工程师定位浅谈

Web开发
WEB标准,Web前端工程师定位浅谈

由浅入深实践学习 Web 标准

Web开发
由浅入深实践学习 Web 标准

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

常用CSS样式效果汇总

常用CSS样式效果汇总

Mac转移助理的操作技巧

Mac转移助理的操作技巧
下拉加载更多内容 ↓