WEB前端笔试题(2)——狼厂

1.CSS属性position的属性值有哪些,描述他们的作用

描述
absolute
绝对定位,相对于static定位以外的第一个父级元素进行定位

元素的位置通过left right top bottom属性进行规定

fixed
绝对定位,相对于浏览器进行定位

元素的位置通过left right top bottom属性进行规定

relative 
相对定位,相对于其他正常位置(即不用relative时在正常流中的的位置)

默认值 
没有定位,元素出现在正常流中

忽略left right top bottom以及z-index

inherit  规定应该从父元素继承postion的属性值

2.程序定义如下:

 1 var myobject={
 2     foo:"bar",
 3     func:function(){
 4         var self=this;
 5         console.log("outer func:this.foo="+this.foo);
 6         console.log("outer func:self.foo="+self.foo);//
 7         (function(){
 8         console.log("outer func:this.foo="+this.foo);
 9         console.log("outer func:self.foo="+self.foo);
10       })()
11 }}
12 myobject.func();
13 /*打印结果
14 outer func:this.foo=bar
15 outer func:self.foo=bar
16 outer func:this.foo=undefined
17 outer func:self.foo=bar
18 */

在 JavaScript 中,上下文对象就是 this 指针,即被调用函数所处的环境。上下文对象 的作用是在一个函数内部引用调用它的对象本身。

12行调用时,代码运行到5、6行时,self和this的情况:

因此this.foo=bar;self.foo=bar

运行到匿名函数中时,即第8,9行

头疼的闭包!由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。

因此this.foo=undefined;self.foo=bar

同理换一种调用方法:

foo="test";
func=myobject.func();
func();
/*打印结果
outer func:this.foo=test
outer func:self.foo=test
outer func:this.foo=test
outer func:self.foo=test
*/

this和self都是window,但是因为定义了全局变量,因此都能找到.foo的值

3.随机生成颜色

function getRandomColor(){
    var colorch="#";
    for(var i=0;i<6;i++){
        var a=Math.random();
    var choose=[1,2,3,4,5,6,7,8,9,‘A‘,‘B‘,‘C‘,‘D‘,‘E‘,‘F‘]
    var num=Math.round(a * 15);
    colorch+=choose[num];
    }
    return colorch;
}

4.列举你所知道的行内元素、块元素、空元素

block element:

常见:<div><dl><ul><ol><form><h1>-<h6><fieldset> <table><p>

总是在新行上开始;此元素将显示为块级元素,此元素前后会带有换行符。 
height,width,padding,margin都有效; 
宽度缺省是它的容器的100%,除非设定一个宽度。

当设置为display:inline时转为行内元素

inline element:

<a><b><br><span><i><img><input><select><label><q><span><sub><sup><textarea>

和其他元素都在一行上;默认。此元素会被显示为内联元素,元素前后没有换行符。行内元素不会单独的占有一行,而是挨着显示的。 
width,height设置无效,水平方向的padding和margin有效,垂直上下的padding和margin无效。
如果需要设置高度,可以通过行高line-height撑起来。       
宽度就是它的文字或图片的宽度,不可改变。

当设置为display:block时转为块元素

void element

<br> <hr> <img> <input> <link> <meta>

<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

不可包含任何内容,直接闭合

5.CSS中link和@import的区别

页面中使用CSS的方式主要有3种:

内联CSS:行内添加定义style属性值

外链CSS:页面头部内嵌调用和外面链接调用,link和@import。

link:
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   
@import:
<style type="text/css" media="screen">   
@import url("CSS文件");   
</style>

两者都是外部引用CSS的方式,但是存在一定的区别:

  区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS(同样的如@font-face加载字体)。

  区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

  区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

  区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持。

6.以下代码输出结果:

var x=1,y=z=0;
function add(n){
    return n=n+1;
}
y=add(x);
function add(n){
    return n=n+3;
}
z=add(x)
//x=1,y=4,z=4

7.至少写5个前端优化的方法

