2018前端面试题(二)

2018-05-06  本文已影响0人  菲菲菲菲妞

 九、元素隐藏的几种方法

(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(){  

varn=[];  

for(vari=0;i

           if(n.indexOf(arr[i])==-1){  

               n.push(arr[i]);  

           }  

       }  

       return n;  

   }//先定义一个空数组,然后遍历数组,使用indexOf检查是否含有重复元素,如果没有则插入到n中。使用此类方法应考虑ES5的兼容性问题  

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

function arr3(){  

         arr.sort();  

varre=[arr[0]];  

for(vari=1;i

            if(arr[i]!==re[re.length-1]){  

                re.push(arr[i]);  

            }  

        }  

        return re;  

    }  

        第三种方法:使用map去重

function arr4(arr){  

varmap={};  

        if(arr&&Array.isArray(arr)){  

for(vari=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) {   

varmyObj = { };   

  }  

        第二种方法:window是JavaScript的顶层对象,所有全局变量都是它的属性;

if (!window.myObj) {   

varmyObj = { };   

}   

        第三种方法:在某些环境中(如V8、Rhino),window未必是顶层对象,可以改为下面写法:

if (!this.myObj) {   

this.myObj = { };   

  }  

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

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

var global = this;   

  if (!global.myObj) {   

global.myObj = { };   

  }  

        第五种方法:通过typeof运算符,判断myObject是否有意义(仅判断对象是否存在,推荐使用):

if (typeof myObj == "undefined") {   

varmyObj = { };   

  }  

        第六种方法:使用运算符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定义关键词、网站描述等;

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

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

(5)内联使用绝对路径,减少服务器响应时间

(6)导航栏的层级不宜过多

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

(8)语义化书写HTML代码,符合W3C标准

上一篇下一篇

猜你喜欢

热点阅读