前端学习文档

# JavaScript

# 前端常见的性能优化有哪些?

# 页面内容优化

  1. 图片尽量使用雪碧图,通过position定位来放置图片 / 或者尽量使用icon图标
  2. 图片尽量使用懒加载,缓解服务器请求压力
  3. html / css / js 代码压缩
  4. 静态资源 CDN 部署
  5. 减少http请求次数
  6. 减少DOM操作

# css优化

  1. 将样式表置顶将 （CSS放在 HEAD中，防止浏览器有可能还未下载和解析到 CSS就已经开始渲染页面）
  2. 避免css表达式
  3. link代替@import
  4. 避免使用filters
  5. css文件合并与压缩

# js代码优化

  1. 将脚本置底（将脚本内容在页面信息内容加载后再加载）
  2. 使用外部javascript和css文件
  3. 去除重复脚本，避免重复的资源请求
  4. 减少DOM访问（修改和访问DOM元素会造成页面的重绘和重排，循环对DOM操作更是减慢页面加载速度）
  5. js文件合并与压缩

# 如何理解防抖与节流

# 函数防抖

就是：延迟要执行的操作,若在延迟的这段时间内,再次触发,则取消之前开启的动作,重新计算

例子：手机没有操作后30s息屏, 当在25s的时候使用了一下,则重新开始计算30s后息屏

主要应用：搜索时等用户完整输入内容之后再发送ajax查询请求

let input = document.querySelector("#user_input");
let timer;
input.addEventListener("keyup",(e) => {
    let val = input.value;
    clearTimeout(timer);
    timer = setTimeout(() => {
        mockAjax(val);
    },1500)
});

function mockAjax(val) {
    console.log("send------",val);
}

# 函数节流

设定一个特定的时间,让函数在特定的时间内只执行一次,不会频繁执行

举例：fps游戏，鼠标按住不松手，子弹也不会连成一条线

主要应用：在鼠标滚轮滚动的时候，每隔2s，打印一次

let body = document.getElementsByTagName("body")[0];
let flag = true;

body.onscroll = () => {
    if(flag) {
        console.log(111);
        flag = false;
        setTimeout(() => {
            flag = true;
        },2000)
    }          
};

# 如何理解原型和原型链

← Vue →