1.减少HTTP请求和请求资源大小(合并图片,用如 YUI Compressor等工具瘦身JS和CSS文件,合并多个CSS文件,合并多个JS文件,图片多时用lazyLoad,压缩图片大小)

2.减少DOM操作(例如用innerHTML="<a href>link<a>"这种方式取代createElement等DOM操作)

3.使用CDN内容分布网络(例如jquery,用户在访问其他网站时可能从微软的CDN下载过Jquery文件放在缓存中,这样你的页面使用jquery不必再请求一次jquery文件)

4.用JSON代替XML来存储和交换数据

5.减少不合理嵌套(如table的td里套table,或者body ul li a这种)

6.减少Cookie(因为每次加载页面都会读本地Cookie)

7.使用HTML5本地缓存机制

8.先加载HTML页面结构,再进行表现层渲染,最后加载JS(CSS外链放头部,JS外链放尾部,因为请求JS会阻塞其他资源的下载请求)

8.实现数字千分位(如100,000)

function comdify(num){
    var ch=num.toString();
    var len=ch.length;
    if(len>3){
        for(var i=len-3;i>0;i-=3){
            ch=ch.substr(0,i)+","+ch.substr(i,len-1);
            len++;
        }
    }
    return ch;
}

解2:正则表达式乃我短板,真心不想看!

function comdify(n)
{
    var re=/\d{1,3}(?=(\d{3})+$)/g;
    var n1=n.replace(/^(\d+)((\.\d+)?)$/,function(s,s1,s2){return         s1.replace(re,"$&,")+s2;});
    return n1;
}

同时,实现input输入数字失去焦点时变成千分位,获得焦点时变为数字:

var input_box=document.getElementById("input_box");
input_box.onblur=function(){
    this.value=this.value.replace(/\d+?(?=(?:\d{3})+$)/g,function(s){return s+‘,‘});
}
input_box.onfocus=function(){
    this.value=this.value.replace(/,/g,‘‘);
}

9.域名劫持

域名劫持是互联网攻击的一种方式,通过攻击域名解析服务器(DNS),或伪造域名解析服务器(DNS)的方法,把目标网站域名解析到错误的地址从而实现用户无法访问目标网站的目的。

域名解析(DNS)的基本原理是把网络地址(域名,以一个字符串的形式)对应到真实的计算机能够识别的网络地址(IP地址,比如216.239.53.99 这样的形式),以便计算机能够进一步通信,传递网址和内容等。

由于域名劫持往往只能在特定的被劫持的网络范围内进行,所以在此范围外的域名服务器(DNS)能够返回正常的IP地址,高级用户可以在网络设置把DNS指向这些正常的域名服务器以实现对网址的正常访问。所以域名劫持通常相伴的措施——封锁正常DNS的IP。

如果知道该域名的真实IP地址,则可以直接用此IP代替域名后进行访问。比如访问谷歌 ,可以把访问改为http://216.239.53.99/ ,从而绕开域名劫持。

具体可询度娘百科:http://baike.baidu.com/view/420825.htm?fr=aladdin

时间: 2024-11-07 22:15:29

WEB前端笔试题(2)——狼厂的相关文章

也许你需要点实用的-Web前端笔试题

之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w3c的理解与认识. 标签闭合,标签小写,不乱嵌套:提高搜索机器人的搜索几率: 使用外联的css和js,结构行为表现的分离:文件下载与页面加载速度更快,内容能被更广泛的设备所访问: 更少的代码和组件:容易维护,改版方便,不需要变动页面内容,提供打印版本而不需要复制内容,提高网站的易用性. 2.Xhtm

便利蜂2019秋季web前端笔试题v2.6

便利蜂2019秋季(11月)web前端笔试题前端技能试题v2.6 一.单选题(总共8分,每题2分)1.以下不属于HTTP缓存控制协议头是( )A. Cache-Control    B. Content-Type   C.Etag   D.Vary考点:web缓存只http技术答案:B分析:已经系统了解了web缓存策略,总结了笔记,可以点此查看.Content-Type是响应头告诉浏览器返回的资源的MIME类型. 2.cookie特性下列说法正确的是( )A. cookie没有长度限制,可以无限

