Web前端面试题目汇总

yy736044583 发布于2019-08-21 18:28 / 1130人阅读

摘要：前端面试题目汇总一部分什么是盒子模型盒子模型包含内容内边距外边距和边框四部分。第四步本地服务器再向上一步返回的域名服务器发送请求，然后接受请求的服务器查询自己的缓存，如果没有该记录项，则返回相关的下级的域名服务器的地址。

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
   
   // 2、属性Hack
    .test{
    color:#0909; /* 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代码优化

GPU云服务器云服务器 web前端开发工程师面试面试题目 python面试题目中级php面试题目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90501.html

Web前端面试题目汇总

摘要：前端面试题目汇总一部分什么是盒子模型盒子模型包含内容内边距外边距和边框四部分。第四步本地服务器再向上一步返回的域名服务器发送请求，然后接受请求的服务器查询自己的缓存，如果没有该记录项，则返回相关的下级的域名服务器的地址。 Web前端面试题目汇总一、HTML/CSS部分 1.什么是盒子模型？盒子模型包含内容(content)、内边距(pandding)、外边距(margin)和边...

golden_hamster 2019-08-29 14:07 评论0 收藏0
前端最强面经汇总

摘要：获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码，也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素，方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。花了很长时间整理的前端面试资源，喜欢请大家不要吝啬star~ 别只收藏，点个赞，点个star再走哈~ 持续更新中……，可以关注下github 项目地址 https:...

wangjuntytl 2019-08-26 10:41 评论0 收藏0
你不知道的h5

摘要：目前，常用的模块规范主要有两种和。拦截全局请求一直接引入脚本拦截需要的回调或函数。深刻知道一个良好的命名规范的重要性，同时在项目中也会遇到一些命名的瓶颈。基于 Three.js 的超快的 3D 开发框架：Whitestorm.js Whitestorm.js 是一款基于 Three.js 超快的 Web 应用 3D 开发框架。它为普通的 Three.js 任务提供封装、使搭建环境、...

IntMain 2019-08-21 17:57 评论0 收藏0