前端工程师常见的面试题

﹥>﹥吖頭↗ 提交于 2020-03-14 04:41:44

1、对WEB标准以及W3C的理解和认识?

  • 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率
  • 使用外链css和js脚本,结构行为表现的分离
  • 文件下载与页面速度更快,内容能被更多的用户所访问,内容能被更广泛的设备所访问
  • 更少的代码和组价,容易维护,改版方便,不需要变动页面内容
  • 提供打印版本而不需要复制内容、提高网站易用性。

2、xml和html有什么区别

  • HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
  • 最主要的不同是:
  • XHTML元素必须被正确地嵌套
  • XHTML元素必须被关闭
  • 标签名必须用小写
  • XHTML文档必须拥有根元素

3、doctype(文档类型)的作用是什么?你知道多少种文档类型?

  作用是:此标签可以告知浏览器文档使用哪种HTML或XHTML规范

  此标签可声明三种DTD类型,分别表示严格版本、过渡版本以及基于框架的HTML文档

  • HTML4.01规定了三种文档类型:Strict、Transition以及Frameset
  • XHTML1.0 规定了三种XML文档类型:Strict、Transitional以及Frameset
  • Standards(标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页

4、行内元素有哪些?块级元素有哪些?CSS的盒模型

  • 行内元素:span、a、Img、input、select、b
  • 块级元素:div、p、h1~h6、form、ul、li
  • CSS盒模型:border、padding、margin

5、CSS引入方式有哪些?link和@import的区别

  • CSS引入方式:内联式、行内式、外链式
  • 区别是:同时加载
    • 前者无兼容性、后者CSS2.1以下的浏览器不支持 
    • link支持使用JavaScript改变样式,后者不支持

6、CSS选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

  • CSS选择器:标签选择器、类选择器、ID选择器(组合选择器、相邻选择器(+))伪类选择器
  • 继承不如指定
  • 优先级:标签选择器<类选择器<ID选择器
  • important优先级高

7、前端页面有哪三层构成,分别是什么?作用是什么?

  • 结构层html、表现层css、行为层js

8、CSS的基本语句构成是?

  • 选择器{属性名:属性值;属性名:属性值;}

9、你做的页面在哪些浏览器测试过?这些浏览器的内核是什么

  • IE(ie内核)、谷歌(webkit内核)、火狐(Gecko)、opera(Presto)

10、写出几种IE6 BUG的解决方法

  • float引起的双边距bug:使用display
  • 使用float引起的3像素bug:使用display:inline
  • 超链接hover点击之后失效:使用正确的书写顺序link   visited  hover   active
  • IE z-inde问题:给父级添加position:relative
  • PNG透明:使用js代码改
  • min-height最小高度 !important解决
  • select在ie6下遮盖 使用iframe嵌套
  • 为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden;zoom:0.09;line-height:1px;)
  • IE6不支持!important

11、img标签上title与alt属性的区别是什么?

  • alt当图片不显示时,用文字代替
  • title当鼠标放在图片上时,显示文字说明

12、描述css reset的作用和用途

  • reset重置浏览器的css默认属性,浏览器的品种不同,样式不同,然后重置,让他们统一

13、解析css sprites,如何使用

  • css精灵(又叫雪碧图),是把一堆小图片整合到一张大的图片上,减少服务器对图片的请求数量

14、浏览器标准模式和怪异模式之间的区别是什么?

  • 盒子模型、渲染模式不同
  • 使用window.top.document.compatMode可显示为什么模式

15、你如何对网站的文件和资源进行优化?期待的解决方案包括:

  • 文件合并
  • 文件最小化/文件压缩
  • 使用CDN托管
  • 缓存的使用

16、请解释一下什么是"语义化HTML

  • 语义化HTML就是:标题h1~h6,段落p,无序列表ul li,有序列表ol li,图片img,链接a等,对于搜索引擎的抓取有好处

  语义化的好处:

  • 去掉或样式丢失的时候,能让页面呈现清晰的结构
  • 屏幕阅读器(如果访客有视障)会完全根据你的标记来"读"你的网页
  • PDA、手机登设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱)
  • 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重
  • 你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义化标记。
  • 便于团队开发和维护

