【前端】前端面试题整理,BAT大厂很简单

【摘要】 前端和计算机相关知识你能描述一下渐进增强和优雅降级之间的不同吗浏览器兼容问题...

web前端工程师面经整理-优选资源.jpg

  1. 前端和计算机相关知识
    1. 你能描述一下渐进增强和优雅降级之间的不同吗
    2. 浏览器兼容问题
    3. 如何对网站的文件和资源进行优化?
    4. 怎么学习前端?怎么接触前端新知识?
    5. 关于前后端分离
    6. 关于浏览器内核(渲染引擎)
    7. 浏览器加载文件顺序以及repaint/reflow
    8. 为什么使用多个域名来存储网络资源会更有效?
    9. 进程和线程的区别
    10. 前端开发的优化问题
    11. Flash,Ajax各自的优缺点,使用中如何取舍?
  2. CSS
    1. CSS3
    2. css居中的方式
    3. 请写一个简单的幻灯效果页面
    4. 什么是无样式内容闪烁?如何避免?
    5. display:none和visibility:hidden的区别
    6. 解释浮动和工作原理
    7. 清除浮动
    8. 解释CSS Sprits,以及你要如何使用?
    9. 你最喜欢的图片替换方法是什么?你将如何使用?
    10. 讨论CSS hacks, 条件引用或其他
    11. 如何为有功能限制的浏览器提供网页
    12. 在书写高效CSS时会有哪些问题需要考虑?
    13. 如何优化网页的打印样式?
    14. 描述下你曾经使用过的CSS 预处理的优缺点
    15. 如果设计中使用了非标准的字体, 你将如何实现?
    16. 解释下浏览器是如何判断元素是否匹配某个 CSS 选择器?

    17. 解释一下你对盒模型的理解,以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

    18. 伪类的用法

    19. 描述下"reset"css文件的作用和使用它的好处

    20. 请解释一下 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处?

    21. block, inline和inline-block的区别
    22. css动画和js动画的优缺点

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

    24. 有哪些隐藏内容的方法(同时还要保证屏幕阅读器可用)
    25. CSS选择器级别
    26. alt和title的区别
    27. 知道bfc吗?
    28. 行内元素,块级元素,空元素各有哪些?
  3. html
    1. h5的改进:

    2. 什么是语义化的html?

    3. 从前端角度出发谈谈做好seo应该注意什么?
    4. 文档类型(DOCTYPE)

    5. 使用XHTML的局限有哪些?

    6. 如果网页内容需要多语言,要怎么做?

    7. data-*属性的作用

    8. 如果把 HTML5 看作做一个开放平台,那它的构建模块有哪些?

    9. 请描述一下 cookies,sessionStorage 和 localStorage 的区别?

    10. 浏览器本地存储与服务器端存储之间的区别

    11. sessionStorage和页面js数据对象的区别

    12. canvas和svg的区别?

    13. href和src的区别
  4. js

    1. ajax, 跨域, jsonp

    2. apply和call的用法和区别:

    3. bind函数的兼容性

    4. 解释下事件代理

    5. 解释下js中this是怎么工作的?

    6. 继承

    7. AMD vs. CommonJS?

    8. 什么是哈希表?

    9. 什么是闭包? 闭包有什么作用?

    10. 伪数组:

    11. undefined和null的区别, 还有undeclared:

    12. 事件冒泡机制:

    13. 解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式):function foo(){ }();?

    14. "attribute" 和 "property" 的区别是什么?

    15. 请指出 document load 和 document ready 两个事件的区别。

    16. 什么是use strict? 其好处坏处分别是什么?

    17. 浏览器端的js包括哪几个部分?

    18. DOM包括哪些对象?

    19. js有哪些基本类型?

    20. 基本类型与引用类型有什么区别?

    21. 关于js的垃圾收集例程

    22. ES5中, 除了函数,什么能够产生作用域?

    23. js有几种函数调用方式?

    24. 描述事件模型?IE的事件模型是怎样的?事件代理是什么?事件代理中怎么定位实际事件产生的目标?

    25. js动画有哪些实现方法?

    26. 还有什么实现动画的方法?

    27. 面向对象有哪几个特点? 

    28. 如何判断属性来自自身对象还是原型链?

    29. ES6新特性

    30. 如何获取某个DOM节点,节点遍历方式

    31. 用LESS如何给某些属性加浏览器前缀?

    32. js异步模式如何实现?

    33. 事件机制,如何绑定事件处理函数

    34. 图片预加载

    35. 如果在同一个元素上绑定了两个click事件, 一个在捕获阶段执行, 一个在冒泡阶段执行. 那么当触发click条件时, 会执行几个事件? 执行顺序是什么?

    36. js中怎么实现块级作用域?

    37. 构造函数里定义function和使用prototype.func的区别?

    38. js实现对象的深克隆
  5. jquery问题
  6. 一些编程题

    1. 匿名函数变量
    2. this指向
    3. 定时
    4. 点击一个ul的五个li元素,分别弹出他们的序号,怎么做?

  7. js算法题

    1.  js实现数组去重怎么实现?

