a属性+DOM创建回流+动画运动+
超链接a的属性 href分析:
< a href = " " > 点击刷新页面,相当于向后台发送了一次请求
< a href = " # " > 锚点跳转,跳到叫ID为。。的位置上
< a href = " Javascript:; " > 取消刷新页面
拓展:
字符串拼接和DOM创建都是渲染的方式
字符串拼接:
优:简单,层次感强,可以处理大量数据
缺:影响到原有子元素的事件
DOM创建:
优:是一个独立的个体,不会影响到原有元素
缺:处理数据量过大比较麻烦,造成DOM回流
DOM回流:
页面渲染时,我们对HTML结构简单的增删查改时
浏览器会对所有DOM进行重新排列,严重影响浏览器性能
提升浏览器性能优化:
多采用雪碧图;
阻止超链接的默认行为
减少DOM回流
减少向服务器的请求次数
动画——
1,css样式提供了运动
过渡属性 transition,从一种情况到另一种情况叫过渡
transition:attr liner delay
attr:是变化的属性
time:是花费的时间
linear:是变化的过渡
delay:是延迟
2,js提供的运动
元素client,offset,scroll三个系列:
clientWidth;clientHeight;clientTop;clientLeft
offsetWidth;offsetHeight;offsetTop;offsetLeft;offsetParent
scrollWidth;scrollHeight;scrollTop;scrollLeft
十三个属性,前面是一个只读属性,scrollTop;scrollLeft 可读可写
scrollTop;scrollLeft最小值是 0
获取body整个文档的高:
document.body.scrollHeight || document.documentElement.scrollHeight
获取浏览器一屏幕的高(浏览器可视区):
document.body.clientheight || document.documentelement.clientheight
window下的两个事件:
onscroll 当滚动条滚动时触发
onresize 当窗口发生改变时触发
a属性+DOM创建回流+动画运动+的更多相关文章
- JavaEE XML DOM创建
DOM创建XML @author ixenos 1.思路: 先封装构建一颗DOM树,然后将DOM树转换成XML文件 2.三种写DOM树到XML文件的方式: 1)使用DOM(或DOM4J.JDOM) 2 ...
- 创建帧动画1 - xml方式
废话不多说,先看东西 创建帧动画1 - xml方式 帧动画的创建方式主要以下2种: * 用xml创建动画: * 用代码创建动画: 本文内容主要关注 xml文件 创建帧动画的方式 xml文件 ...
- PHP中利用DOM创建xml文档
DOM创建xml文档 用dom创建如下文档: <booklist> <book id="1"> <title>天龙八部</title> ...
- Unity 2D骨骼动画2:创建真实动画
http://bbs.9ria.com/thread-401781-1-1.html 在这个系列,我们将关注Unity引擎提供的基于骨骼动画工具.它的主要思想是为了把它应用到你自己的游戏来介绍和教基本 ...
- css 12-CSS3属性详解:动画详解
12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...
- Web动画API教程1:创建基本动画
本人转载自: Web动画API教程1:创建基本动画
- 解决浏览器background-image属性不支持css3动画
问题 最近在使用background-image属性来实现css3的逐帧动画时,碰到了个问题.在chrome浏览器上,background-image属性是支持css3动画的,但是到了firefox上 ...
- 练习:javascript-setInterval动画运动平移,定时器动画练习
常见问题:定时器加速问题,每次点击会启动一个定时器,解决先清除定时器 <!DOCTYPE html> <html lang="en"> <head&g ...
- Scrollanim – CSS3 & JavaScript 创建滚动动画
Scrollanim 是结合 CSS3 和 JavaScript 来创建令人惊叹的滚动动画的开源库. Scrolanim 支持在页面上的所有可用的元素的位置.有很多的自定义参数可以配置使用,构建出精彩 ...
随机推荐
- .Net反射-TypeDescriptor
.Net中提供了两种方式访问类型的元数据:System.Reflection命名空间中提供的反射API和TypeDescriptor类.反射适用于所有类型的常规机制,它为类型返回的信息是不可扩展的,因 ...
- 安装服务器pve虚拟系统(可以通过web管理物理机集群资源与虚拟机)
做此系统前,可以先进入bios,设置一下ipmi的网络地址.可以远程管理服务器 输入服务器的ipmi里面配置的ip 默认账号与密码admin 点击launch 会自动下载认证文件 下载好java软件环 ...
- postMessage的使用
一.简介 1.postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档.多窗口.跨域消息传递 2.postMessage(data,origin)方法接受两个参数 ...
- ESA2GJK1DH1K微信小程序篇: 小程序实现MQTT封包源码使用说明
说明 我为了后期能够快速的让小程序实现MQTT,我做了一个MQTT的封装. 功能的封装有助于后期快速的开发,还方便咱维护. 我后期的所有代码皆使用此封装库, 这一节,我就详细的介绍我封装的MQTT.j ...
- 【JZOJ100207】【20190705】决心
题目 你需要构造一个排列 初始时\(p_i=i\),一次操作定义为: 选择一些\((x_i,y_i)\),满足每个数字只能出现一次 依次交换\(p_{x_i},p_{y_i}\) 定义一个排列 \(P ...
- 【cf补题记录】Codeforces Round #607 (Div. 2)
比赛传送门 这里推荐一位dalao的博客-- https://www.cnblogs.com/KisekiPurin2019/ A:字符串 B:贪心 A // https://codeforces.c ...
- 紧随时代的步伐--Java8之Lambda表达式的使用
1.前言 在计算机行业,每天都会有新的技术诞生,每天都会有上百种的技术更新升级.追随时代的步伐,终生学习,才能不被社会的浪潮淘汰. 2.关于Lambda表达式 Lambda表达式是Java8新特性之一 ...
- builder模式实例
package heapStark.blogCode.designPattern.builder; public class BaseBean { private int age; private S ...
- 非mvn项目转为mvn项目并构建mvn私服
非mvn项目转为mvn项目并构建mvn私服 一.背景 公司里的系统是老系统,没有使用mvn,但是现在准备使用持续集成(CI),就要用到mvn,所以现在需要将老项目转为mvn项目,并且非mvn项目也是不 ...
- SpringBoot 应用篇之从 0 到 1 实现一个自定义 Bean 注册器
191213-SpringBoot 应用篇之从 0 到 1 实现一个自定义 Bean 注册器 我们知道在 spring 中可以通过@Component,@Service, @Repository 装饰 ...