元素的客户区

元素的客户区大小，指的是元素内容及其内边距（padding）所占据的空间大小。

相关属性如下：

clientWidth：元素内容区宽度+元素左右内边距
clientHeight：元素内容区高度+元素上下内边距

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.parent {width: 500px;height: 500px;margin: 100px auto;background-color: red;border: 10px solid #000;overflow: hidden;}.child {width: 300px;height: 300px;border: 10px solid #000;padding: 10px;margin: 50px 90px;background-color: green;}</style>
</head><body><div class="parent"><div class="child"></div></div><script>var child = document.querySelector('.child');var html = '';html += 'clientHeight=' + child.clientHeight + "<br>";html += 'clientWidth=' + child.clientWidth + "<br>";child.innerHTML = html;</script>
</body></html>

结果如下：

现给出一个确定浏览器窗口大小的函数：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>function getViewport() {if (document.compatMode === 'BackCompat') {return {width: document.body.clientWidth,height: document.body.clientHeight}}else {return {width: document.documentElement.clientWidth,height: document.documentElement.clientHeight}}}console.log(getViewport());</script>
</body></html>

结果如下：

这里检查document.compatMode属性，判断浏览器是否运行在混杂模式。

在这里我们改写一下该函数：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>function getViewport() {if (document.compatMode === 'BackCompat') {getViewport = function () {return {width: document.body.clientWidth,height: document.body.clientHeight}}}else {getViewport = function () {return {width: document.documentElement.clientWidth,height: document.documentElement.clientHeight}}}return getViewport();}console.log(getViewport());</script>
</body></html>

改造之后我们同样能获取对应的结果，改写之后，我们在调用getViewport的时候，就不会进行判断了。我们知道程序中没有if判断的代码往往比有if判断的代码运行的时候，性能会高一点。

我们再改造一下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>var getViewport = (function () {if (document.compatMode === 'BackCompat') {return function () {return {width: document.body.clientWidth,height: document.body.clientHeight}}}else {return function () {return {width: document.documentElement.clientWidth,height: document.documentElement.clientHeight}}}})();console.log(getViewport());</script>
</body></html>

现在这个函数达到了改造一的效果，优化了性能。

其实这两次改造都提升了代码的性能，我们把这种技巧叫做惰性载入函数。

改造一在第一次运行的时候会消耗一下性能，改造二最开始的时候会消耗一下性能，至于采用那种方式进行优化，取决于具体需求。

举个例子：假如这个方法我是一定要使用的，那么可以使用第二种改造，假如这个方法我不一定会使用到，那么可以使用第一种改造。

一文看懂js中元素的客户区大小（clientWidth,clientHeight）相关推荐

一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）
偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小由其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...
一文看懂js中的clientX，clientY，pageX，pageY，screenX，screenY
一. 客户区坐标位置(clientX,clientY) 鼠标事件都是在浏览器视口中的特定位置发生的.这个位置信息保存在事件对象的clientX和clientY属性中,所有浏览器都支持这两个属性. 我们 ...
【Python基础】一文看懂 Pandas 中的透视表
作者:来源于读者投稿出品:Python数据之道一文看懂 Pandas 中的透视表透视表在一种功能很强大的图表,用户可以从中读取到很多的信息.利用excel可以生成简单的透视表.本文中讲解的是如何 ...
一文搞懂JS中的赋值·浅拷贝·深拷贝
前言为什么写拷贝这篇文章?同事有一天提到了拷贝,他说赋值就是一种浅拷贝方式,另一个同事说赋值和浅拷贝并不相同.我也有些疑惑,于是我去MDN搜一下拷贝相关内容,发现并没有关于拷贝的实质概念,没有办法只 ...
一文看懂JS里隐式转换、toString() 和 valueOf()
js-看懂隐式转换toString 和 valueOf js隐式类型转换数值类型和布尔类型的相加字符串和数字相加隐式类型转换隐藏一些错误 isNaN() 对象的隐式转换强制类型转换 - &qu ...
一文看懂CV中的注意力机制
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达作者丨AdamLau@知乎来源丨https://zhuanlan.zhihu.com/p/28875 ...
一文看懂机器学习中的常用损失函数
作者丨stephenDC 编辑丨zandy 来源 | 大数据与人工智能(ID: ai-big-data) 导语:损失函数虽然简单,却相当基础,可以看做是机器学习的一个组件.机器学习的其他组件,还包括激 ...
一文看懂 NLP 中的情感分析任务
目前,情感分析在中文自然语言处理(Natural Language Processing)中比较火热,很多场景下,我们都需要用到情感分析.比如,做金融产品量化交易,需要根据爬取的舆论数据来分析政策和舆 ...
一文看懂神经网络中的梯度下降原理图像说明
本文是一篇关于深度学习优化方法--梯度下降的介绍性文章.作者通过长长的博文,简单介绍了梯度下降的概念.优势以及两大挑战.文中还配有大量生动形象的三维图像,有兴趣的亲了解一下? 从很大程度上来说,深度学 ...

一文看懂js中元素的客户区大小（clientWidth,clientHeight）

元素的客户区

一文看懂js中元素的客户区大小（clientWidth,clientHeight）相关推荐

最新文章

热门文章