这样写会访问两次dom节点树，一次读取innerHTML，一次重写innerHTML。

当然，加载速度也是很惊人的。

用一个变量把a存起来，只读取和重写innerHTML一次。

可以看到加载时间大幅度减少。

所以说减少访问dom节点数的访问次数对提高代码运行速度是非常有帮助的。

dom树渲染对性能的影响的更多相关文章

  1. css加载是否会阻塞dom树渲染

    这里说的是头部引入css的情况 首先,我们都知道:css是由单独的下载线程异步下载的. 咱们先分析下css加载会影响什么,刚才的问题太笼统了,咱们需要细化一下. 会影响什么呢? 一个就是DOM树解析, ...

  2. 高频dom操作和页面性能优化（转载）

    作者:gxt19940130 原文:https://feclub.cn/post/content/dom 一.DOM操作影响页面性能的核心问题 通过js操作DOM的代价很高,影响页面性能的主要问题有如 ...

  3. CSS加载不会阻塞DOM树解析

    1.css的加载不会阻塞DOM树解析. 1).css加载不会阻塞DOM树的解析: 2).css加载会阻塞DOM树渲染: 先把DOM树结构先解析完,等CSS加载完后根据最终样式渲染DOM树,免了css加 ...

  4. WebKit Inside: DOM树的构建

    当客户端App主进程创建WKWebView对象时,会创建另外两个子进程:渲染进程与网络进程.主进程WKWebView发起请求时,先将请求转发给渲染进程,渲染进程再转发给网络进程,网络进程请求服务器.如 ...

  5. 【浏览器渲染原理】渲染树构建之渲染树和DOM树的关系（转载 学习中。。。）

    在DOM树构建的同时,浏览器会构建渲染树(render tree).渲染树的节点(渲染器),在Gecko中称为frame,而在webkit中称为renderer.渲染器是在文档解析和创建DOM节点后创 ...

  6. DOM性能瓶颈与Javascript性能优化

    这两天比较闲,写了两篇关于JS性能缺陷与解决方案的文章(<JS特性性能缺陷及JIT的解决方案>,<Javascript垃圾回收浅析>),主要描述了untyped,GC带来的问题 ...

  7. 前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  8. js和css文件位置对页面性能的影响

    翻译了一篇Performance上的关于页面性能的文章<DecIPhering the critical rendering path>,原文在这里.需要进一步整理和了解有关js.css等 ...

  9. [react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?

    壹 ❀ 引 虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...

随机推荐

  1. c++ switch和case的用法

    #include "pch.h" #include<iostream> using namespace std; const float PI = 3.1415926; ...

  2. java 删除整数元素集合中的元素

    1. 简介 对于整数类型的元素集合,例如{1, 2, 3, 4, 5},再进行元素删除时需要注意.在List中删除操作有remove(int index)和remove(Object o), 查看两种 ...

  3. css常用的属性

    CSS------属性值篇 display: none | block | inline(默认值) | inline-block(css2新增) | inherit none :此元素不会再显示 {注 ...

  4. centos7上keepalived的安装和配置

    1.环境规划1)master:node1,centos7.5,eth0:192.168.1.11,eht1:10.10.1.11,keepalive2)backup:node1,centos7.5,e ...

  5. 中文乱码 URLEncode之后，后台获取仍是乱码问题详解

    java中获取到参数的时候,这时候默认使用的是iso8859-1进行解码的,那么就再使用URLEncode的encoe方法对其进行编码一次,编码格式使用iso8859-1,这样我们就获得最初使用utf ...

  6. 微信小程序开发学习（一）：开发前准备

    开发前准备 Step1:注册 微信小程序开放平台: https://mp.weixin.qq.com/cgi-bin/wx 开发者注册: https://mp.weixin.qq.com/wxopen ...

  7. ThinkPHP部署在lnmp环境中碰到的问题

    先说一下问题: 因为tp5的入口文件在public目录下,而Application和public同级, 我用的lnmp1.5默认做了防跨站目录设置,所以导致入口文件无法进入application目录, ...

  8. Redis-安装篇

    Redis Cluster搭建 需求:创建6个节点,3主3从127.0.0.1:6379127.0.0.1:6380127.0.0.1:6381127.0.0.1:6382127.0.0.1:6383 ...

  9. _net之美 记录笔记

    第一章: Valpoint vPoint1=new Valpoint(); Console.WriteLine(vPoint1.x); 1.=号左边ValPoint vPoint1,在线程上创建一个V ...

  10. [Codeforces375E]Red and Black Tree

    Problem 给定一棵有边权的树.树上每个点是黑或白的.黑白点能两两交换. 求符合任意一个白点到最近黑点的距离小于等于x时,黑白点交换次数最少为多少. Solution 明显是一题树形DP.我们先跑 ...