九、元素隐藏的几种方法
(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标准
网友评论