超链接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创建回流+动画运动+的更多相关文章

  1. JavaEE XML DOM创建

    DOM创建XML @author ixenos 1.思路: 先封装构建一颗DOM树,然后将DOM树转换成XML文件 2.三种写DOM树到XML文件的方式: 1)使用DOM(或DOM4J.JDOM) 2 ...

  2. 创建帧动画1 - xml方式

    废话不多说,先看东西   创建帧动画1 - xml方式 帧动画的创建方式主要以下2种: * 用xml创建动画: * 用代码创建动画:   本文内容主要关注 xml文件 创建帧动画的方式   xml文件 ...

  3. PHP中利用DOM创建xml文档

    DOM创建xml文档 用dom创建如下文档: <booklist> <book id="1"> <title>天龙八部</title> ...

  4. Unity 2D骨骼动画2:创建真实动画

    http://bbs.9ria.com/thread-401781-1-1.html 在这个系列,我们将关注Unity引擎提供的基于骨骼动画工具.它的主要思想是为了把它应用到你自己的游戏来介绍和教基本 ...

  5. css 12-CSS3属性详解:动画详解

    12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...

  6. Web动画API教程1:创建基本动画

    本人转载自: Web动画API教程1:创建基本动画

  7. 解决浏览器background-image属性不支持css3动画

    问题 最近在使用background-image属性来实现css3的逐帧动画时,碰到了个问题.在chrome浏览器上,background-image属性是支持css3动画的,但是到了firefox上 ...

  8. 练习:javascript-setInterval动画运动平移,定时器动画练习

    常见问题:定时器加速问题,每次点击会启动一个定时器,解决先清除定时器 <!DOCTYPE html> <html lang="en"> <head&g ...

  9. Scrollanim – CSS3 & JavaScript 创建滚动动画

    Scrollanim 是结合 CSS3 和 JavaScript 来创建令人惊叹的滚动动画的开源库. Scrolanim 支持在页面上的所有可用的元素的位置.有很多的自定义参数可以配置使用,构建出精彩 ...

随机推荐

  1. LeetCode 641. Design Circular Deque

    原题链接在这里:https://leetcode.com/problems/design-circular-deque/ 题目: Design your implementation of the c ...

  2. hasura graphql-engine + plv8 集成

    hasura graphql-engine 是一款很不错的基于pg 的graphql 引擎,plv8 是pg 的一个扩展,我们可以使用js 编写 函数 ,触发器,而且对于es6 的语法也有比较完备的支 ...

  3. ESA2GJK1DH1K升级篇: 移植远程更新程序到STM32F103RET6型号的单片机,基于(GPRS模块AT指令TCP透传方式)

    前言 上节实现远程更新是更新的STM32F103C8T6的单片机 GPRS网络(Air202/SIM800)升级STM32: 测试STM32远程乒乓升级,基于(GPRS模块AT指令TCP透传方式),定 ...

  4. 基于zookeeper-3.5.5安装hadoop-3.1.2

    目录 目录 1 1. 前言 3 2. 缩略语 3 3. 安装步骤 4 4. 下载安装包 4 5. 机器规划 4 6. 设置批量操作参数 5 7. 环境准备 5 7.1. 修改最大可打开文件数 5 7. ...

  5. CF264D - Colorful Stones 题解

    题面 官方题解 模拟赛题解 题解概述: 定义符号A~B表示序列A是序列B的子序列,A!~B反之. 设操作序列为I,则有A~I,B!~I,C~I,D!~I. 可得出条件①B!~C且D!~A,所以我们只要 ...

  6. kali linux 更换镜像源

    编辑sources.list文件 leafpad /etc/apt/sources.list #aliyun 阿里云 deb http://mirrors.aliyun.com/kali kali-r ...

  7. Kubeadm部署安装kubernetes1.12.1

    1.环境准备(这里是master) CentOS 7.6 两台配置如下,自己更改主机名,加入hosts, master和node 名字不能一样 # hostname master # hostname ...

  8. shell(三)if流程控制

    流程控制 if 流程控制 基本语法 单分支结构 if [];then fi 两分支结构 if [];then else fi 多分支结构 if [];then elif[];then elif[];t ...

  9. 自定义Ribbon的负载均衡策略

    自定义负载均衡策略 官方文档指出:自定义的负载均衡配置类不能放在 @componentScan 所扫描的当前包下及其子包下,否则我们自定义的这个配置类就会被所有的Ribbon客户端所共享,也就是说我们 ...

  10. YYCache 的整体架构类图