\n
\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},'const config = {\n /** any option */\n};\n\nconst observer = new IntersectionObserver(function (entries, self) {\n entries.forEach(({ isIntersecting, target }) => {\n if (isIntersecting) {\n if (target.dataset.src) {\n target.src = target.dataset.src;\n target.removeAttribute("data-src");\n }\n\n self.unobserve(target);\n }\n });\n}, config);\n\nconst images = document.querySelectorAll("[data-src]");\nimages.forEach((image) => {\n observer.observe(image);\n});\n')),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"scroll")),(0,l.kt)("p",null,"\u5982\u679c Intersection Observer \u5b58\u5728\u517c\u5bb9\u6027\u95ee\u9898\uff0c\u9664\u4e86\u53ef\u4ee5\u6dfb\u52a0\u5bf9\u5e94 polyfill \u4e4b\u5916\uff0c\u4e5f\u53ef\u4ee5\u8003\u8651\u964d\u7ea7\u4e3a\u76d1\u542c scroll\u3001resize\u3001orientationchange \u4e8b\u4ef6\u7684\u65b9\u6848\u3002\u5b9e\u73b0\u601d\u8def\u548c Intersection Observer \u4e00\u81f4\u3002\u5177\u4f53\u7ec6\u8282\u4e0a\uff0c\u9700\u8981\u81ea\u884c\u8ba1\u7b97\u56fe\u7247\u8282\u70b9\u4e0e\u76ee\u6807\u89c6\u53e3\u7684\u7eb5\u5411\u6216\u6a2a\u5411\u8ddd\u79bb\uff0c\u4e14\u9700\u4f7f\u7528\u8282\u6d41\u51fd\u6570\u6765\u907f\u514d\u6027\u80fd\u95ee\u9898\u3002"),(0,l.kt)("h4",{id:"32-\u56fe\u7247\u9884\u52a0\u8f7d"},"3.2 \u56fe\u7247\u9884\u52a0\u8f7d"),(0,l.kt)("p",null,"\u56fe\u7247\u9884\u52a0\u8f7d\u673a\u5236\u662f\u4e3a\u4e86\u589e\u5f3a\u7528\u6237\u4f53\u9a8c\uff0c\u5c3d\u5feb\u5730\u52a0\u8f7d\u51fa\u56fe\u7247\uff0c\u4f7f\u5f97\u7528\u6237\u4f53\u9a8c\u66f4\u4e3a\u6d41\u7545\u3002"),(0,l.kt)("p",null,"\u5982\u679c\u9884\u52a0\u8f7d\u7684\u56fe\u7247\u662f\u786e\u5207\u4e14\u6709\u9650\u7684\uff0c\u53ef\u4ee5\u901a\u8fc7\u786c\u7f16\u7801 link \u6807\u7b7e\u6765\u5b9e\u73b0\u9884\u52a0\u8f7d\u3002\u4f46\u662f\u591a\u6570\u60c5\u51b5\u4e0b\uff0c\u9884\u52a0\u8f7d\u7684\u4f7f\u7528\u573a\u666f\u662f\u52a8\u6001\u7684\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"link")),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},'')," \u5141\u8bb8\u5f00\u53d1\u8005\u5728 HTML \u7684 head \u6807\u7b7e\u4e2d\u58f0\u660e\u8d44\u6e90\u8bf7\u6c42\uff0c\u6307\u5b9a\u9875\u9762\u9700\u8981\u9884\u52a0\u8f7d\u7684\u8d44\u6e90\uff0c\u5e76\u4e14\u5728\u6d4f\u89c8\u5668\u7684\u4e3b\u8981\u6e32\u67d3\u673a\u5236\u542f\u52a8\u4e4b\u524d\u52a0\u8f7d\uff0c\u907f\u514d\u963b\u585e\u9875\u9762\u6e32\u67d3\u4e14\u4fdd\u8bc1\u8d44\u6e90\u5c3d\u65e9\u53ef\u7528\u3002"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n')),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u52a8\u6001\u573a\u666f")),(0,l.kt)("p",null,"\u4e00\u822c\u5e38\u89c1\u65b9\u6848\u662f\u52a8\u6001\u521b\u5efa Image \u6807\u7b7e\u6216\u8005\u662f Ajax \u8bf7\u6c42\u3002\u4f7f\u7528 Ajax \u65f6\u9700\u8981\u6ce8\u610f\u53ef\u80fd\u5b58\u5728\u8de8\u57df\u95ee\u9898\u3002"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"// \u52a8\u6001\u521b\u5efa Image\nfunction preloadImage(url) {\n var img = new Image();\n img.src = url;\n}\n")),(0,l.kt)("h4",{id:"33-\u54cd\u5e94\u5f0f\u56fe\u7247\u52a0\u8f7d"},"3.3 \u54cd\u5e94\u5f0f\u56fe\u7247\u52a0\u8f7d"),(0,l.kt)("p",null,"\u7531\u4e8e\u7528\u6237\u7ec8\u7aef\u8bbe\u5907\u4e0d\u540c\uff0c\u5982\u679c\u56fe\u7247\u8d44\u6e90\u65e0\u5dee\u522b\u4f7f\u7528\u76f8\u540c\u56fe\u7247\uff0c\u53ef\u80fd\u9020\u6210\u5e26\u5bbd\u6d6a\u8d39\u6216\u8005\u662f\u56fe\u7247\u4e0d\u6e05\u6670\u4ee5\u53ca\u89c6\u89c9\u4f53\u9a8c\u5dee\u7684\u95ee\u9898\u3002"),(0,l.kt)("p",null,"\u4e00\u822c\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528 picture \u6807\u7b7e\u6765\u5b9a\u4e49\u96f6\u6216\u591a\u4e2a source \u8282\u70b9\u548c\u4e00\u4e2a img \u8282\u70b9\uff0c\u7528\u4e8e\u63d0\u4f9b\u56fe\u7247\u5728\u4e0d\u540c\u8bbe\u5907/\u663e\u793a\u573a\u666f\u4e0b\u5bf9\u5e94\u7684\u5185\u5bb9\u5c55\u793a\u3002picture \u7684\u5e38\u89c1\u4f5c\u7528\u5305\u62ec\uff1a"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},"\u827a\u672f\u6307\u5bfc\uff08Art direction\uff09")),(0,l.kt)("p",{parentName:"li"},"\u4e3a\u4e0d\u540c\u7684\u5a92\u4f53\u6761\u4ef6\u88c1\u526a\u6216\u4fee\u6539\u56fe\u50cf\u3002\u6bd4\u5982\u5728\u8f83\u5c0f\u7684\u663e\u793a\u5668\u4e0a\uff0c\u52a0\u8f7d\u4e00\u4e2a\u66f4\u7a81\u51fa\u91cd\u70b9\u7684\u56fe\u50cf\u3002"),(0,l.kt)("p",{parentName:"li"},(0,l.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/17002181/128734922-3d28cc38-b3c1-4a6e-afd9-5a8c0f5113b1.jpg",alt:"38666B5C621028DD6F3050D95EF1889E"})),(0,l.kt)("pre",{parentName:"li"},(0,l.kt)("code",{parentName:"pre",className:"language-html"},'
\n
\n平衡二叉树
题目描述#
输入一棵二叉树的根节点，判断该树是不是平衡二叉树。如果某二叉树中任意节点的左右子树的深度相差不超过 1，那么它就是一棵平衡二叉树。
示例 1:
给定二叉树 [3, 9, 20, null, null, 15, 7]
+ 3 / \ 9 20 / \ 15 7返回 true。示例 2:
给定二叉树 [1,2,2,3,3,null,null,4,4]
+ 1 / \ 2 2 / \ 3 3 / \ 4 4返回 false。限制：0 <= 树的结点个数 <= 10000
基本知识点#
二叉树的每个节点最多有两个子节点，平衡二叉树中任意一个节点的左右子树高度相差不能大于 1，满二叉树和完全二叉树都是平衡二叉树，普通二叉树有可能是平衡二叉树。
题解#
解法一#
思路#
若想判断二叉树是不是平衡二叉树，只需要判断左右子树的高度差是不是不超过 1 即可。同时，要满足一个树是平衡二叉树，它的子树也必须是平衡二叉树。我们可以从根结点开始，通过递归来求得子树的高度，以及子树是否是平衡二叉树，以此来结合判断二叉树是否是平衡二叉树。
代码#
/** * Definition for a binary tree node. * function TreeNode(val, left, right) { * this.val = (val === undefined ? 0 : val) * this.left = (left === undefined ? null : left) * this.right = (right === undefined ? null : right) * } *//** * @param {TreeNode} root * @return {boolean} */const isBalanced = function (root) { if (root === null) { return true; } else { return ( Math.abs(height(root.left) - height(root.right)) <= 1 && isBalanced(root.left) && isBalanced(root.right) ); }};
+const height = function (root) { if (root === null) { return 0; } else { return Math.max(height(root.left), height(root.right)) + 1; }};时间复杂度分析#
该方法最坏的情况是每个父节点都只有一个子节点，这样树的高度时间复杂度为 O(n)，即“链表”的长度。而第 d 层调用 height 函数的时间复杂度是 O(d)，所以整体的时间复杂度为高度时间复杂度 * 调用 height 函数的时间复杂度，即 O(n^2)。
空间复杂度分析#
该方法由于使用了递归，并且每次递归都调用了两次自身，导致会函数栈会按照等差数列开辟，所以该方法的空间复杂度应为 O(n^2)。
解法二#
思路#
上面的方法是自顶而上的，这样其实就会导致每层的高度都要重复计算。那么，我们可以使用后序遍历，这样每个节点的高度就能根据前面的结果算出来。
代码#
/** * Definition for a binary tree node. * function TreeNode(val, left, right) { * this.val = (val === undefined ? 0 : val) * this.left = (left === undefined ? null : left) * this.right = (right === undefined ? null : right) * } *//** * @param {TreeNode} root * @return {boolean} */var isBalanced = function (root) { return height(root) != -1;};
+var height = function (root) { if (root == null) { return 0; }
+ const left = height(root.left); const right = height(root.right);
+ if (left === -1 || right === -1 || Math.abs(left - right) > 1) { return -1; }
+ return Math.max(left, right) + 1;};时间复杂度分析#
由于是后序遍历，每个节点只会被调用 1 次，所以，该方法的时间复杂度是 O(n)。
空间复杂度分析#
该方法由于使用了递归，并且每次递归都调用了两次自身，导致会函数栈会按照等差数列开辟，所以该方法的空间复杂度应为 O(n^2)。
