《探秘前端：页面精修、函数巧用与性能护航》

小藤神
316 阅读7分钟

说明：“页面精修” 对应页面优化里 HTML5 标签改善页面结构、利于搜索引擎抓取等；“函数巧用” 指利用闭包解决复杂场景编程，发挥其独特优势；“性能护航” 恰如其分地描述防抖和节流对于页面交互性能的保障作用，防止因过多重复触发事件拖垮性能，而存储拓展知识也是从侧面为优化性能、合理管理数据做支撑。

一、页面雕琢：构建搜索引擎友好的前端基石

SEO.webp

1.HTML5 的语义化标签：开启精准语义表达，赋能 SEO 新篇

HTML5 相较于之前的 HTML 版本引入了新的语义化元素，如 <article>、<section>、<nav>、<header> 和 <footer> 等。这些标签有助于创建结构更清晰的文档，并且对于搜索引擎优化（SEO）和辅助技术更为友好。

语义化标签.png

2.a 标签与 h1 标签协同：锚定链接与标题层级的格式规范密码

image.png 整个页面只有一个h1标签，内容就是“京东”

image.png 搜索引擎爬虫不能像人类一样 “看到” 图像的内容。alt属性为搜索引擎提供了关于图像主题或功能的文本描述

小Tips：
<a href="/">相对路径在一定程度上有助于搜索引擎更快地识别和理解网站的内部结构，搜索引擎可以更方便地抓取和索引网站内部的其他页面
<a href="绝对路径">有助于搜索引擎更准确地识别和收录页面，如果网站存在多个子域名，确保搜索引擎将权重准确地分配到主域名上

3. 页面优化的多元拓展：解锁更多助力搜索引擎青睐的隐藏细节

baijiahao.baidu.com/s?id=173687…

二、场景攻坚：闭包铸就代码 “瑞士军刀”

1. 闭包本质揭秘：掌握函数嵌套中变量持久化的神奇纽带

  • 一句话：内部函数调用外部函数变量并且这个内部函数在外部函数执行完毕后仍然可以被访问就是闭包

2. 闭包实战赋能：剖析其重塑代码逻辑、优化性能的关键力量

  • 1.闭包可以将一些变量 “隐藏” 在内部函数中，外部无法直接访问这些变量，从而实现数据的封装。
  • 2.闭包能够在多次调用之间保持和更新状态。

比如实现一个简单的购物车功能。

function createShoppingCart() { 
    let cart = []; 
    return function(item) { 
        if (item) { 
            cart.push(item); 
        } 
        return cart; 
    }; 
} 
const addToCart = createShoppingCart(); 
addToCart('apple'); 
addToCart('banana'); 
console.log(addToCart()); // ["apple", "banana"]
  • 这里cart变量的状态（购物车中的商品列表）通过闭包得以保存，每次调用addToCart函数添加商品后，cart的状态都会更新，并且这个状态可以被后续的调用获取。

3. 闭包多元场景秀：柯里化与嵌套事件绑定背后的闭包魅影

  • 闭包是函数柯里化的重要工具。函数柯里化是指将一个多参数的函数转换为一系列单参数函数的过程。

image.png

当box1被点击时，会给box2添加一个click事件监听器，这个监听器执行的函数是fn。
因为fn函数是全局作用域中定义的，并且只会被添加一次到box2的事件监听器列表中。
无论box1被点击多少次，每次点击box1都会检查box2是否已经有fn这个事件监听器，如果有，就不会重复添加

image.png

当在box1的点击事件处理程序中创建匿名函数并添加到box2的事件监听器时，这个匿名函数会形成一个闭包。
由于每次创建的匿名函数都是独立的，它们共享外部作用域中的num变量。所以当box2被点击时，所有这些闭包中的匿名函数都会按照它们被添加的顺序依次执行，每个匿名函数都会对num进行加 1 操作

  • 场景：应用闭包，给盒子1添加点击事件：打印外部变量；给盒子2添加点击事件：移除盒子1（和自身的）点击事件（留个好玩的）
        function fn(num){
           return function put(){
                num++
                console.log(num);   
                console.log(1);
            }           
        }
        function move(i){
            return function n(){
                console.log(2);
                document.querySelector('.box1').removeEventListener('click',i)
            }
        }
        function run(){
            let num = 100
            let b1 = fn(num)
            document.querySelector('.box1').addEventListener('click',b1)

            // document.querySelector('.box2').addEventListener('click',function(){
            //     document.querySelector('.box1').removeEventListener('click',b1)
            //     document.querySelector('.box2').removeEventListener('click',b2)
            // })
            let b2 = move(b1)
            document.querySelector('.box2').addEventListener('click',b2)
        }
        run()

