31)

Posted 2021-01-23 xiaotaiyangye

超链接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　　当窗口发生改变时触发