前端面试题小结

paodan
105 阅读3分钟

1、position有哪些值？分别有什么作用？

2、分析比较opacity:0、visibility:hidden、display:none
opacity:0和visibility:hidden,元素虽然隐藏了，但是它们仍然占据空间,它俩只会引起重绘不会引起回流。 display:none,元素隐藏了也不占据空间,会引起回流和重绘。
(回流:浏览器重新渲染部分或全部文档的过程)
(当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。)

3、常见的meta标签有哪些？作用分别是什么？
meta标签有两个属性,name和http-equiv

<meta name="description" content="描述xxx"> 告诉引擎，当前页面的描述  
<meta name="keywords" content="关键字xxx"> 告诉引擎，当前页面的关键字  
<meta name="author" content="作者xxx"> 告诉引擎，当前页面的作者  
<meta http-equiv="expires" content="时间"> 告诉引擎，当前页面的过期时间
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
告诉引擎使用edge或者chrome渲染
<meta http-equiv="content-type"  content="text/html" charset="utf8"> 
声明文档类型,设置字符集

4、Cache-control的常用取值有哪些？作用分别是什么？
Cache-control的常用取值：
public:允许在客户端和服务端进行缓存
private:默认值,允许在客户端进行缓存
no-cache：客户端缓存内容，但是否缓存内容需要经常缓存协商来决定
no-store：所有内容都不会被缓存
max-age="xxx" 缓存失效时间

5、http304在什么情况下会出现？
当浏览器发起请求验证资源时,如果资源没有改变，则返回304状态码

6、前端怎么预防跨站脚本攻击（Cross-Site-Scripting）？
1、不要信任任何用户输入，对输入特殊字符的长度、类型做过滤处理，设置输入白名单
2、对输出的数据做转义处理
3、给cookie设置httponly属性，避免攻击者通过document.cookie盗取用户的cookie

7、有父元素P,宽高固定为800800,子元素A、B、C,宽高固定为100100,欲使这三个子元素“水平垂直居中”、“纵向”、“倒叙”排列，如何设置css？

   .P{
       width:800px;
       height:800px;
       display:flex;
       flex-direction:column-reverse;
       align-items:center;
       justify-content:center;
    }
    .A,.B,.C{
        width:100px;
        height:100px;
    }

8、父元素div A中包含子元素div B,给A、B绑定点击事件,点击一下B,事件的触发顺序是怎样的？如何让事件的触发顺序反过来？

 var A = document.getElementById("A");  
 var B = document.getElementById("B");
 A.addEventListener('click',function(){
     alert("触发了父元素")
 },true)// true表示事件在捕获阶段触发
 B.addEventListener('click',function(){
     alert("触发了子元素")
  })

9、构造函数可以使用new生成实例，name箭头函数可以吗？为什么？
不可以，因为箭头函数没有自己的this,箭头函数的this都是从属于上下文,也没有constructor方法和prototype

10、已知如下数组 var arr = [[1,2,2],[3,4,5,5],[6,7,8,9,[11,12,[12,13,[14]]]],10],编写一个程序将数组扁平化并去重,最终得到一个升序且不重复的数组

    var arr1 = arr.toString().map(Number).sort(function(a,b){
        return a-b;
    });
    var res = Array.from(new Set(arr1));

11、如何解决js运算不精确,存在0.1+0.2=0.30000000000000004的问题？
这种问题出现的原因是计算机二进制转十进制不精确导致的
解决方法：
parserFloat((0.1+0.2).toFixed(10))

13、为什么mutation中不能操作异步？
mutation中操作异步会导致程序很难调试,mutation中操作同步也是为了用devtools追踪状态变化

参考链接:
meta标签到底是做什么的
浏览器的回流与重绘

avatar
文章
阅读
粉丝