2015腾讯web前端笔试题

  1 请实现,鼠标点击页面中的任意标签,alert该标签的名称.(注意兼容性) 2 请指出一下代码的性能问题,并经行优化. var info="腾讯拍拍网(www.paipai.com)是腾讯旗下知名电子商务网站."; info +="拍拍网于2005年9月12日上线发布,"; info +="2006年3月13日宣布正式运营,"; info +="是目前国内第二大电子商务平台."; info=info.split(&quo

web前端笔试题(转)

以下为Web前端开发笔试题集锦之Javascript篇,移步HTML/CSS篇 1, 判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母.数字.下划线,总长度为5-20 var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/; reg.test("a1a__a1a__a1a__a1a__"); 2,截取字符串abcdefg的efg var str = "abcdefg"; if (/efg/.test(str)) { var ef

跪在某度秋招Web前端笔试题下

今晚跑去华工参加百度Web前端的笔试,做完之后交卷,本来感觉是“为之四顾,为之踌躇满志”的.其中一道题目是关于数组的,回来在电脑上面一敲,顿时为自己的智商和知识羞愧了. 多话不说,直接上题目吧.大概是酱紫的: 代码如下,请写出输出的结果. 1 <script> 2 var str = 'john'; 3 var str2 = 'angus'; 4 5 var arr1 = str.split(''); 6 var arr2 = arr1.reverse(); 7 var arr = str2.

WEB前端笔试题(1)——狼厂

1.至少写出3个css3新增的属性,HTML5强调标签的语义化,写出5个HTML5的语义化标签. 边框:border-radius.box-shadow.border-image 背景:background-clip.background-size.background-origin 文本:text-shadow.word-wrap.word-break.text-overflow:ellipsis 字体:@font-face 转换:transform.transform-origin 过度:t

WEB前端笔试题(3)——狼厂

1.图片文件格式,优缺点以及适应场景 (1)JPEG2000格式:JPEG2000 作为JPEG的升级版,其压缩率比JPEG高约30%左右.与JPEG不同的是,JPEG2000 同时支持有损和无损压缩,而 JPEG 只能支持有损压缩.支持渐进传输,支持“感兴趣区域”进行部分优先解压.JPEG2000可应用于传统的JPEG市场,如扫描仪.数码相机等,亦可应用于新兴领域,如网路传输.无线通讯等等. (2)TIFF格式:TIFF(Tag Image File Format)是Mac中广泛使用的图像格式

Web前端笔试题

1.网页经常用到的图片格式有几种,它们之间有什么不同点和用途? jpg是一种有损图片压缩格式,支持的颜色数量很多,适用于保存颜色较多且比较复杂的摄影图片或写实图像,且生成的文件体积较小: jpg格式是一种大小与质量相平衡的压缩图片格式.通俗一点讲,就是:高的压缩比=低的图片质量=小的文件大小.反之,低的压缩比=高的图片质量=大的文件大小.由于jpg文件无法保持100%的原始图像的像素数据,所以它不被认为是一种无损图像格式. 注:jpg,jpeg这两种格式其实是一样的. 用途:由于这种极其敏感的平

(转)百度web前端笔试题

1.JavaScript包括哪些数据类型? 我回答的是有两种:基本类型和对象,其中基本类型包括数字.字符串.布尔和null:对象(类似对象),包括数组.函数.内置对象.自定义对象.不过按理说字符串也有些对象的特点. 我这个回答是参考的JavaScript权威指南的,有些小问题,第一类中缺少了undefined. 搜索了下,网上还有几种回答: 第一种:共九种类型:1.未定义(undefined) 2.空(null) 3.布尔(boolean) 4.字符串(string) 5.数字(number)6