zoukankan      html  css  js  c++  java
  • 高效CSS的一些建议

    1. 把css放在head区
        Before a browser can begin to render a web page, it must download and parse any stylesheets that are required to lay out the page. Even if a stylesheet is in an external file that is cached, rendering is blocked until the browser loads the stylesheet from disk.
        由于页面中所有css下载并解析完成之前, 浏览器不会开始渲染页面, 又<head>中的内容下载、解析完成之前浏览器不会开始解析body,所以将css放在head区是个好方案。

    2.避免使用 css @import
        以前在网上看到这条建议时,给的原因是说这样做相当于把css放在了页面底部,关于这种说法我一直很迷惑,为什么@import就相当于放到底部了?直到前几天在google developers看到下面这句话, 才知道真像并不是这样的:
        When CSS @import is used from an external stylesheet, the browser is unable to download the stylesheets in parallel, which adds additional round-trip times  to the overall page load. For instance, if first.css contains the following content: @import url("second.css"), The browser must download, parse, and execute first.css before it is able to discover that it needs to download second.css.

         上面这段句的大致意思: 当外联的css文件中(这里我们假设是a.css)使用了@import指令(假设import的是b.css)时, 浏览器必须要等到a.css下载完成后解析它的过程中才能发现还有一个b.css需要下载, 于是去下载b.css, 而a.css中的其余代码也必须要等到b.css下载并解析完成后才能被解析. 这一来一去就降低了页面的渲染速度.

         如果a.css和b.css都采用外联的方式引入, 则二者可以并行下载, 这样可以提升页面渲染速度, 在页面中包括数十个css时尤其明显.

    3. 去除不必要的css
        网站公用的样式通常会被提到一个通用的css文件中,然后被多个页面引用,随着这个common.css越来越大,它的很多内容都是某个具体的页面所用不到的。对于这种情况,建议将common.css按功能拆分成几个小文件,然后按需引用。

    4.避免使用css expression, filter等IE属性
        css expression会在页面任何事件发生时重新计算、执行,所以很消耗资源,并且只有IE5-7支持,IE8中已废弃。等效的兼容方案可采用js实现。

  • 相关阅读:
    关于图片色彩位深度与颜色模式(待完善)
    Android 跨进程数据共享
    Android实现模拟表单上传
    Android数据库无缝升级方案
    Dagger2在Android开发中的应用
    Dagger2学习笔记
    Android开发随手记
    Android Shape Divider
    带你玩转java多线程系列 “道篇” 多线程的优势及利用util.concurrent包测试单核多核下多线程的效率
    带你玩转java多线程系列 二 Thread 和 Runnable
  • 原文地址:https://www.cnblogs.com/linfengtingyu1/p/3491853.html
Copyright © 2011-2022 走看看