WEB前端开发试题

关注

原创最新推荐文章于 2026-04-15 09:38:11 发布 3.6k 阅读 AI 写同款· GEO 优化 ›

《Web前端开发技术(HTML+CSS+JavaScript)》题库附答案什么是Web技术？答：Web即全球广域网（World Wide Web），也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。它是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超链接将Internet上的信息节点组织成一个互为关联a的网状结构。什么是Web前端？答：Web前端是指基于Web（现在一般指动态页面技术）的客户端软件，也就是通常说的在浏览器端运行的网页程序... 阅读详情

1请实现，鼠标点击页面中的任意标签，alert该标签的名称．（注意兼容性）

function elementName(evt){

   evt = evt|| window.event;   // IE: window.event

// IE用srcElement获取事件源，而FF用target获取事件源

   var selected = evt.target || evt.srcElement;

   alert(selected.tagName);

  }

  window.onload = function(){

   var el =document.getElementsByTagName('body');

   el[0].onclick = elementName;

  }

2请指出一下代码的性能问题，并经行优化。

var info="腾讯拍拍网（www.paipai.com）是腾讯旗下知名电子商务网站。";
info +="拍拍网于2005年9月12日上线发布，";
info +="2006年3月13日宣布正式运营，";
info +="是目前国内第二大电子商务平台。";
info=info.split(",");
for(var i=0; i<info.length; i++)
{ alert(info[i]); }

优化：

1、由于字符串相加比较慢，所以可以考虑直接把所有字符写在同一个变量中。

2、仔细考虑这段JS需要实现的功能，会发现，其实完全可以用一个数组来存储，然后遍历数组输出，这样效率会提高很多，因为省去了info=info.split(",");执行所要消耗的时间。

优化结果如下：

  var info = new Array();

  info[0] = "腾讯拍拍网（www.paipai.com）是腾讯旗下知名电子商务网站。拍拍网于2005年9月12日上线发布";

  info[1] = "2006年3月13日宣布正式运营";

  info[2] = "是目前国内第二大电子商务平台。"; 

  for(var i = 0; i < info.length; i++) {

   alert(info[i]);

  }

3请给出异步加载js方案，不少于两种。

(1) defer，只支持IE

(2) async：

(3)创建script，插入到DOM中，加载完毕后callBack，见代码：

function loadScript(url, callback){
   var script = document.createElement_x("script")
   script.type = "text/javascript";
   if (script.readyState){ //IE
      script.onreadystatechange = function(){
         if (script.readyState == "loaded" ||
            script.readyState == "complete"){
            script.onreadystatechange = null;
            callback();
         }
      };
   } else { //Others: Firefox, Safari, Chrome, and Opera
      script.onload = function(){
          callback();
      };
   }
   script.src = url;
   document.body.appendChild(script);
}

4请写出jQuery绑定事件的方法，不少于两种。

1. bind/Unbind：匹配页面元素进行相关事件的处理

$("#id").bind('click',function(){alert('tt!')});

$('a').bind({

click:function(){alert('a');},

mouseover:function(){alert('aagain!')}

2. One：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

$('a').one('click',function(){

alert('a');

})

3. live：能处理动态添加的元素，给那些后添加的元素也一样绑定事件

$('a').live('click,function(){

alert('showmessage!');

})

5请设计一套方案，用于确保页面中JS加载完全。

var n = document.createElement("script");
n.type = "text/javascript";
//以上省略部分代码
//ie支持script的readystatechange属性
if(ua.ie){
   n.onreadystatechange = function(){
       var rs = this.readyState;
       if('loaded' === rs || 'complete'===rs){
           n.onreadystatechange = null;
           f(id,url); //回调函数
       }
};
//省略部分代码
//safari 3.x supports the load event for script nodes(DOM2)
   n.addEventListener('load',function(){
       f(id,url);
   });
//firefox and opera support onload(but not dom2 in ff) handlers for
//script nodes. opera, but no ff, support the onload event for link
//nodes.
}else{
   n.onload = function(){
       f(id,url);
   };
}

6请优化某网页的加载速度。

1）JS，CSS，HTML做gzip压缩（不要对图片进行Gzip压缩）

2）JS，CSS脚本文件优化：删除js，css文件的注释；avascript放置网页底部，避免阻塞下载；CSS放到header中，避免白屏；合并JS和CSS；压缩JS和CSS；

3）精简HTML：去掉HTML注释，回车符，以及无效字节

4）优化img文件，注明：width，height，在img标签中指定尺寸是为了提升浏览器渲染效率；写入img：第一时间显示logo图和背景，避免空白和无背景

5）优化缓存：对没有变化的css,js，图片等网页元素，直接利用客户端的浏览器缓存读取来有效减少http请求数。

6）通过增加expires header（给文件加上关于过期时间的header报文。）可以告诉浏览器，那些网页元素可以缓存和缓存多长时间。

7）合并网站图标采用CSS sprites（CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中）技术来实现。

8）把脚本和图片放在不同的服务器和域名，做成并行下载。

9）屏蔽无效页面。

7对string对象进行扩展，使其具有删除前后空格的方法。

1）用prototype添加方法

2） substring()函数是返回截取之后的字符串，不会对原字符串进行修改。

3）示例代码：

String.prototype.deletSpace = function(){
var str = this;  //提取需要操作的字符串
while(str[0] == " "){  //删除前面的空格
str = str.substring(1); 
}
while(str[str.length - 1] == " "){  //删除后面的空格
str = str.substring(0,str.length-1);
}
return str;
}
//测试字符，字符长度为10，前面后面分别有两个空格
var expr =new String(" 123456 ");
var delet = expr.deletSpace();
alert(delet.length);  //返回值为6 前面空格已删除

8完成一个正则表达式，验证用户输入是否为身份证号码。

function check(myform){
if(myform.number.value==""){
alert("请输入身份证号码地址!");
myform.number.focus();
return;
}
if(!checkeNO(myform.number.value)){
alert("您输入身份证号码不正确!");
myform.number.focus();
return;
}
myform.submit();
}
function checkeNO(NO){
var str=NO;
//在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号
var Expression=/\d{17}[\d|X]|\d{15}/; 
var objExp=new RegExp(Expression);
if(objExp.test(str)==true){
return true;
}else{
return false;
}
}

补充：
1）客户端验证Email是否正确1）客户端验证Email是否正确

<script language="javascript">
function check(myform){
if(myform.e_mail.value==" "){
alert("请输入Email地址!");
myform.e_mail.focus();
return;
}
if(!checkemail(myform.e_mail.value)){
alert("您输入Email地址不正确!");
myform.e_mail.focus();
return;
}
myform.submit();
}
function checkemail(email){
var str=email;
//在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号
var Expression=/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; 
var objExp=new RegExp(Expression);
if(objExp.test(str)==true){
return true;
}else{
return false;
}
} 
</script>

2）验证输入的字符串是否为汉字

function check(myform){
if(myform.realname.value==" "){
alert("请输入真实姓名!");
myform.realname.focus();
return;
}
if(checkrealname(myform.realname.value)){
alert("您输入真实姓名不正确!");
myform.realname.focus();
return;
}
myform.submit();
}
function checkrealname(realname){
var str=realname;
//在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号
var Expression=/[^\u4E00-\u9FA5]/; 
var objExp=new RegExp(Expression);
if(objExp.test(str)==true){
return true;
}else{
return false;
}}

收录于