Web 前端优化最佳实践第四部分面向 CSS。目前共计有 6 条实践规则。另请参见 Mozilla 开发者中心的文章:Writing Efficient CSS
1. 把 CSS
放到代码页上端 (Put Stylesheets at the Top)
官方的解释我觉得多少有点语焉不详。这一条其实和用户访问期望
有关。CSS 放到最顶部,浏览器能够有针对性的对 HTML
页面从顶到下进行解析和渲染。没有人喜欢等待,而浏览器已经考虑到了这一点。
2. 避免 CSS
表达式 (Avoid CSS
Expressions)
个人认为通过 CSS
表达式能做到的事情,通过其它手段也同样能做到而且风险更小一些。
3. 从页面中剥离 JavaScript 与 CSS
(Make JavaScript and CSS
External)
剥离后,能够有针对性的对其进行单独的处理策略,比如压缩或者缓存策略。
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--
延伸阅读:
相关推荐
全书以问题为导向,精选了前端开发中的34个疑难问题,从分析问题的原因入手,逐步给出解决方案,并分析各种方案的优劣,最后针对每个问题总结出高效编程的最佳实践和各种性能优化的方法。全书共7章,内容从逻辑上...
Web前端设计修炼之道》以Web 前端设计的流程为主线,以前端设计的方法和原则为基础,围绕原型设计、模型设计、可用性设计、一致性设计和以用户为中心的设计等关键技术探讨了前端设计的规范、技巧与最佳实践。...
全书以问题为导向,精选了前端开发中的34个疑难问题,从分析问题的原因入手,逐步给出解决方案,并分析各种方案的优劣,最后针对每个问题总结出高效编程的最佳实践和各种性能优化的方法。全书共7章,内容从逻辑上...
web前端开发规范主要实现的目标:代码一致性和最佳实践。通过代码风格的一致性,降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践,确保页面性能得到最佳优化和高效的代码。 此规范是在开发中积累下来...
这篇文章讲述可以帮助 改善优化前端的技术,非常有用。主要内容有清理代码、压缩图片、压缩外部资源、使用CDN,以及一些其它方法。这些方法会为你的网站带显著的速度提升和整体性能提升。 一. 清理 HTML 文档 HTML,...
这几天,第三轮全站优化结束,测试项目在2G首屏载入速度取得了一些优化成绩,对比下来有10s左右的差距:这次优化工作结束后,已经是第三次大规模折腾公司框架了,这里将一些自己知道的移动端的建议提出来分享下,...
全书内容丰富,主要包括减少HTTP请求、EdgeComputing技术、ExpiresHeader技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复JavaScript的技巧、关闭...
本书结合Web 2.0以来Web开发领域的最新形势和特点,介绍了网站性能问题的现状、产生的原因,以及改善或解决性能问题的原则、技术技巧和最佳实践。重点关注网页的行为特征,阐释优化Ajax、CSS、JavaScript、Flash和...
BalmJS规定了最佳实践和工具,以帮助您保持生产力。 自然地:使Web开发简单,自然且愉快。 基于结构:一个配置文件可以管理至少90%用例的Webapp项目。 学习一次,运行任何Web应用程序:将以相同的方式开发和构建...
此外,模板的设计理念和编码实践都符合当前网页设计和开发的最佳实践,为学生提供了一个理想的学习和实践平台。 这套源代码合集特别适合用作毕业设计、课程设计或大型作业的基础,帮助学生快速搭建现代化的网站原型...
它结合了当今响应式Web的最佳实践以及我们在每个项目中使用的核心组件。 将其视为您进入网络空间的冒险的发射台。 spaceBase是任何新的Web项目的前端启动文件。 它设置了您的Sass体系结构并规范了CSS和本机HTML...
这份118套响应式网站模板的HTML源码合集是前端开发领域的...这套源码非常适合作为毕业设计、课程设计或大型作业的参考模板,它不仅能帮助学生们快速搭建起专业级别的网站,还能在实践中深化对Web前端技术的理解和应用。
系统开发技术栈、Web前端开发技术栈、数据库技术栈、.NET技术栈! http://overflowstack.github.i o 本地化 English: https://github.com/unruledboy/WebFrontEndStack/ 中文博客: ...
Web应用程序入门工具包。 React 最佳化 经过PWA优化的服务器端呈现,与Service Workers脱机优先,在后台预取 包括 通知事项 设定档 去做 在开发模式下运行 去做 建造 去做 在生产模式下部署和运行 去做 使用Docker...
本书在简洁明快地讲述JavaScript和DOM的基本知识之后,过几个实例演示了大师级的网页开发技术,并透彻阐述了一些至关重要的JavaScript编程原则和最佳实践,包括预留退路、循序渐进和以用户为中心等。读者可以非常...
jQuery以其轻巧的体积、强大的选择器、出色的DOM封装、丰富的插件支持使得广大的Web前端开发者得心应手,极大地提高了他们的开发效率;此外,jQuery中完善的Ajax功能、行为与结构层的分离、可靠的事件处理机制也同样...
它允许开发人员在一个框架中通过常用的习惯用语和最佳实践来创建可伸缩的单页面应用程序。该框架提供丰富的对象模型、声明性双向数据绑定、计算属性,Handlebars.js提供的自动更新模板,以及一个路由器管理应用程序...
AEGEE-伦敦网站AEGEE-伦敦存储库。 该网站是与Gulp捆绑在一起的原始JavaScript,HTML和CSS。 它不使用任何工具集或前端框架... 它遵循最佳性能,可访问性和其余的Web实践。 它得到低于分数。 您可以自己检查! 只需在C