zoukankan      html  css  js  c++  java
  • 关于优化

    加载优化

    1. 合并css、js,合并小图,使用雪碧图;

    2. 缓存一切可缓存的资源;

    3. 使用长cache;

    4. 使用外联式引用 CSS、JavaScript;

    5. 压缩 HTML、CSS、JavaScript;

    6. 使用首屏加载;

    7. 使用懒加载;

    8. 使用按需加载;

    9. 使用滚动加载;

    10. 增加 Loading 进度条;

    11. 异步加载第三方资源;

    图片优化

    1. 使用图片压缩工具(TinyPNG、智图等);

    2. 使用 CSS、SVG、iconfont 代替图片;

    3. webp 优于JPG, png8 优于 gif ;

    4. 图片大小、体积限制;

    脚本优化

    1. 减少重绘、重排;

    2. 缓存Dom 选择与计算;

    3. 缓存 列表 length;

    4. 尽量使用事件代理,而非批量绑定;

    5. 尽量使用 ID 选择器;

    CSS 优化

    1. CSS写在头部,JavaScript 写在尾部或者 异步加载;

    2. 避免重设图片大小;

    3. 图片避免使用 dateURL;

    4. 避免行内样式;

    5. 避免 CSS 表达式;

    6. 移除空的 CSS 规则;

    7. 不滥用 float ;

    8. 值为 0,不需要单位;

    9. 小数点前只有 0 ,可省去这个 0 ,如 0.5rem 可简写为 .5rem;

    10. 标准化浏览器前缀;

    11. 避免选择符看起来像 正则表达式;

    渲染优化

    1. 减少 DOM 节点;

    2. 合理使用 requestAnimationFrame 代替setTimeout;

    3. Touchmove、scroll 事件会导致多次渲染;

    4. 使用 3d 动画触发 GPU 渲染;

    -- end -- 

  • 相关阅读:
    vue-router总结2
    vue-router总结
    react中的路由模块化
    react路由嵌套
    Javascript设计模式之我见:迭代器模式
    Javascript设计模式之我见:观察者模式
    【C语言】格式符
    【编译原理】代码在编译器中的完整处理过程
    【数据库】增删改查操作
    测试
  • 原文地址:https://www.cnblogs.com/_error/p/12522634.html
Copyright © 2011-2022 走看看