zoukankan      html  css  js  c++  java
  • 减少浏览器的回流和重绘

    1、css

    避免过多样式嵌套

    避免使用css表达式

    使用绝对定位可以让动画元素脱离文档流(给动画元素做单独定位)

    避免使用table布局(会引起多次重绘)

    尽量不适用float布局

    图片最好设置好width和height

    尽量简化浏览器不必要的任务,减少页面重新布局

    使用viewpoint设置屏幕缩放级别

    避免频繁设置样式

    避免使用引起回流的和重绘的属性

    2、js

    最小化回流和重排:避免频繁操作DOM,可以合并多次对DOM修改,尽量一次性批量处理

    控制绘制过程和绘制区域

     3、优化DOM

    控制DOM大小:合理的业务逻辑(逻辑拆分)、延迟加载即将呈现的内容

    简化DOM操作:统一处理DOM节点的操作后再统一插入到DOM TREE中;使用fragment;虚拟DOM技术,通过diff算法简化和减少DOM操作

    4、静态文件压缩工具:

    HTML压缩工具:html-minifier

    CSS压缩工具:clean-css

    JS压缩工具:uglify-js

    5、静态文件打包方案:

    公共组件拆分

    压缩:JS/CSS/图片

    合并:JS/CSS文件合并,CSS Sprite

    Combo:JS/CSS文件

  • 相关阅读:
    kvm基本原理
    RAID分类
    监控MySQL主从脚本
    MySQL优化
    查看某个ip地址接在交换机的哪个接口
    rsync+inotify脚本
    docker工作流程
    雅礼集训【Day6-1】字符串
    【模拟试题】困难重重
    Loj #6069. 「2017 山东一轮集训 Day4」塔
  • 原文地址:https://www.cnblogs.com/cvv54/p/13264308.html
Copyright © 2011-2022 走看看