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 -- 

  • 相关阅读:
    清除微信浏览器缓存
    JS实现HTML标签转义及反转义
    mvc中服务器端、客户端属性验证
    Ajax.ActionLink参数详解
    Ajax.BeginForm参数详解
    AjaxHelper简介
    将博客搬至CSDN
    Sequelize小记
    端口: 查看端口状态
    搭建git服务器
  • 原文地址:https://www.cnblogs.com/_error/p/12522634.html
Copyright © 2011-2022 走看看