• 关于优化


    加载优化

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

  • 相关阅读:
    node.js之npm命令安装扩展模块
    jquery选择器(转)
    node.js入门
    node.js之模块
    redhat 下装redis
    html 5之websocket(转)
    node.js安装和环境搭建
    javascript 动态加载脚本库
    HTML5 LocalStorage 本地存储
    【ecmascript】 ECMAScript 6概览【转】
  • 原文地址:https://www.cnblogs.com/_error/p/12522634.html
Copyright © 2020-2023  润新知