为文档应用样式

作者: 悟C | 来源:发表于2019-08-10 21:38 被阅读0次

    这一小节主要讲了怎么在HTML文档中应用样式,以及如何高性能的方式在文档中应用样式,也讲到了浏览器渲染阻塞问题。

    文档中应用样式就两种:

    1. 在head部分使用style元素直接写CSS
    2. 使用link元素外部加载样式表

    第一种方式在样式比较少的时候可以使用,减少了没有必要的http请求,减少了等待下载事件,缺点就是不能复用。

    第二种方式也是比较常用和推荐,有点就是能复用样式。在使用外部样式还有一个方式就@import url(xxxx)的写法,可用在style元素中使用,也可以在外部样式表中使用。

    在性能优化上面,主要是减少一个页面的样式表数量,一般限制在1或2个,减少http请求。还有就是用户GZIP压缩线上资源。CSS压缩的比例很高,因为它很多属性和值都是相同的,一般压缩过后会减少70%~80%。

    这一小节还讲到如何避免JavaScript阻塞渲染,主流的做法就是在</body>之前加载script样式,还有就是使用HTML5的script元素才有的async和defer属性。

    async: 异步加载,但下载后立即执行
    defer: 异步加载、但在HTML解析后执行

    使用场景需要还是看脚本本身具有的内容。

    相关文章

      网友评论

        本文标题:为文档应用样式

        本文链接:https://www.haomeiwen.com/subject/xdjdjctx.html