2018前端面试题（二）

九、元素隐藏的几种方法

（1)opacity: 0 ;

通过改变元素的透明度，从视觉上来隐藏元素，但是元素本身依然占据它自己的位置，并对网页的布局起作用，也能相应用户的交互；

（2）visibility: hidden ;

同opacity相同，元素本身依然占据它自己的位置，并对网页的布局起作用，不同的是不会对交互起作用。

（3）display: none ;

被隐藏的元素不占任何空间，一旦display设置成none，任何对该元素的交互作用都不起作用，且读屏软件读不到该元素的内容，这种方式产生的效果就好像元素完全不存在，它的任何状态值的切换总是立即生效。

通过DOM依然可以访问到该元素，通过DOM可以直接操作它。

（4）position

将元素移除可视区域，

position:absolute;
left:-9999px;
top:-9999px;

(5)clip-path：通过裁剪的方法隐藏元素

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

十、数组去重的方法

第一种方法：使用es5中的indexOf进行去重

 function arr1(){
       var n=[];
        for(var i=0;i<arr.length;i++){
            if(n.indexOf(arr[i])==-1){
                n.push(arr[i]);
            }
        }
        return n;
    }//先定义一个空数组，然后遍历数组，使用indexOf检查是否含有重复元素，如果没有则插入到n中。使用此类方法应考虑ES5的兼容性问题

第二种方法：先排序后在相邻比较去重，此方法比第一种方法效率好

function arr3(){
         arr.sort();
        var re=[arr[0]];
        for(var i=1;i<arr.length;i++){
            if(arr[i]!==re[re.length-1]){
                re.push(arr[i]);

            }
        }
        return re;
    }

第三种方法：使用map去重

function arr4(arr){
        var map={};
        if(arr&&Array.isArray(arr)){
            for(var i=arr.length;i>=0;--i){
                if(arr[i] in map){
                    arr.splice(arr[i],1);
                }else{
                    map[arr[i]] = true;
                }
            }
        }
        return arr;

    }

十一、判断对象是否存在的方法

第一种方法：JavaScript语言是先解析后运行，在解析过程中完成变量提升，然后做判断（除了对象是否存在，还要判断对象是否为null值时，推荐使用该方法）：

if (!myObj) { 
　　　　var myObj = { }; 
　　}

第二种方法：window是JavaScript的顶层对象，所有全局变量都是它的属性；

if (!window.myObj) { 
    　var myObj = { }; 
}

第三种方法：在某些环境中（如V8、Rhino），window未必是顶层对象，可以改为下面写法：

if (!this.myObj) { 
　　　　this.myObj = { }; 
　　}

this关键词总是指向顶层变量，所以就可以独立不同的运行环境。

第四种方法：this的指向是可变的，进而可以改为：

var global = this; 
　　if (!global.myObj) { 
　　　　global.myObj = { }; 
　　}

第五种方法：通过typeof运算符，判断myObject是否有意义（仅判断对象是否存在，推荐使用）：

if (typeof myObj == "undefined") { 
　　　　var myObj = { }; 
　　}

第六种方法：使用运算符in判断myObject是否为顶层对象的一个属性：

if (!('myObj' in window)) { 
　　　　window.myObj = { }; 
　　}

第七种方法：使用hasOwnProperty，判断myObject是否为顶层对象:

if (!this.hasOwnProperty('myObj')) { 
　　　　this.myObj = { }; 
　　}

十二、超链接样式被点击后样式不起作用，如何解决？

定义css的顺序：link-visited -hover-active

十三、前端应该从那几个方面来优化网站

（1）减少外部http请求

（2)压缩css、js和html

(3)使用cdn和缓存提高速度

（4）压缩文件

（5）使用css Sprites

（6）使用轻量级框架

(7)使用懒加载或预加载

（8）减少DOM操作

十四、前端如何实现SEO优化

（1）利用meta定义关键词、网站描述等；

（2）前景图片<img >添加alt属性

（3)前景图片要定义大小，不然会造成页面重新渲染，影响加载速度

（4）适当的给a标签添加rel = "noflow"属性

（5）内联使用绝对路径，减少服务器响应时间

（6）导航栏的层级不宜过多

（7)使用Svg，因为svg的源文件是一个文本文件，有利于访问

（8）语义化书写HTML代码，符合W3C标准

2018前端面试题（二）

猜你喜欢