`

Web 前端优化最佳实践第四部分面向 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)

另请参见 Mozilla 开发者中心的文章:Writing Efficient CSS

分享到:
评论

相关推荐

    高效前端:Web高效编程与优化实践_机械工业出版社; 第1版 (2018年1月1日) 完整版-未加密

    34Effective前端6:JS书写优化 47第3章 页面优化 59Effective前端7:避免页面卡顿 59Effective前端8:加快页面打开速度 67Effective前端9:增强用户体验 85Effective前端10:用好Chrome Devtools 91第4章 ...

    知乎大神萧井陌web前端课程

    第4章 数组和字符串、作业讲解、debug大法 第5章 作业讲解、如何方便地用测试写代码、break&continue;语句、object、读文档、递归 第6章 网页中引入JavaScript代码、DOM、事件 第7章 数据类型、多行字符串和转义符号...

    编写高质量代码-Web前端开发修炼之道.azw3

    第4章 高质量的CSS 4.1 怪异模式和DTD 4.2 如何组织CSS 4.3 推荐的base.css 4.4 模块化CSS——在CSS中引入面向对象编程思想 4.4.1 如何划分模块——单一职责 4.4.2 CSS的命名——命名空间的概念 4.4.3 挂多...

    HTML5Course20160612:Web前端课程原始码

    ##第一章HTML ##第二章CSS ##第三章JavaScript基本语法变量与常量流程控制循环功能常用功能面向对象##第四章jQuery ##第五章响应式布局##第六章桌面应用开发##第七章移动应用开发##第八章Node.js

    JavaScript权威指南(第6版)中文文字版

    内容简介 《JavaScript权威指南(第6版)》要讲述的内容涵盖JavaScript语言本身,以及web浏览器所实现的JavaScript API。本书第6版涵盖了 html5 和 ecmascript...第四部分 客户端javascript参考客户端 javascript参考 847

    JavaScript权威指南(第6版) 中文版

    本书第6版涵盖了 html5 和 ecmascript 5,很多章节完全重写,增加了当今 web 开发的最佳实践的内容,新增的章节包括 jQuery、服务器端 JavaScript、图形编程以及JavaScript式的面向对象。本书不仅适合初学者系统学习...

    JavaScript权威指南(第6版)

    《JavaScript权威指南(第6版)》要讲述的内容涵盖JavaScript语言本身,以及web浏览器所实现的JavaScript API。本书第6版涵盖了 html5 和 ecmascript 5,很多...第四部分 客户端javascript参考客户端 javascript参考 847

    JSP程序设计实例教程(第2版)-电子课件第1章-Java-Web编程基础.pptx

    1.2 JSP工作原理 1.3 JSP程序体系结构 1.4 HTML和CSS简介 1.5 XML基础简介 1.6 搭建JSP的运行环境 1.7 第一个JSP应用 JSP程序设计实例教程(第2版)-电子课件第1章-Java-Web编程基础全文共73页,当前为第4页。...

    python入门到高级全栈工程师培训 第3期 附课件代码

    第4章 01 上节课复习 02 创建用户相关的文件 03 用户增删该查及组相关操作 04 对文件的权限管理 05 对目录的权限管理 06 权限管理补充 07 属主属组及基于数字的权限管理 第5章 01 上节课复习 02 文件合并与文件...

    达内java培训目录

    达内java培训目录 ...4.开班3个月内,贯穿Web前端技术和Servlet/JSP的学习,将完成T-NetCTOSS项目: NetCTOSS系统的主要任务是提供对于数据的计费查询和管理功能。 5.开班4个月内,学员将完成"航空订票"真实项目

    jQuery权威指南-源代码

    jQuery以其轻巧的体积、强大的选择器、出色的DOM封装、丰富的插件支持使得广大的Web前端开发者得心应手,极大地提高了他们的开发效率;此外,jQuery中完善的Ajax功能、行为与结构层的分离、可靠的事件处理机制也同样...

    full-stack-series:此仓库供核心团队在我们的Full Stack Web App活动系列中为活动参与者提供源代码

    全栈系列 这个仓库是做什么用的? 此仓库供核心团队在我们的全栈Web应用... 第4节:Python和Flask-创建Web服务器并提供静态文件-2/12 专题5:数据存储和Firebase身份验证-TBA 会议6:使用App Engine进行部署-2/28

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    第4周 上节内容回顾 心灵鸡汤 装饰器详解 装饰器应用详解 装饰器之函数即变量 装饰器之高阶函数 装饰器之嵌套函数 装饰器之案例剖析 装饰器之高潮讲解 迭代器与生成器 迭代器与生成器并行 内置方法详解 Json与...

    HTML5程序设计(第2版).[荷]Peter Lubbers(带详细书签).pdf

    第4章 音频和视频 75 4.1 HTML5 Audio和Video概述 75 4.1.1 视频容器 75 4.1.2 音频和视频编解码器 76 4.1.3 HTML5 Audio和Video的限制 77 4.1.4 audio元素和video元素的浏览器支持情况 77 4.2 使用...

    Java开源的下一代社区平台Symphony.zip

    Sass:前端 CSS 处理工具 jsoup:Java HTML 解析器 pegdown:Java Markdown 处理库 Apache Commons:Java 工具库集 Jodd:Java 工具库集 emoji-java:Java Emoji 处理库 User-Agent-Utils:Java User-Agent ...

    ajax验证码异步刷新源码新手java-front-end-face-questions:史上最全前端开发面试问题及答案整理

    数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。 其他: HTTP、安全、正则、优化、重构、响应式、移动端、...

    程序员面试刷题的书哪个好-Interview-questions:分享自己整理的前端面试题及答案

    数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。 其他: HTTP、安全、正则、优化、重构、响应式、移动端、...

    udacity_frontend_p4_arcade-game

    蛙人式街机游戏Udacity前端Web开发-项目3:街机游戏概要这是我通过Udacity的前端Web开发课程进行的一系列项目的第三部分,通过该课程,我一直在复习Web基础知识,包括HTML5,CSS和JavaScript。 该项目涉及一些面向...

Global site tag (gtag.js) - Google Analytics