JS前端同源策略、跨域解决方案及防抖节流详解

作者：霁月时间：2026-10-25 19:50:08浏览：627

本文深入解析JavaScript前端开发中的核心安全机制与性能优化技术。首先阐述同源策略的定义及其对跨域交互的限制，随后详细对比分析JSONP与CORS两种主流跨域解决方案的原理、适用场景及兼容性差异，重点讲解jQuery中JSONP的实现机制。接着，文章深入探讨高频事件处理中的防抖与节流策略，通过具体代码示例说明其在减少请求频率、优化资源消耗方面的应用，并清晰界定两者的区别与适用场景。

引言

当协议、域名和端口三者完全一致时，即可判定为具有相同的源。

同源策略是浏览器内置的一项核心安全机制，旨在限制不同源之间的资源访问。

跨域问题的产生根源在于浏览器的同源策略，该策略禁止非同源URL之间进行直接的资源交互。

目前解决跨域问题主要采用两种技术方案：JSONP和CORS。

JSONP技术仅支持GET类型的HTTP请求。

其实现原理是利用script标签的src属性发起跨域数据接口请求，并通过预先定义的函数调用形式来接收并处理跨域接口返回的数据。

CORS（跨域资源共享）是较晚出现的W3C标准，被视为解决跨域Ajax请求的根本方案。它同时支持GET和POST请求，但在低版本浏览器中存在兼容性问题。

jQuery中JSONP的实现机制

jQuery实现JSONP跨域数据访问时，采用动态创建和移除script标签的方式发起请求，而非直接依赖HTML中的静态script标签。

在发起JSONP请求时，jQuery会动态地向HTML的head元素中追加一个新的script标签。

当JSONP请求成功获取数据后，jQuery会动态从head中移除之前追加的那个script标签，以保持DOM结构的整洁。

$(function () {
      $.ajax({
        url: "http://www.liulongbin.top:3006/api/jsonp?name='zs'&age=12",
        dataType: 'jsonp',
        // 发送到服务器的参数名称，默认值为callback
        jsonp: 'callback',
        // 自定义回调函数名称 默认值为jQueryxxxx
        jsonpCallback: 'abc',
        success(res) {
          console.log(res)
        },
      })
    })

防抖【重要】

防抖策略的核心逻辑是：当事件被触发后，延迟n秒再执行回调函数；若在这n秒内事件再次被触发，则重新计时，之前的延迟操作将被取消。

应用场景：

在用户于输入框中连续输入字符串的场景下，利用防抖策略可以确保仅在用户停止输入后才执行查询请求，从而有效减少请求次数并节约服务器资源。

var timer = null   //1-1防抖的timer
$('#ipt').on('keyup', function () {
      // 1-3 清除timer
      clearTimeout(timer)
      
      //省略其他代码....
      // 1-2定义防抖
      // 获取搜索列表
      timer = setTimeout(function () {
        getSuggestList(keywords)
      }, 800)
    })

缓存搜索的列表

1 定义全局缓存对象

var cacheObj= {}

2:将搜索结果存储到缓存对象中

 // 渲染UI结构
    function renderSUggestList(res) {
      // 如果没有数据需要渲染 直接return
      if (res.result.length <= 0) {
        return $('.suggest-list').empty().hide()
      }
      var rows = []
      // console.log(res.result)
      $.each(res.result, function (i, item) {
        // console.log(item[0])
        rows.push(`
            <div class="suggest-item">${item[0]}</div>
            `)
      })
      $('.suggest-list').empty().append(rows.join('')).show()
      // 1获取用户输入的内容 当做键
      var k = $('#ipt').val().trim()
      // 将数据作为值 进行缓存
      cacheObj[k] = res
      // console.log(cacheObj)
    }

3优先从缓存中获取搜索列表

  $('#ipt').on('keyup', function () {
      // 1-3 清除timer
      clearTimeout(timer)
      // 1获取用户输入的内容
      var keywords = $(this).val().trim()
      // 2 判断用户输入的内容是否为空
      // 清空搜索列表
      if (keywords.length <= 0) {
        return $('.suggest-list').empty().hide()
      }
      // console.log(keywords)
      //  先判断缓存中是否有数据
       if (cacheObj[keywords]) {
        return renderSUggestList(cacheObj[keywords])
      }
      // 1-2定义防抖
      // 获取搜索列表
      timer = setTimeout(function () {
        getSuggestList(keywords)
      }, 800)
    })

节流【重点】

节流策略旨在降低单位时间内事件被触发的频率，从而控制执行次数。

场景：

当鼠标连续不断触发某事件（如点击或移动）时，节流策略确保在单位时间内仅触发一次执行。

在实现懒加载监听滚动条位置时，无需每次滑动都触发计算，降低计算频率可有效避免CPU资源的浪费。

当节流阀为空时，允许执行下一次操作；若节流阀不为空，则禁止执行后续操作。

当前操作执行完毕后，必须将节流阀重置为空状态，以表示允许执行下一次操作。

每次准备执行操作前，需先判断节流阀是否为空。

$(function () {
      // 获取图片
      var angel = $('#angel')
      // 定义一个timer节流阀
      var timer = null
      $(document).on('mousemove', function (e) {
        //每次执行操作前，先判断节流阀是否为空  不为空 不能执行（证明距离上次执行不足16毫秒）
        if (timer) {
          return
        }
        timer = setTimeout(function () {
          console.log(e.pageX, e.pageY)
          angel.css('top', e.pageY + 'px').css('left', e.pageX + 'px')
          timer = null //设置了鼠标跟随效果后，清空节流阀 方便下次开启定时器
        }, 160)
      })
    })