面试题（不定期更新）

奥D

已于 2022-02-23 19:56:01 修改

阅读量122

点赞数

分类专栏： vue 文章标签： javascript 前端 html

于 2022-02-23 19:24:45 首次发布

本文链接：https://blog.csdn.net/iloadj/article/details/123097302

版权

vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

说几条写JavaScript的基本规范

不要在同一行声明多个变量

请使用===/!==来比较true/false或者数值

使用对象字面量替代new Array这种形式

不要使用全局函数

Switch语句必须带有default分支

If语句必须使用大括号

for-in循环中的变量应该使用var关键字明确限定作用域，从而避免作用域污染

请描述一下cookies，sessionStorage和localStorage的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）

cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

存储大小：cookie数据大小不能超过4ksessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

有期时间：localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据sessionStorage 数据在当前浏览器窗口关闭后自动删除cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

dns缓存，cdn缓存，浏览器缓存，服务器缓存

什么是外边距重叠？重叠的结果是什么？

外边距重叠就是margin-collapse

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

两个外边距一正一负时，折叠结果是两者的相加的和。

知道css有个content属性吗？有什么作用？有什么应用？

css的content属性专门应用在 before/after伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。

/一种常见利用伪类清除浮动的代码/
.clearfix:after {
content:"."; //这里利用到了content属性
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix {
*zoom:1;
}

垂直居中的方法

将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle

使用flex布局，设置为align-item：center

绝对定位中设置bottom:0,top:0,并设置margin:auto

绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值

文本垂直居中设置line-height为height值

如何实现小于12px的字体效果

transform:scale()这个属性只可以缩放可以定义宽高的元素，而行内元素是没有宽高的，我们可以加上一个display:inline-block;

transform: scale(0.7);

如何渲染几万条数据并不卡住界面

这道题考察了如何在不卡住页面的情况下渲染数据，也就是说不能一次性将几万条都渲染出来，而应该一次渲染部分 DOM，那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次

setTimeout(() => {
      // 插入十万条数据
      const total = 100000
      // 一次插入 20 条，如果觉得性能不好就减少
      const once = 20
      // 渲染数据总共需要几次
      const loopCount = total / once
      let countOfRender = 0
      let ul = document.querySelector("ul");
      function add() {
        // 优化性能，插入不会造成回流
        const fragment = document.createDocumentFragment();
        for (let i = 0; i < once; i++) {
          const li = document.createElement("li");
          li.innerText = Math.floor(Math.random() * total);
          fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        countOfRender += 1;
        loop();
      }
      function loop() {
        if (countOfRender < loopCount) {
          window.requestAnimationFrame(add);
        }
      }
      loop();
    }, 0);

微信小程序怎样跟事件传值

给 HTML 元素添加 data-*属性来传递我们需要的值，然后通过 e.currentTarget.dataset 或onload的param参数获取。但 data - 名称不能有大写字母和不可以存放对象

DOM操作的常用API有哪些？

创建新节点

createDocumentFragment()    //创建一个DOM片段
createElement()   //创建一个具体的元素
createTextNode()   //创建一个文本节点


添加、移除、替换、插入

appendChild()      //添加
removeChild()      //移除
replaceChild()      //替换
insertBefore()      //插入


查找

getElementsByTagName()    //通过标签名称
getElementsByName()     //通过元素的Name属性的值
getElementById()        //通过元素Id，唯一性