Web前端面试题目汇总

时间:2020-05-06
本文章向大家介绍Web前端面试题目汇总,主要包括Web前端面试题目汇总使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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

原文地址:https://www.cnblogs.com/jlfw/p/12835759.html