4. 闭包拓展挑战：融合递归，征服数组求和、斐波那契数列难题

  • 一句话：一个函数直接或间接地调用自身来解决问题就是递归
//要求:不用reduce等方法，不用循环遍历等方法求数组的和
function sum(arr) {
function fn(i) {
       return i >= arr.length ? 0 : arr[i] + fn(i + 1);
    }
    return fn(0)
}
console.log(sum([1,2,3]));  
//1+fn(1),2+fn(2),3+fn(3)
  • 举一反三：轻松写出斐波那契数列
        //1,1,2,3,5,8,13
        function input(count){
            function fn(i){
                return i === 1 || i === 2?1:fn(i-1)+fn(i-2)
            }
            return fn(count)
        }
        console.log(input(6));
        //input(5)   fn(5)  fn(4)+fn(3)   fn(3)+fn(2)+fn(2)+fn(1)    fn(2)+fn(1)+fn(2)+fn(2)+fn(1)
        //依次排列
        let list = []
        function arr(num){
            for(let i=1 ; i<=num ; i++){
                list.push(input(i))
            }
            console.log(list); 
        }
        arr(10)

image.png

三、交互护航：防抖节流 + 存储优化，打磨流畅体验

1. 防抖节流精要：直击优化频繁触发事件的核心效能

  • 一句话：在定时器回调函数执行之前触发input事件监听关闭定时器（防抖）
  • 一句话：在定时器关闭前储存当前信息（节流）

2. 防抖实战拆解：以 input 事件为战场，驯服定时器的奇妙战术

  • 场景：搜索框根据用户的输入关键字请求服务器数据渲染界面，要求防抖
//核心代码
let timerid
document.querySelector('.search-city').addEventListener('input',function(e){
    // console.log(e.target.value);
    clearTimeout(timerid)
    timerid =  setTimeout(() => {
        renderCityList(e.target.value) 
    }, 500)
})

3. 节流独家攻略：突破 video 播放场景，厘清点击事件绑定的迷障

  • 场景：要求节流，用户重新进入网站时，默认在上次观看的视频结束的位置播放
  • 要求不用lodash库里面的throttle方法
<body>
    <video controls id="myVideo" src="video.mp4"></video>
    <script>
        const video = document.getElementById('myVideo');
        let timer = null;
        video.ontimeupdate = ()=>{
            if (!timer) {
                localStorage.setItem('currentTime', video.currentTime);
                timer = setTimeout(() => {
                    timer = null;
                }, 1000);
            }
        };
        video.onloadeddata = ()=>{
            video.currentTime = localStorage.getItem('currentTime')
        }
    </script>
</body>

拓展：onclick和addEventlistener('click',()=>{})区别，前者设置多次同事件类型监听，事件处理函数会覆盖前面的同类型监听事件

4. 存储拓展视界：会话存储与本地存储的差异化探索之旅

类似上面的节流需要存储数据的处理还有很多种：

image.png

  • ①Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，通常包含用户标识、用户偏好设置、购物车数据等信息。浏览器每次向服务器发送请求时，会自动带上与该服务器相关的 Cookie 信息。Cookie 是基于 HTTP 协议的，其大小一般限制在 4KB 左右
  • ②Local Storage（本地存储）是 HTML5 提供的一种在浏览器中存储数据的方式，它允许在没有过期时间的数据存储。数据以键值对（key - value）的形式存储，存储容量一般在 5MB - 10MB 左右，具体大小因浏览器而异。这些数据仅保存在客户端浏览器本地，不会随着 HTTP 请求自动发送给服务器
  • ③Session Storage（会话存储）和 Local Storage 类似，也是 HTML5 新增的存储机制，以键值对形式存储数据。但是，Session Storage 的数据只在当前浏览器会话期间有效。一旦浏览器窗口或者标签页关闭，存储的数据就会被清除。它的存储容量也因浏览器而异，大致和 Local Storage 相当
  • ④IndexedDB 是一种底层的、功能强大的浏览器数据库，用于存储大量的结构化数据。它是一个非关系型数据库，采用对象仓库（Object Store）来存储数据，支持事务操作、索引创建等功能。数据存储容量比 Local Storage 和 Session Storage 大得多，具体大小取决于浏览器和磁盘空间。

小Tips：sessionstorage是会话储存，只限本窗口，在相同的浏览器输入相同的标签页也不会共享数据，储存的数据是独立的，所以它的生命周期就是会话的生命周期

life.gif

avatar
文章
阅读
粉丝