zoukankan      html  css  js  c++  java
  • 如何提升页面渲染效率--笔记

    原文参考icodeit.org/2017/02/frontend-page-performance-tuning/
    渲染过程

    javascript->style->layout->paint->composite

    下载html文档
    解析html文档,生成dom
    下载文档中引用的css,js
    解析css样式表,生成cssom
    将js代码交给js引擎执行
    合并dom和cssom生成render tree
    根据render tree进行布局layout(为每个元素计算尺寸和位置信息)
    绘制(paint)每个层中的元素(绘制每个瓦片,瓦片这个词与gis中的瓦片含义相同)
    执行图层合并(composite layers)

    render tree会被分层绘制,最后合并,在GPU中执行。

    缩短渲染过程,解决办法如下
    1,对不同终端,同一终端不同模式,书写不同规则集(个人感觉只有细分终端时候比较有用)
    用link方式,
    <link href="print.css" rel="stylesheet" media="print">
    <link href="landscape.css" rel="stylesheet" media="orientation:landscape">

    2.书写高效css规则(先分清css的优先级),避免过多深层嵌套
    动画用GPU执行,书写格式使用transform启动
    如:@keyframes my{
    20%{
    transfrom:translateY(10px);
    }
    }

    3.js引入时候,直接指定是否为异步
    <script src="worker.js" async></script>指定为异步引入

    4.获取元素的宽度和高度属性,需要重新计算。这种获取动作尽量减少重复

    5.涉及到宽高会触发layout->paint->composite layers
    涉及到背景色一类会触发paint->composite layers
    具体参照css triggers

  • 相关阅读:
    java命名规范:注重细节
    撒旦法撒旦法三阿斯顿发暗室逢灯
    369绿色浏览器开发记录
    时间过得好快
    C++进程间通信(常用理解例子)-买票
    MFC常用 控制对话框透明属性函数
    DedeCms 建站随笔(一)
    个人作业收官——软件工程实践总结
    第三次作业——个人作业——软件产品案例分析
    UML用例图
  • 原文地址:https://www.cnblogs.com/victory820/p/6855155.html
Copyright © 2011-2022 走看看