图片优化、Html优化、CSS优化、js优化、页面结构优化

  1. 图片优化
    1.  图片类型选择
      1. PNG 适合纯色透明，如做图标
      2. JPEG 适合色彩丰富的图片，如滚动图
      3. GIF  动态图片，某些动态图
      4.  Webp 适合图形和半透明图像
    2. 图片压缩
      1. 压缩png   node-pngquant-native
      2. 压缩 jpg   jpetean 
      3. 压缩gif   Gifsicle
  2. 优化策略
    1. 图片尺寸随网络环境变化，通过在URl后面加不同参数改变
    2. Web Font代替图片
    3. 图片服务器自动优化，根据在url增加参数，使得服务器自动生成不同格式，大小，质量的图片
    4. Data url代替图片
    5. 使用Image Spriting （雪碧图），精灵图
    6. 图片懒加载
    7. 响应式图片
    8. Javascript绑定事件检测窗口大小
    9. Css媒体查询  @media
    10. Img 标签的srcset属性
  3. HTML优化
    1. 内容优化
      1. 减少无语义化代码
      2. 删除http或https的协议头
      3.  删除空格、换行符和多余的注释
      4. 省略沉余标签和属性
      5.  使用相对路径的URL  
    2. 格式优化
      1. 减少HTML的嵌套
      2. 减少DOM节点数
      3. CSS样式文件链接尽量放在头部，body之前，减少页面重排次数。CSS加载不会阻塞dom树的构建，但是会阻塞页面渲染和js执行
      4. Js引用放在底部，防止js的加载、解析、执行阻塞了页面后续元素的正常渲染
      5. 增加首屏必要的CSS和JS，直接内联在HTML页面中，这样做首屏可以快速显示，相对减少用户对页面加载等待的过程，因为白屏时间过长对用户体验不友好
  4. CSS优化
    1. 谨慎使用expensive属性,如:nth-child伪类以及position:fixed定位
    2. 尽量减少样式层级数。最好不要超过三层
    3. 尽量避免使用占用过多CPU的内存的属性，如:text-indnt: -99999px
    4. 尽量避免使用耗电大的属性，如: css3 3d transforms、css3 transtitions、 opacity
    5. 尽量避免使用css表达式
    6. 尽量避免使用通配符选择器
    7. 尽量避免使用类正则的属性选择器
    8. 使用外链的CSS，尽量避免使用@import
    9. 部署CDN，如字体文件
    10. 字体以base64形式保存在CSS中，并存在localstorage
    11. 外网文件资源使用托管在国内
    12. 动画优化
      1. 避免同时动画
      2. 延迟动画初始化
      3. 结合svg
    13. 精简css代码
      1. 使用缩写语句
      2. 删除不必要的零和单位，分号，空格和注释，减少样式表的大小
  5. Javascript优化
    1. 原则：当需要时才优化，考虑可维护性
    2. 合理使用缓存，缓存列表长度，使用可缓存的Ajax
    3. Js动画优化
      1. 避免添加大量js动画，尽量使用CSS3动画
      2. 尽量使用Canvas动画
      3. 合理使用requestAnimationFrame动画代替setTimeout、setINterval
      4. requestAnimationFrame可以确保在正常的时间进行渲染，setTimeout和setInterval无法保证回调函数的执行实际，
    4. Js语法优化
      1. 尽量使用id选择器
      2.  避免使用eval
      3. Js函数尽可能保持简洁
      4.  使用节流函数
      5. 使用事件委托
    5. 使用缓存
      1. Cookie：随着http一起发送，弥补了http协议无状态，通常与用户个人相关，如登录状态等等，可以给cookie设置有效时间。
      2. sessionStorage：常用于单页应用页面之间的传值
      3. indexedDB 可用于客户端存储大量结构化数据，在没有网络连接的情况下使用（石墨文档），常将沉余、少修改，但经常访问的数据存于次，避免随时从服务器获取数据
      4. LocalStorage：本地永久存储，只能手动清除，可存储一些css文件js文件，一些不常变更的数据 
  6. 页面优化
    1. 减少重排重绘制
      1. CSS
        1. 避免多重嵌套和使用css表达式
        2. 使用绝对定位，使得动画元素脱离文档流
        3. 避免使用table布局（需要资源加载完才显示，不符合语义化）
        4. 图片最好先设置宽高，避免图片加载完就重排
        5. 简化浏览器不必要任务，减少页面重新布局
        6.  使用Viewport设置屏幕缩放级别
        7. 避免频繁设置样式，把新的Style属性设置完后，进行一次性更改
        8. 避免使用引起回流重绘的属性，最好把相应的变量缓存起来
      2. Javascript
        1.  避免频繁操作DOM，可以把多次合并后，一次性批量处理
        2.  减少绘制区域范围
        3. 可以使用fragment，尽量不要在页面DOM树里面直接操作
        4. 使用如Vue，react Angular等框架，通过虚拟Dom技术和diff算法简化和减少Dom操作
    2. 控制DOM大小，减少查找节点和元素绑定事件冒泡和捕获的执行时间
    3. 合理的业务逻辑布局
    4. 延时加载即将呈现的内容（懒加载）

 

posted @ 2021-04-07 15:12  浪波激泥  阅读(253)  评论(0)    收藏  举报