Web前端面试题目汇总

时间 2019-11-09

标签 web 前端面试题目汇总栏目 HTML 繁體版

原文原文链接

Web前端面试题目汇总

1、HTML/CSS部分

1.什么是盒子模型？javascript

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

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

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

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

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

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

// 一、条件Hack
   <!--[if IE]>
      <style>
            .test{color:red;}
      </style>
   <![endif]-->
   // 二、属性Hack
    .test{
    color:#090\9; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */
    _color:#ff0;  /* For IE6 and earlier */
    }
   // 三、选择符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 生成粘性定位的元素，容器的位置根据正常文档流计算得出

5、常见题java

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

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

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代码优化