web性能-HTML和CSS优化

·  阅读 570
web性能-HTML和CSS优化

web性能-HTML和CSS优化

HTML优化

  1. 丑化压缩减小文件体积,更快到达客户端
  2. 加快html文件的解析速度
    1. 避免阻塞:参考博主姊妹篇:<link>和<script>和dom解析渲染之间的关系
    2. dom元素尽量少,结构尽量简单(dom元素过多的话,可以考虑懒加载,动态添加。或考虑先加载首屏 视窗内的内容,其余的懒加载)

CSS优化

1. 减小体积

  1. 丑化压缩

  2. DRY原则(don't repeat yourself,不要重复代码,合理的用class封装起来)

  3. 简写css:

    • 例如:合在一起写如:margin: 1px 2px 3px 4px; 不要分成4个写
    • 类似的api总结:margin、padding、border、background和border-radius 等
  4. 去掉冗余css(没用上的css)(css的tree shaking):

    方案一:用工具 purifycss-webpack-plugin

    • 配置方法在:github.com/FullHuman/p…

    • 缺陷:因为对vue工程项目兼容的不好,会误删掉写在.vue文件内的<style scoped>这里面的会被删掉</style>(比如跟vue相关的属性选择器.task-wrapper[data-v-e73ee6b6]) purgecss-wrong.png

    • 解决勿删问题: (配置选择器的白名单)

       plugins: [
         new PurgeCSSPlugin({
           paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
           // (配置选择器的白名单):可以在safelist里面配置,不会删这些选择器。
           //     比如vue的scoped的样式,会固定是属性选择器[data-v-xxxxx],特征是 data-v.
           safelist: [/^data-v/, /^ivu-/, /^my-layout/] // 选择器的白名单
         })
       ],
      复制代码

    方案二:利用工具识别,然后手动删除(更不会出现勿删的问题)

  5. 分割css,配合按需加载,把首屏需要加载的css降到最小:mini-css-extract-plugin (webpack 4 以上)

    1. 关于媒体查询:media-query-plugin:github.com/SassNinja/m… (因为移动用户不需要加载电脑或平板专用的 CSS )
  6. 自定义框架下载(按需下载)

    1. 比如 bootstrap和echart
  7. 如果是响应式网站,则:移动优先(或者 那个端用户最多,就哪个优先)

    1. 移动优先好处

      1. 现在移动端用户更多

      2. 移动端会更简单,可以随时扩大规模(兼容更大的尺寸,更不是缩小规模),从简单出发更好开发

        1. 配置 viewport标签:<meta name='viewport' content='width=device-width, initial-scale=1'>

          告诉浏览器两件事:设备应该以与设备屏幕相同的宽度渲染页面,并且页面的初始比例应该是100%

      3. 移动友好的网站,在移动端的搜索排名也会更前

2. 对css代码性能优化

  1. 避免使用在css代码内写@import

    • (串行请求,会增加总体的加载和渲染时间),可以用<link标签(并行请求)
  2. css要放在<head>中:

    1. 防止样式闪烁(因为浏览器从上到下读取HTML文档,浏览器渲染速度足够快,有机会在加载外部css之前渲染无样式页面)
    2. 提高渲染速度(因为 如果不放在head而放在文档后面的话,需要重新渲染和绘制整个dom)
  3. 尽量避免比较慢的选择器

    • 如:属性选择器,伪类,兄弟
  4. 尽可能使用flexbox

    • 好处:可以简化布局代码,使布局代码稳定性更好,并且 渲染和绘制的性能 也比盒模型要好
  5. 使用css过渡,包含简单的线性动画,优点如下

    1. 广泛支持,新浏览器都支持,较旧的可以使用厂商前缀
    2. 有GPU加速,性能很好,本身写法也很简单,对于简单的动画来说,完全可以取代js(一定要用js的话,要用requestAnimationFrame)

3. 考虑使用关键css(对首屏速度要求极高的话)

概念是:首屏 可视区域 的css 优先加载,其他区域可以闲时加载

具体操作:

  • 关键css
    1. http/1.x:单独作为内联加载,放<head>内
    2. Http/2:直接<link rel='preload'>标签外链加载(http2没有队头阻塞问题),或者服务端推送
  • 非关键css,可以放到html文档后面,闲时加载,不影响首屏渲染

码字不易,点赞鼓励!

部分参考《Web性能实战》[美]杰里米·瓦格纳


性能优化合集快速入口:

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改