一、前端编程

1. 你能描述一下渐进增强和优雅降级之间的不同吗?

答:

  • 定义:
    • 优雅降级(graceful degradation): 一开始就构建站点的完整功能,然后针对浏览器测试和修复
    • 渐进增强(progressive enhancement): 一开始只构建站点的最少特性,然后不断针对各浏览器追加功能。 
  • 都关注于同一网站在不同设备里不同浏览器下的表现程度
  • 区别:
    • “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站. 而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如 IE、Mozilla 等)的前一个版本。
    • “渐进增强”观点则认为应关注于内容本身。请注意其中的差别:我甚至连“浏览器”三个字都没提
  • 理解:
    • "优雅降级"就是首先完整地实现整个网站,包括其中的功能和效果. 然后再为那些无法支持所有功能的浏览器增加候选方案, 使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
    • "渐进增强"则是从浏览器支持的基本功能开始, 首先为所有设备准备好清晰且语义化的html及完整内容, 然后再以无侵入的方法向页面增加无害于基础浏览器的额外样式和功能. 当浏览器升级时, 它们会自动呈现并发挥作用.

参考自: 渐进增强、优雅降级  渐进增强和优雅降级

2. 浏览器兼容问题:

    • 问题1   不同浏览器的标签默认的外补丁和内补丁不同.
      • 即随便写几个标签, 在不加样式控制的情况下, 各自的margin和padding差异较大.
      • 解决方法: CCS里:   *{margin:0; padding:0}
    • 问题2   块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大
      • 会使得ie6后面的一块被顶到下一行.
      • 解决方案: 在float的标签样式中加入 display: inline; 将其转化为行内属性
    • 问题3  设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度
      • IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度
      • 解决方案: 给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度
      • 原因: ie8之前的浏览器都会给标签一个最小默认的行高的高度. 即使标签是空的,这个标签的高度还是会达到默认的行高.
    • 问题4  行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug
      • 解决: 在display:block;后面加入display:inline;display:table;
    • 问题5  图片默认有间距
      • 几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。
      • 解决: 使用float属性为img布局
    • 问题6  标签最低高度设置min-height不兼容
      • 因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容
      • 如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
    • 问题7  透明度的兼容CSS设置
      • 使用hacker
        • IE6认识的hacker是下划线_和*
        • IE7,遨游认识的hacker是*
    • 问题8  IE ol的序号全为1, 不递增
      • 解决: li设置样式{display: list-item}
    • 问题9 

 ie6,7不支持display:inline-block

    • 解决方法: 设置inline并触法haslayout
    • display:inline-block; *display:inline; *zoom:1 

参考自: 常见浏览器兼容性问题与解决方案

