美文网首页
2018前端面试题(二)

2018前端面试题(二)

作者: 菲菲菲菲妞 | 来源:发表于2018-05-06 22:34 被阅读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标准

    相关文章

      网友评论

          本文标题:2018前端面试题(二)

          本文链接:https://www.haomeiwen.com/subject/rcsprftx.html