前端面试题

BAT2014前端笔试面试题

HTML 篇

  1. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

    • IE：trident内核
    • Firefox：gecko内核
    • Safari：Webkit内核
    • Opera：Blink内核（以前是presto内核）
    • Chrome：Blink（基于Webkit）

  2. 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

    最重要的作用是告诉浏览器按照何种规范来解析页面，对页面的布局呈现有很大影响

  3. Quirks模式是什么？它和Standards模式有什么区别

    怪异模式是IE弄出来的东西，会影响布局和css样式的解析

  4. div+css的布局较table布局有什么优点？

    • 表现与结构相分离
    • 页面加载速度更快，结构更清晰，页面显得简洁
    • 易于优化，对搜索引擎更友好

  5. a：img的alt与title有何异同？b：strong与em的异同？

    • alt：如果不能显示图片，alt属性用来指定替换文字，还有就是阅读屏幕的时候，可以阅读出来。

    • title：该属性为设置该属性的元素提供建议性的信息。

    • strong：粗体标签，表示内容的重要性

    • em：斜体标签，表示内容的强调点

  6. 优雅降级和渐进增强

    1. 优雅降级：使用新特性，如css3的新属性，来丰富页面的效果，再针对低版本的浏览器进行兼容

    2. 渐进增强：针对低版本浏览器进行页面构建，保证基本的功能的情况下，再针对高级浏览器等改进和追加功能来达到更好的用户体验。

  1. 为什么利用多个域名来存储网站资源会更有效？

    • CDN缓存会更加方便
    • 突破浏览器的并发限制
    • 节约cookie带宽
    • 节约主域名的连接数，优化页面响应速度
    • 防止不必要的安全问题

  2. 请谈一下你对网页标准和标准制定机构重要性的理解。

    标准是一个行业健康发展的保证，而且从一个开发者来说，看看前端的历史就知道由于先前的浏览器之争，给开发带来多大的麻烦，光顾着解决兼容性的问题，导致无法专注于业务，提高用户体验这些更为重要的事情上。不过如今，浏览器之争趋于平缓，标准被越来越广泛地接受。

  3. 请描述一下cookies，sessionStorage和localStorage的区别？

    1. cookie

      • 大小限制4Kb，
      • 发送请求会携带cookie
      • 不能跨域调用
      • cookie的操作也很麻烦

    2. seesionStorage & localStorage

      • 更大容量
      • 更加便捷的操作API
      • 不会在请求中携带
      • 一个是会话级别的存储，一个持久化的本地存储

  1. 简述一下src与href的区别。

    1. src

      • 是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签的所在位置。
      • 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到该资源加载、编译、执行完毕。这也是为什么要把js脚本放置到底部的原因。

    2. href

      Hypertext Reference的缩写，指向网络资源的所在位置，建立和当前元素（锚点）或当前文档（链接）之间的连接。

       <link href="common.css" rel="stylesheet">

      浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是link方式比@import方式好的原因。

  1. 页面中的图片格式有哪些

    png，jpeg，gif，svg

    Webp：谷歌开发的一种旨在加快图片加载速度的图片格式，图片压缩体积比jpeg的小很多，可以节省大量的服务器带宽资源和数据空间。

  2. 微格式？

    微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开发标准，为特殊应用而指定的特殊格式。

    优点：可以让网站内容在搜索引擎结果界面可以显示额外的提示。

  3. 一次js请求一般情况下有哪些地方会有缓存处理？

    1. dns缓存
    2. cdn缓存
    3. 浏览器缓存
    4. 服务器缓存

  4. 一个页面上有大量的图片（大型电商网站），加载很慢，如何优化

    1. 图片懒加载

      在页面上添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载

    2. 图片预加载

      像页面中的幻灯片，相册

    3. 雪碧图

      如果有小图居多，可以进行图片合并，制成雪碧图

    4. 预加载缩略图

      如果图片过大，可以使用特殊编码的图片，加载时先加载一张压缩的特别厉害的缩略图，以提高用户体验。

    5. 图片展示区和图片大小保持一致。

CSS篇

  1. 有哪些方式可以对一个DOM设置它的CSS样式

    1. 外部样式，引入一个css文件

    2. 内部样式，将css代码写在<style>标签内

    3. 内联样式，写在DOM元素的style属性内

  1. CSS都有哪些选择器

    • 元素选择器
    • id选择器
    • 类选择器

    • 属性选择器

      优先级的定义：

    • 特殊性

    • 重要性

    • 来源

    • 顺序（声明的先后顺序）

      问题

      <style>
 .a {color:blue;}
 .b {color:red;}
</style>
<p class="b a">123</p>

      输出结果是:red，样式定义的在文件中的先后顺序有关，而跟使用的先后无关。

  1. CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器的可视范围内

    1. display:none
    2. visibilty : hidden
    3. width:0 height:0
    4. opacity:0
    5. z-index:-1000

  2. 行内元素和块级元素区别，还有inline-block

  3. 外边距重叠

    在CSS中，相邻的两个盒子的外边距可以结合成一个单独的外边距，这种合并外边距的方式被称为折叠。

    折叠计算规则：

    1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值

    2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值

    3. 两个外边距一正一负时，折叠结果是两者相加的和

  1. rgba()和opacity的透明效果有什么不同

    rgba()和opacity都能实现透明效果

    • opacity作用于元素，以及元素内的所有内容的透明度

    • rgba()只作用于元素的颜色或其背景色（子元素不会继承透明效果）

  1. css中可以让文字在垂直和水平方向上重叠的两个属性是什么

    垂直方向：line-height 水平方向：letter-spacing

    letter-spaceing的妙用：

    可以用于消除inline-block元素间的换行符空格间隙问题

  2. 如何垂直居中一个浮动元素

  3. px和em的区别

    px和em都是长度单位，但是px是固定值，而em不是，而且em会继承父级元素的字体大小。

    默认情况下，浏览器的字体大小为16px，即1em=16px

  4. 描述一个resetcss文件并如何使用它，知道normalize.css？

    重置样式是为了去除掉浏览器的默认的样式，让浏览器达到一致和合理。但是由于重置样式重置了所有的默认样式，过于"粗暴"。于是就出现了改良版的normalize.css，它没有重置所有的样式风格，但有提供了一套合理的默认样式值。在让浏览器达到一致的同时，又不扰乱其他的东西。

  5. Sass、Less是什么

    它们是css预处理器，是在css上的一层抽象。它们的好处

    • 结构清晰，便于扩展

    • 可以方便地屏蔽浏览器私有语法差异，减少无意义的机械劳动

    • 完全兼容css代码。

来源

  1. http://www.cnblogs.com/coco1s/p/4034937.html

results matching ""

    No results matching ""