Web前端面试题目汇总

一、HTML/CSS部分

1.什么是盒子模型？

盒子模型包含内容(content)、内边距(pandding)、外边距(margin)和边框(border）四部分 。

2.行级元素有哪些？块级元素有哪些？空(void)元素有那些？

(1)行级元素
   
    特点：a.可以和其他元素处于一行，不用必须另起一行。
   
    　　　b.元素的高度、宽度及顶部和底部边距不可设置。
   
    　　　c.元素的宽度就是它包含的文字、图片的宽度，不可改变。
   常见的行级元素:a,span,img,input,textarea,label,button等
   
   (2)块级元素 特点：a.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。
   
   　　b.元素的高度、宽度、行高和顶底边距都是可以设置的。　　
   
   　　c.元素的宽度如果不设置的话，默认为父元素的宽度。
   
   常见的块级元素：div、p、h1...h6、ol、ul、dl、table、address、
   
   blockquote,form等
   总结：(1)css样式中用display:inline将块级元素设为行级元素
        (2)可以用display:block将行级元素设为块级元素

3.简述一下src与href的区别

(1)href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
   (2)src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

4.什么是CSS Hack?
一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack

 // 1、条件Hack
   <!--[if IE]>
      <style>
            .test{color:red;}
      </style>
   <![endif]-->
   // 2、属性Hack
    .test{
    color:#090\9; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */
    _color:#ff0;  /* For IE6 and earlier */
    }
   // 3、选择符Hack
    * html .test{color:#090;}       /* For IE6 and earlier */
    * + html .test{color:#ff0;}     /* For IE7 */

5.position的值， relative和absolute分别是相对于谁进行定位的？

 absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。
   
   fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
   
   relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
   
   static 默认值。没有定位，元素出现在正常的流中
   
   sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

五、常见题

1.分析输入url到页面返回的过程

   第一步：客户机提出域名解析请求，并将该请求发送给本地的域名服务器。
   第二步：当本地的域名服务器收到请求后，就先查询本地的缓存，如果有该记录项，则本地的域名服务器就直接把查询的结果返回。
   第三步：如果本地的缓存中没有该记录项，则本地的域名服务器就直接把请求发送给根域名服务器，然后根域名服务器再返回给本地域名服务器一个所查询域（根的子域）的主域名服务器的地址。
   第四步：本地服务器再向上一步返回的域名服务器发送请求，然后接受请求的服务器查询自己的缓存，如果没有该记录项，则返回相关的下级的域名服务器的地址。
   第五步：重复第四步，直到找到正确的记录。

2.web前端性能优化的方法

 a.减少http请求，合理设置HTTP缓存
      http协议是无转台的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独立的线程去出来处理。
     减少http的主要手段是合并css、合并javascript、合并图片b.使用浏览器缓存
   (1)静态资源文件可通过设置http头中的cache-control和expires的属性，可设定浏览器缓存。
   (2)静态资源变化需及时应用到客户端浏览器，可通过改变文件名实现，即更新javascript文件并不是更新javascript文件内容，而是生成新的js文件并更新html文件中的引用。
   (3)使用浏览器缓存策略的网站在更新静态资源时，应采用逐量更新的方法。
   c.启用压缩
   服务器端对文件压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。
   d.lazyload image
   例如图片，在页面刚加载时只加载第一屏，当用户继续往后滚屏时才加载后续的图片。
   e.css放在页面最上部，javascript放在页面最下面
   f.减少cookie传输
   cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输。
   g.javascript代码优化