前端面试题系列（三）

第三谈

1.

js方面的兼容性写法还有阻止默认事件等等

Var ev = ev || window.event //事件对象
document.documentElement.clientWidth || document.body.clientWidth //可见窗口宽度大小
Var target = ev.srcElement||ev.target //点击目标

2.

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

3.

① 父级div定义height，解决了父级div无法自动获取到高度的问题
优点：简单，代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用

② 添加一个空标签(div/br…)并定义clear：both
优点：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：需要填加空标签，如果多个地方需要清楚浮动，这样会带来代码冗杂，不利于理解的问题

③ 父级div定义伪类:after和zoom
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE专有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多，初学者不易理解原理，要两句代码结合使用，才能让主流浏览器都支持
建议：推荐使用，建议定义公共类，以减少CSS代码

④ 父级div定义overflow:hidden
优点：不用定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度，简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏

⑤ 父级div定义overflow:auto
优点：不用定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度，简单，代码少，浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，需要出现滚动条或者代码不会出现滚动条可以使用。

⑥ 父级div也一起浮动，整体浮动
优点：无
缺点：产生新的浮动问题
建议：不推荐使用，

⑦ 父级div定义display:table，将父级属性变为表格
优点：无
缺点：产生新的未知问题
建议：不推荐使用，

4.

①基本选择器：#id、element、.class、*、selector1,selector2,selectorN

②层次选择器：
ancestor descendant：在给定的祖先元素下匹配所有的后代元素
parent > child：在给定的父元素下匹配所有的子元素
prev + next：匹配所有紧接在 prev 元素后的 next 元素
prev ~ siblings：匹配 prev 元素之后的所有 siblings 元素

③基本筛选器：
：first、:last、:odd、:even、:eq(index)、:gt(index)、:lt(index)…

④内容选择器
:contains(text)：匹配包含给定文本的元素
:empty：匹配所有不包含子元素或者文本的空元素
:has(selector)：匹配含有选择器所匹配的元素的元素
:parent：匹配含有子元素或者文本的元素

⑤可见性选择器
:hidden
:visible

⑥属性选择器
[attribute]：匹配所有拥有attribute属性的元素
[attribute=value]：attribute=value
[attribute!=value]：attribute！=value
[attribute^=value]：value开头的元素
[attribute$=value]：value结尾的元素
[attribute*=value]：包含value的属性的元素
[attrSel1][attrSel2][attrSelN]：多个限制条件

⑦子元素选择器
:first-child
:last-child
:nth-child
:only-child
…

⑧表单选择器
:input：匹配所有输入框
:text
:password：匹配所有密码框
:radio
:checkbox
:submit
:image
:reset
:button
:file

⑨表单对象属性
:enabled
:disabled
:checked
:selected

⑩混淆选择器
$.escapeSelector(selector)：用在类选择器或者ID选择器中包含一些CSS特殊字符

5.

on(“click”,() => {
对话框.show()
})

6.

function loadImage(url, callback) { 
var img = new Image(); //创建一个Image对象，实现图片的预下载 
img.src = url; 
if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数 
callback.call(img); 
return; // 直接返回，不用再处理onload事件 
} 
img.onload = function () { //图片下载完毕时异步调用callback函数。 
callback.call(img);//将回调函数的this替换为Image对象 
}; 
}; 

7.

$(“option:selected”)

8.

//XML文件内容
<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1985</YEAR>
    </CD>
    <CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS Records</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>
</CATALOG>

//使用XML数据
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
  { 
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
  }
document.write("</table>");

XML数据渲染在页面后的样子

9.

① CDN缓存更方便
② 突破浏览器并发限制
③ 节约cookie带宽
④ 节约主域名的连接数，优化页面响应速度
⑤ 防止不必要的安全问题

10.

①优化图像

　　图像对于吸引访客的关注是很重要的。但是你添加到页面上的每一张图片都需要用户从你的服务器下载到他们的电脑上。这无疑增加了页面的加载时间，因此很可能让用户离开你的网站。所以，优化图像是非常必要的。

　　过大的图像需要的下载时间更多，因此要确保图像尽可能的小。可以使用图像处理工具如PS来减小颜色深度、剪切图像到合适的尺寸等。

②减少DNS查询(DNS lookups)

　　减少DNS查询是一个WEB开发人员可以用了页面加载时间快速有效的方法。DNS查询需要话费很长的时间来返回一个主机名的IP地址。而浏览器在查询结束前不会进行任何操作。对于不同的元素可以使用不同的主机名，如URL、图像、脚本文件、样式文件、FLASH元素等。具有多种网络元素的页面经常需要进行多个DNS查询，因而花费的时间更长。

　　减少不同域名的数量将减少并行下载的数量，加速你的网站

③最小化重定向

　　重定向增加了额外的HTTP请求，因此也增加了页面加载时间。然而有时重定向却是不可避免的，如链接网站的不同部分、保存多个域名、或者从不存在的页面跳转到新页面。

　　重定向增加了延迟时间，因此要尽量避免使用它。检查是否有损坏的链接，并立即修复。

④使用内容分发网络（Content Delivery Network CDN）

　　服务器处理大流量是很困难的，这最终会导致页面加载速度变慢。而使用CDN就可以解决这一问题，提升页面加载速度。

　　CDN是位于全球不同地方的高性能网络服务，复制你网站的静态资源，并以最有效的方式来为访客服务。

⑤把CSS文件放在页面顶部，而JS文件放在底部

　　把CSS文件在页面顶部引入可以逐步渲染，节省浏览器加载和重绘页面元素的资源。JavaScript是用于功能和验证。把JS文件放在页面底部可以避免代码执行前的等待时间，从而提升页面加载速度。

　　这些都是一些减少页面加载时间和提高转换率的方法。在某些情况下，需要JavaScript在页面的顶部加载（如某些第三方跟踪脚本）。

⑥去掉不必要的插件

　　一个非常值得关注但经常被忽略的因素是你网站安装的插件。如今，大量免费的插件诱导网站开发者添加很多不必要的功能。您安装的每个插件都需要服务器处理，从而增加了页面加载时间。所以禁用和删除不必要的插件。

⑦利用浏览器缓存

　　浏览器缓存是允许访客的浏览器缓存你网站页面副本的一个功能。这有助于访客再次访问时，直接从缓存中读取内容而不必重新加载。这节省了向服务器发送HTTP请求的时间。此外，通过优化您的网站的缓存系统往往也会降低您的网站的带宽和托管费用。

⑧使用 CSS Sprites 整合图像

　　多图像的网站加载时间比较久。其中一个解决方法就是把多个图像整合到少数几个输出文件中。你可以使用 CSS Sprites 来整合图像文件。这样就减少了在下载其他资源时的往返次数和延迟，从而提高了站点的速度。

⑨压缩CSS和JavaScript

　　压缩是通过移除不必要的字符（如TAB、空格、回车、代码注释等），以帮助减少其大小和网页的后续加载时间的过程。这是非常重要的，但是，你还需要保存JS和CSS的原文件，以便更新和修改代码。

⑩启用GZIP压缩

　　在服务器上压缩网站的页面是提升网站访问速度非常有效的一种方法。你可以用gzip压缩做到这一点。Gzip是一个减小发送给访客的HTML文件、JS和CSS体积的工具。压缩的文件减少了HTTP响应时间。据Yahoo报道，这大概可以减少70%的下载时间。而目前90%的通过浏览器的流量都支持Gzip压缩，因此，这是一个提示网站性能有效的选项。