2023.11.28面试题

1.  Canvas跨域问题 developer.mozilla.org/zh-CN/docs/… 如果外部源的内容是 HTML <img> 或 SVG <svg> 元素，会阻止从 canvas 中读取数据。 - 在 canvas 的上下文上调用 getImageData()会报错,提示跨域 可以将图片的 crossOrigin 属性设置为 "Anonymous"（即允许对未经过验证的图像进行跨源下载）

downloadedImg = new Image();
downloadedImg.crossOrigin = "Anonymous";

2.  移动端1px问题 自从 2010 年 iPhone4 推出了 Retina 屏开始，移动设备屏幕的像素密度越来越高，于是便有了 2 倍屏、3 倍屏的概念。简单来说，就是手机屏幕尺寸没有发生变化，但屏幕的分辨率却提高了一倍，即同样大小的屏幕上，像素多了一倍。

css像素 !== 设备物理像素 设备物理像素=css像素*window.divicePixelRatio 比如,window.divicePixelRatio=3(在iPhoneX上) 设置的CSS为1px,实际设备上用3个物理像素显示 juejin.cn/post/695973…

3.  一个div有四个子元素,怎么获取第三个

// 获取父div元素，你需要替换'parentDiv'为你的div元素的ID或类名
var parentDiv = document.getElementById('parentDiv'); 
// 获取所有的子div元素
var children = parentDiv.querySelectorAll('div');  
// 获取第三个子div元素
var thirdChild = children[2]; 

querySelector选择器,selector只要是一个有效的CSS选择器字符串就可以了 const thirdP = document.querySelector('#div1>div:nth-child(3)') css的话 用 子元素:nth-child(3)

4.  css3硬件加速

5.  git merge和git base 区别1:rebase把当前的commit放到公共分支的最后面,merge把当前的公共分支合并在一起 区别2:rebase解决完冲突不会产生新的分支,干净 merge解决完冲突会产生一个commit,也就是解决冲突的commit

6.  flex让元素垂直,水平都居中 在父元素中设置 justify-content:center align-items:center

7.  fetch怎么加个中间件拦截 Fetch()方法,提供了异步获取资源的方法

fetch和Ajax的区别:

1.fetch即使获得错误状态码,也会resolve 只有在网络故障或请求被阻止时,才会reject 2.fetch不会发送跨域cookie,除非你使用了 credentials 的初始化选项 3.fetch使用promise,不使用回调函数

const data={userName:'example'}

fetch('http://example.com/movie.json',{
    methods:'post',
    headers:{
        'Content-Type':'application/json'
    },
    body:JSON.stringfy(data)
})
    // 提供了json方法来转换成json格式
    .then(response=>{
        // 可以抛出自定义错误
        if(!response.ok){
            throw new Error('error')
        }
        return response.json()
    })
    .then(data=>{
        console.log(data)
    })
    .catch(e=>{
        console.error(e)
    })

feach请求参数完整api
const response = fetch(url, {
  method: "GET",
  headers: {
    "Content-Type": "text/plain;charset=UTF-8"
  },
  body: undefined,
  referrer: "about:client",
  referrerPolicy: "no-referrer-when-downgrade",
  mode: "cors", 
  credentials: "same-origin",
  cache: "default",
  redirect: "follow",
  integrity: "",
  keepalive: false,
  signal: undefined
});

8.  Egg中间件是怎么实现的

9.  typescript interface和type有什么区别 interface只能描述对象结构,type可以是任何类型组合

11. useRef是干什么的 获取DOM元素的引用, 13.  this.$router和this.$route的区别