17、清除浮动的几种方式,各自的优缺点

  • 使用空标签清除浮动clear:both(理论上能清除任何标签,,,增加无意义的标签)
  • 使用overflow:auto(空标签元素清除浮动而不是增加无意代码的弊端,使用zoom:1用于兼容IE)
  • 使用after伪元素清除浮动(用于非IE浏览器)

18、请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)

  • 优化图片
  • 图片格式的选择(GIF:提供的颜色较少,可用在一些对颜色要求不高的地方)
  • 优化CSS(压缩合并css,如margin-top,margin-left...)
  • 网址后加斜杠(如:www.campr.com/目录,会判断这个"目录是什么文件类型,或者是目录。")
  • 标明高度和宽度(如果浏览器没有找到这两个参数,它需要一边下载图片,一边计算大小,如果图片很多,浏览器需要不断的调整页面,这不但影响速度,也影响浏览体验,当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容,从而使加载时间变快,浏览体验也更好)
  • 减少http请求(合并文件,合并图片使用雪碧图)

19、讨论CSS hacks,条件引用或者其他

  • <!--[if IE6]--><![end if]-->
  • _margin  IE6
  • +margin  IE7
  • margin:0 auto\9  所有IE
  • margin:\0  IE8 

20、你用过媒体查询,或者针对移动端的布局/CSS吗?

  • @media  screen  and  (min-width:400px)  and  (max-width:700px){......}
  • @media  handheld  and  (min-width:20em),screen  and  (min-width:20em){......}
  • 媒体查询,就是响应式布局,响应式布局框架:bootstrap、PureCSS等

21、解释下原型继承的原理

当查找一个对象的属性时,JavaScript会向上遍历原型链,直到找到给定名称的属性为止(大多数JavaScript的实现用_proto_属性来表示一个对象的原型链)

以下代码展示了JS引擎如何查找属性:

function  getProperty(obj,prop){

  if(obj.hasOwnProperty(prop)){

    return obj[prop];

  }else  if(obj._proto_! == null){

    return  getProperty(obj._proto_,prop)

  }else{

    return  undefined;

  } 

}

22、前端安全

CSRF:跨站请求伪造。攻击者盗用了你的身份,以你的名义发送恶意请求。他可以做到的事情包括:以你的名义发送邮件,发消息,盗取你的账号。甚至购买商品...造成的问题包括:个人隐私泄露以及财产安全。

原理:

  登录受信任的网站A,并且在本地生成cookie,在不登录A网站的情况下,访问危险网站B

常见类型:

  • 使用get更新请求资源,容易在B使用img标签造成攻击
  • 前端虽然改成了post请求,但是B网站通过iframe等手段同样造成了攻击

防御机制:

  • 验证码:用户每次提交都需要在表单中填写图片上一个随机字符串
  • 添加一个隐藏的输入框:包含token,服务端验证是否匹配
  • 使用HTTP refer头部进行判断,如果不是业务域名发起的HTTP请求,直接过滤。

XSS它的全名:Cross-sitescripting,为了和CSS层叠样式表区分所以取名XSS是一种网站应用程序的安全漏洞攻击,是代码注入的一种。它允许恶意用户将代码注入到网页上,这类攻击通常包含了HTML以及用户端脚本语言。

23、CMD   VS   AMD

CommonJS是服务器端模块的规范,Node.js采用了这个规范

  • 根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为globald对象的属性。
  • CommonJS规范加载模块是同步的,也就是说,只要加载完成,才能执行后面的操作。

AMD规范则是非同步加载模块,允许指定回调函数。

  • 由于Node.js主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以CommonJS规范比较适用。
  • 但是,如果是浏览器环境,要从服务器端加载模块,这时就必须采用非同步模式,因此浏览器一般采用AMD规范。
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!