3. 如何对网站的文件和资源进行优化?

答: 

  • 文件合并(同上题“假若你有5个不同的 CSS 文件, 加载进页面的最好方式是?”
    • 减少调用其他页面、文件的数量。一般我们为了让页面生动活泼会大量使用background来加载背景图,而每个 background的图像都会产生1次HTTP请求,要改善这个状况,可以采用css的1个有用的background-position属 性来加载背景图,我们将需要频繁加载的多个图片合成为1个单独的图片,需要加载时可以采用:background:url(....) no-repeat x-offset y-offset;的形式加载即可将这部分图片加载的HTTP请求缩减为1个。
    • 每个http请求都会产生一次从你的浏览器到服务器端网络往返过程并且导致推迟到达服务器端和返回浏览器端的时间,我们称之为延迟
  • 文件最小化/文件压缩
    • 将需要传输的内容压缩后传输到客户端再解压,这样在网络上传输的 数据量就会大幅减小。通常在服务器上的Apache、Nginx可以直接开启这个设置,也可以从代码角度直接设置传输文件头,增加gzip的设置,也可以 从 负载均衡设备直接设置。不过需要留意的是,这个设置会略微增加服务器的负担。建议服务器性能不是很好的网站,要慎重考虑。
    • js和css文件在百度上搜一个压缩网站就能压缩,但是在实际开发的项目中,使用gulp、webpack等工具可以打包出合并压缩后的文件,小图片可以在打包时转换成base64方式引入,大图片可以被压缩,html文件也是可以被压缩的
  • 使用 CDN 托管
    • CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。
  • 缓存的使用
    • Ajax调用都采用缓存调用方式,一般采用附加特征参数方式实现,注意其中的<script src=”xxx.js?{VERHASH}”,{VERHASH}就是特征参数,这个参数不变化就使用缓存文件,如果发生变化则重新下载新文件或更新信息。
  • css文件放置在head,js放置在文档尾
  • 在服务器端配置control-cache  last-modify-date
  • 在服务器配置Entity-Tag     if-none-match

  • 用更少的时间下载更多的文件,提高网站加载速度,提高用户体验,可以使用以下方法:
    • 1.css sprites----将小图片合并为一张大图片,使用background-position等css属性取得图片位置
    • 2.将资源放在多个域名下-----打开控制台,可以看到很多网站都是这么做的~
    • 3.图片延迟加载-----很多电商网站、新闻网站,尤其是用到瀑布流展示图片的时候,很多都这么做了,这个技术已经很普遍~
  • 书写代码的时候要注意优化: 
    • 1.css
      • 将可以合并的样式合并起来,比如margin-top、margin-bottom等。
      • 给img图片设置宽高,因为浏览器渲染元素的时候没有找到这两个参数,需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。
    • 2.js
      • 少改变DOM元素,少触发reflow,可以复用的代码提出来写成公共的等等……
    • 3.img
      • 优化图片,不失真的情况下尽量减少图片大小,使用iconfont等

4. 怎么学习前端? 怎么接触web新知识? 

5. 关于前后端分离:

  • 前端:负责View和Controller层。
  • 后端:只负责Model层,业务处理/数据等。

6. 关于浏览器内核(渲染引擎)

  • 先说一下浏览器的结构:
    • ①、用户界面(UI) - 包括菜单栏、工具栏、地址栏、后退/前进按钮、书签目录等,也就是能看到的除了显示页面的主窗口之外的部分;
    • ②、浏览器引擎(Rendering engine) - 也被称为浏览器内核、渲染引擎,主要负责取得页面内容、整理信息(应用CSS)、计算页面的显示方式,然后会输出到显示器或者打印机;
    • ③、JS解释器 - 也可以称为JS内核,主要负责处理javascript脚本程序,一般都会附带在浏览器之中,例如chrome的V8引擎;
    • ④、网络部分 - 主要用于网络调用,例如:HTTP请求,其接口与平台无关,并为所有的平台提供底层实现;
    • ⑤、UI后端 - 用于绘制基本的窗口部件,比如组合框和窗口等。
    • ⑥、数据存储 - 保存类似于cookie、storage等数据部分,HTML5新增了web database技术,一种完整的轻量级客户端存储技术。
    • 注:IE只为每个浏览器窗口启用单独的进程,而chrome浏览器却为每个tab页面单独启用进程也就是每个tab都有独立的渲染引擎实例。
  • 现在的主要浏览器:
    • IE、Firefox、Safari、Chrome、Opera。
    • 它们的浏览器内核(渲染引擎):
      • IE--Trident、
      • FF(Mozilla)--Gecko、
      • Safari--Webkit、
      • Chrome--Blink(WebKit的分支)、
      • Opera--原为Presto,现为Blink。
    • 因此在开发中,兼容IE、FF、Opera(Presto引擎是逐步放弃的)、Chrome和Safari中的一种即可,Safari、Chrome的引擎是相似的。

7. 浏览器加载文件(repaint/reflow)

  • 文件加载顺序
    • 浏览器加载页面上引用的CSS、JS文件、图片时,是按顺序从上到下加载的,每个浏览器可以同时下载文件的个数不同,因此经常有网站将静态文件放在不同的域名下,这样可以加快网站打开的速度。
  • reflow
    • 在加载JS文件时,浏览器会阻止页面的渲染,因此将js放在页面底部比较好。
    • 因为如果JS文件中有修改DOM的地方,浏览器会倒回去把已经渲染过的元素重新渲染一遍,这个回退的过程叫reflow
    • CSS文件虽然不影响js文件的加载,但是却影响js文件的执行,即使js文件内只有一行代码,也会造成阻塞。因为可能会有var width = $('#id').width()这样的语句,这意味着,js代码执行前,浏览器必须保证css文件已下载和解析完成。
    • 办法:当js文件不需要依赖css文件时,可以将js文件放在头部css的前面。
  • 常见的能引起reflow的行为:
    • 1.改变窗囗大小
    • 2.改变文字大小
    • 3.添加/删除样式表
    • 4.脚本操作DOM
    • 5.设置style属性
    • 等等……
  • reflow是不可避免的,只能尽量减小,常用的方法有
    • 1.尽量不用行内样式style属性,操作元素样式的时候用添加去掉class类的方式
    • 2.给元素加动画的时候,可以把该元素的定位设置成absolute或者fixed,这样不会影响其他元素
  • repaint
    • 另外,有个和reflow相似的术语,叫做repaint(重绘),在元素改变样式的时候触发,这个比reflow造成的影响要小,所以能触发repaint解决的时候就不要触发reflow……

8. 为什么利用多个域名来请求网络资源会更有效?

  • 动静分离需求,使用不同的服务器处理请求。处理动态内容的只处理动态内容,不处理别的,提高效率。CDN缓存更方便
  • 突破浏览器并发限制:相关问题: 浏览器同一时间可以从一个域名下载多少资源?(即: 浏览器并发请求数)
    • 也就是说:同一时间针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻止。不同浏览器这个限制的数目不一样。
  • Cookieless, 节省带宽,尤其是上行带宽 一般比下行要慢。
    用户的每次访问,都会带上自己的cookie ,挺大的。假如twitter 的图片放在主站域名下,那么用户每次访问图片时,request header 里就会带有自己的cookie ,header 里的cookie 还不能压缩,而图片是不需要知道用户的cookie 的,所以这部分带宽就白白浪费了。
版权声明:《 【前端】前端面试题整理,BAT大厂很简单 》为作者优选资源原创文章,转载请注明原文地址!
最后编辑:2019-12-9 13:12:06
分享到:
赞(0)
发表评论 / Comment

用心评论~

金玉良言 / Appraise
李静LV1游客
2019-12-10 08:54
干货满满!