Javascript知识点总结（3）

Ric
67 阅读2分钟

  1. 浏览器输入url到页面呈现的过程

  • 资源加载
    1）DNS解析：将域名解析为ip地址
    2）浏览器通过ip地址向服务器发送http请求
    3）服务器响应数据
  • 页面渲染
    1）将html文件解析为DOM tree
    2）将css文件解析为CSSDOM
    3）将DOM tree和CSSDOM合并形成名为Render tree的渲染树
    4）若遇到js代码，会执行js代码，完成后继续渲染Render tree

  1. window.onload和DOMContentLoaded的区别

时间含义
window.onload页面全部资源加载完毕才执行，包括图片视频等媒体文件
DOMContentLoadedDOM渲染完成即可执行，此时图片等媒体文件可能还未加载完成

  1. 前端性能优化

原则：尽量使用缓存、内存，减少CPU计算，减少网络加载耗时（空间换时间）

  • 减小资源体积：压缩代码
  • 减少访问次数：合并代码，服务端渲染SSR，缓存
  • 使用更快的网络：CDN
  • css放在head中，js放在最底部
  • js执行尽早，在DOMContentLoaded中执行
  • 懒加载（图片懒加载，上划加载）
  • 对DOM查询进行缓存
  • 频繁操作DOM，合并到一起插入DOM结构中
  • 防抖debounce 节流throttle

  1. 手写防抖debounce和节流throttle

防抖的应用场景：

　　1. 搜索框实时搜索：在搜索框中输入关键词时，防抖可以延迟请求发送，只在用户输入完成或者停顿一段时间后才触发实际的搜索请求，避免频繁的网络请求。

　　2. 窗口大小调整：当用户调整浏览器窗口大小时，窗口大小变化事件会连续触发，使用防抖可以确保只在用户完成调整后再执行相应的响应逻辑，以避免过多的布局计算。

节流的应用场景：

　　1. 页面滚动加载：在无限滚动的页面中，滚动事件会频繁触发，使用节流可以控制数据加载的频率，防止短时间内多次加载数据，提高页面加载性能。

　　2. 按钮防重复点击：当用户点击按钮执行某个操作时，使用节流可以确保按钮在一定时间内只能触发一次，防止用户重复点击造成误操作。

//防抖
function debounce(fn,delay){
    let timer=null
    return function(){
        if(timer){
            clearTimeout(timer)
        }
        timer=setTimeout(() => {
            fn.apply(this,arguments)
            timer=null
        }, delay);
    } 
}

//节流
function throttle(fn,delay){
    let timer=null
    return function(){
        if(timer){
            return
        }
        timer=setTimeout(() => {
            fn.apply(this.arguments)
            timer=null
        }, delay);
    }
}

  1. 前端XSS攻击与XSRF攻击

含义措施
XSS跨站脚本攻击,用户输入插入script脚本对用户输入的特殊字符进行转义
XSRF跨站请求伪造，通过隐藏的图片链接伪造请求使用post请求,增加验证
avatar
文章
阅读
粉丝