zoukankan      html  css  js  c++  java
  • 浏览器学习笔记-10 页面中的一些优化

    页面中的一些优化

    js/css 阻塞 dom

    JavaScript 引擎在解析 JavaScript 之前,是不知道 JavaScript 是否操纵了 CSSOM 的,所以渲染引擎在遇到 JavaScript 脚本时,不管该脚本是否操纵了 CSSOM,都会执行 CSS 文件下载,解析操作,再执行 JavaScript 脚本。

    css动画比js实现更快

    生存图片主要包含重排,重绘和合成三个步骤,线路越长耗时越久。

    使用js实现动画效果,阻止主线程,牵涉到重排或者重绘。

    如果要对某个元素做几何形状变化、透明度变换或者缩放,可以使用 will-change 告诉渲染引擎,如下:

    .box { will-change: transform, opacity; }

    will-change 会提前告诉渲染引擎 box 元素要做几何变换和透明度变换操作,这是渲染引擎会将该元素单独实现一层,等变换发生时,渲染引擎会通过合成线程直接处理变换,此变换不涉及主线程,故效率高。这就是 CSS 动画比 JS 动画高效的原因。

    合成线程里完成哪些操作

    能直接在合成线程中完成的任务都不会改变图层的内容,如文字信息的改变,布局的改变,颜色的改变,统统不会涉及,涉及到这些内容的变化就要牵涉到重排或者重绘了。
    能直接在合成线程中实现的是整个图层的几何变换,透明度变换,阴影等,这些变换都不会影响到图层的内容。

  • 相关阅读:
    关于一个简单面试题(。net)
    写一个TT模板自动生成spring.net下面的配置文件。
    EF自动生成的(T4模板) 关联属性元数据修改
    关于面向切面编程的部分内容-错误处理机制
    memcache 安装
    Newtonsoft.Json工具类
    关于Memcache使用的工具类
    关于 Log4Net
    今天开始写博客
    OC 协议
  • 原文地址:https://www.cnblogs.com/SLchuck/p/13721871.html
Copyright © 2011-2022 走看看