web性能-HTML和CSS优化

bigtree
988 阅读4分钟

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性能实战》[美]杰里米·瓦格纳

性能优化合集快速入口：

avatar
文章
阅读
粉丝