【前端】前端面试题整理

• 前端和计算机相关知识
  
  
  • 你能描述一下渐进增强和优雅降级之间的差异吗
    
  • 欣赏器兼容问题
    
  • 如何对网站的文件和资源进行优化?
    
  • 怎么学习前端?怎么接触前端新知识?
    
  • 关于前后端分离
    
  • 关于欣赏器内核(渲染引擎)
    
  • 欣赏器加载文件顺序以及repaint/reflow
    
  • 为什么使用多个域名来存储网络资源会更有效？
    
  • 进程和线程的区别
    
  • 前端开发的优化问题
    
  • Flash，Ajax各自的优缺点，使用中如何取舍？
    
  
  
• CSS
  
  
  • CSS3
    
  • css居中的方式
    
  • 请写一个简单的幻灯效果页面
    
  • 什么是无样式内容闪烁?如何避免?
    
  • display:none和visibility:hidden的区别
    
  • 解释浮动和工作原理
    
  • 清除浮动
    
  • 解释CSS Sprits,以及你要如何使用?
    
  • 你最喜好的图片替换方法是什么?你将如何使用?
    
  • 讨论CSS hacks, 条件引用或其他
    
  • 如何为有功能限制的欣赏器提供网页
    
  • 在书写高效CSS时会有哪些问题需要考虑?
    
  • 如何优化网页的打印样式?
    
  • 描述下你曾经使用过的CSS 预处理的优缺点
    
  • 假如设计中使用了非标准的字体, 你将如何实现?
    
  • 解释下欣赏器是如何判断元素是否匹配某个 CSS 选择器？
    
  • 解释一下你对盒模型的理解，以及如何在 CSS 中告诉欣赏器使用差异的盒模型来渲染你的布局。
    
  • 伪类的用法：
    
  • 描述下"reset"css文件的作用和使用它的好处
    
  • 请解释一下 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处？
    
  • block, inline和inline-block的区别
    
  • css动画和js动画的优缺点
    
  • 你用过媒体查询，或针对移动端的布局/CSS 吗？
    
  • 有哪些隐蔽内容的方法(同时还要保证屏幕阅读器可用)
    
  • CSS选择器级别
    
  • alt和title的区别
    
  • 知道bfc吗?
    
  • 行内元素，块级元素，空元素各有哪些？
    
  
  
• html
  
  
  • h5的改进:
    
  • 什么是语义化的html?
    
  • 从前端角度出发谈谈做好seo应该留意什么?
    
  • 文档类型(DOCTYPE)
    
  • 使用XHTML的局限有哪些?
    
  • 假如网页内容需要多语言,要怎么做?
    
  • data-*属性的作用
    
  • 假如把 HTML5 看作做一个开放平台，那它的构建模块有哪些？
    
  • 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
    
  • 欣赏器本地存储与服务器端存储之间的区别
    
  • sessionStorage和页面js数据对象的区别
    
  • canvas和svg的区别?
    
  • href和src的区别
    
  
  
• js
  
  
  
  • ajax, 跨域, jsonp
    
  • apply和call的用法和区别:
    
  • bind函数的兼容性
    
  • 解释下事件代理
    
  • 解释下js中this是怎么工作的?
    
  • 继承
    
  • AMD vs. CommonJS？
    
  • 什么是哈希表?
    
  • 什么是闭包? 闭包有什么作用?
    
  • 伪数组:
    
  • undefined和null的区别, 还有undeclared:
    
  • 事件冒泡机制:　　
    
  • 解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式)：function foo(){ }();?
    
  • "attribute" 和 "property" 的区别是什么？
    
  • 请指出 document load 和 document ready 两个事件的区别。
    
  • 什么是use strict? 其好处坏处分别是什么?
    
  • 欣赏器端的js包括哪几个部分?
    
  • DOM包括哪些对象?
    
  • js有哪些基本类型?
    
  • 基本类型与引用类型有什么区别?
    
  • 关于js的垃圾收集例程
    
  • ES5中, 除了函数,什么能够产生作用域?
    
  • js有几种函数调用方式?
    
  • 描述事件模型?IE的事件模型是怎样的？事件代理是什么？事件代理中怎么定位实际事件产生的目标？
    
  • js动画有哪些实现方法?
    
  • 还有什么实现动画的方法?
    
  • 面向对象有哪几个特点?
    
  • 如何判断属性来自自身对象还是原型链?
    
  • ES6新特性
    
  • 如何获取某个DOM节点，节点遍历方式
    
  • 用LESS如何给某些属性加欣赏器前缀？
    
  • js异步模式如何实现？
    
  • 事件机制，如何绑定事件处理函数
    
  • 图片预加载
    
  • 假如在同一个元素上绑定了两个click事件, 一个在捕获阶段执行, 一个在冒泡阶段执行. 那么当触发click条件时, 会执行几个事件? 执行顺序是什么?
    
  • js中怎么实现块级作用域?
    
  • 构造函数里定义function和使用prototype.func的区别？
    
  • js实现对象的深克隆
    
  
  
• jquery问题
  
• 一些编程题
  
  
  
  • 匿名函数变量
    
  • this指向
    
  • 定时
    
  • 点击一个ul的五个li元素，分别弹出他们的序号，怎么做？
    
  
  
• js算法题
  
  
  
  • js实现数组去重怎么实现?
    
  • 
    
  
  

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

• 问题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
  

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

• 文件合并（同上题“假若你有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调用都接纳缓存调用方式，一般接纳附加特征参数方式实现，留意其中的[/code]
    
  
  

• 只提供符合Web标准的页面
  
• 提供另一个符合那些欣赏器标准的页面
  
• 兼容: 两种思路:
  
  
  
  • 渐进增强: 提供一个可用的原型，后来再为高级欣赏器提供优化
    
  • 优雅降级: 据高级欣赏器提供一个版本，然后有功能限制的欣赏器只需要一个刚好能用的版本
    
  
  
• 相关技能:
  
  
  
  • Media Query
    
  • CSS hack
    
  • 条件判断除IE外都可识别
    
  
  

• 结构清晰, 便于扩展
  
• 可以方便屏幕欣赏器私有语法差异
  
• 可以轻松实现多重继承
  
• 完全兼容css代码
  

• 图片替代
  
• web : fonts在线字库
  
• @font-face
  

作者：张靖超链接：https://www.zhihu.com/question/24959507/answer/29672263来源：知乎著作权归作者所有，转载请联系作者获得授权。

• 
  
  
  
  • W3C盒子模型——属性高（height）和属性宽（width）这两个值不包含 添补（padding）和边框（border　　）
    
  • IE盒子模型——属性高（height）和属性宽（width）这两个值包含 添补（padding）和边框（border）
    
  
  

• 将页面设为“标准模式”。添加对应的dtd标识
  
• 使用hack或者在外面套上一层wrapper
  

• 期待能够指出它的负面影响，或者提到它的一个更好的替换者"normalize"   normalize.css是一个可以定制的css文件，它让差异的欣赏器在渲染元素时形式更统一。
  

• 起新行
  
  
  
  • block元素会独占一行, 多个block元素会各自新起一行. 默认情况下, block元素宽度自动填满其父元素宽度
    
  • inline元素不会独占一行, 多个相邻的行内元素会排列在同一行里, 直到一行排列不下, 才会新换一行, 其宽度随元素的内容而变化
    
  
  
• 设置宽高
  
  
  
  • block元素可以设置width, height属性. 块级元素即使设置了宽度, 仍旧独占一行
    
  • inline元素设置width, height无效
    
  
  
• 内外边距
  
  
  
  • block元素可以设置margin和padding属性
    
  • inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都会产生边距效果. 但是数值方向的 margin/padding-top/bottom不会产生边距效果
    
  
  
• 包含
  
  
  
  • block可以包含inline和block元素,而inline元只能包含inline元素
    
  
  
• 而display: inline-block, 则是将对象呈现为inline对象, 但是对象的内容作为block对象呈现. 之后的内联对象会被排列到一行内. 好比我们可以给一个link(a元素)inline-block的属性, 使其既有block的高宽特性又有inline的同行特性
  

• 优点：
  
  
  
  • 1.在性能上会轻微好一些，欣赏器会对CSS3的动画做一些优化（好比专门新建一个图层用来跑动画）
    
  • 2.代码相对简单
    
  
  
• 缺点：
  
  
  
  • 1.在动画控制上不够灵活
    
  • 2.兼容性不好
    
  • 3.部分动画功能无法实现（如滚动动画，视差滚动等）
    
  
  

• 优点：
  
  
  
  • 1.控制能力很强，可以单帧的控制、变换
    
  • 2.兼容性好，写得好完全可以兼容IE6，且功能强大。
    
  
  
• 缺点：
  
  
  
  • 计算没有css快，另外经常需要依靠其他的库。
    
  
  

• 所以，不复杂的动画完全可以用css实现，复杂一些的，或者需要交互的时候，用js会靠谱一些~
  

• @media screen and (min-width: 400px) and (max-width: 700px) { … }
  
• @media handheld and (min-width: 20em), screen and (min-width: 20em) { … }
  

• 1.display:none;的缺陷
  
  
  
  • 搜索引擎可能认为被隐蔽的笔墨属于垃圾信息而被忽略
    
  • 屏幕阅读器（是为视觉上有停滞的人设计的读取屏幕内容的程序）会忽略被隐蔽的笔墨。
    
  
  
• 2.visibility: hidden ;的缺陷
  
  
  
  • 隐蔽的内容会占据他所应该占据物理空间
    
  
  
• 3.overflow:hidden;一个比较合理的方法
  
  
  
  • 例：.texthidden { display:block; overflow: hidden; width: 0; height: 0; }
    
    
    
    • 将宽度和高度设定为0，然后超过部分隐蔽，就会弥补上述一、二方法中的缺陷，也达到了隐蔽内容的目标
      
    
    
  
  

• 1.假如样式是行内样式（通过Style=””定义），那么a=1
  
• 2.b为ID选择器的总数
  
• 3.c为Class类选择器的数量。
  
• 4.d为类型选择器的数量
  
• 5.属性选择器，伪类选择器和class类选择器优先级一样，伪元素选择器和类型选择器一样
  
  
• 6.!important 权重最高，比 inline style 还要高。
  

• Alt是img的特有属性, 或与配合使用，规定图像的替代文本. 假如无法显示图像, 欣赏器将显示替代文本. 用于图片无法加载显示、读屏器阅读图片，可提高图片可 访问性，搜索引擎会重点分析。最长可包含1024个字符,
  
• Title为元素提供附加的提示信息，用于鼠标滑到元素上的时候显示。其值可以比alt属性值设置的更长, 但是有些欣赏器会截断过长的笔墨.
  

• BFC的生成:
  
  
  
  • 根元素
    
  • float的值不为none
    
  • overflow的值不为visible
    
  • display的值为 inline-block, table-cell, table-caption
    
  • position的值为absolute或fixed
    
  
  
• BFC的约束规则
  
  
  
  • 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
    
  • 生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。
    
  • 分解:
    
  • 
    
    • 内部的Box会在垂直方向上一个接一个的放置
      
    • 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
      
    • 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
      
    • BFC的区域不会与float的元素区域重叠
      
    • 计算BFC的高度时，浮动子元素也参与计算
      
    • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
      
    
    
  
  
• BFC在布局中的应用
  
  
  
  • 不和浮动元素重叠:
    
    
    
    • 假如一个浮动元素后面跟着一个非浮动元素, 就会产生覆盖
      
    
    
  • 防止margin重叠:
    
    
    
    • 同一个BFC中的两个相邻Box才会发生重叠与方向无关，不过由于上文提到的第一条限制，我们甚少看到水平方向的margin重叠。这在IE中是个例外，IE可以设置write-mode
      
    
    
  • 解决浮动相关问题
    
    
    
    • 父元素: overflow:hidden    IE: zoom:1(hasLayout)
      
    • 根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题。实际上只要让父元素生成BFC即可，并不只有这两种方式。
      
    
    
  • 多栏布局
    
    
    
    • 好比左右两栏宽度固定, 中间栏自适应 则中间栏设置 overflow:hidden生成BFC
      
    
    
  
  
• IE中类似概念: hasLayout
  

• 行内元素有：span img input select strong
  
• 块级元素有：div ul ol dl dt dd h1 h2 h3 h4 p...
  
• 常见的空元素：br hr img input link meta  base area command embed keygen param source track wbr....
  

• 新元素
  
  
  
  • 画布canvas: HTML5  元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成
    
  • 音频audio
    
  • 视频video
    
  • 语义性: article,  nav ,  footer, section, aside, hgroup等.
    
  • 时间time
    
  
  
• 新属性
  
  
  
  • 拖放: draggable   
    <img draggable="true">
    
    
  • 可编辑: contenteditable
    
  
  
• 新事件
  
  
  
  • 拖放 ondrag ondrop
    
  • 关闭页面 onunload
    
  • 窗口大小改变 onresize
    
  
  
• 取消了一些元素: font center等
  
• 新的DOCTYPE声明
  
• 完全支持CSS3
  
• Video和Audio
  
• 2D/3D制图
  
• 本地存储
  
• 本地SQL数据
  
• Web应用
  

• what?
  
  
  
  • 根据内容的结构（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让欣赏器的爬虫和机器很好地解析。
    
  
  
• why?
  
  
  
  • 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
    
  • 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
    
  • 有利于SEO：和搜索引擎创建良好沟通，有助于爬虫抓取更多的有效信息：爬虫依靠于标签来确定上下文和各个关键字的权重
    
  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
    
  • 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
    
  
  
• how?
  
  
  
  • 尽可能少的使用无语义的标签div和span；
    
  • 在语义不显着时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
    
  • 不要使用纯样式标签，如：b、font、u等，改用css设置。
    
  • 需要强调的文本，可以包含在strong或者em标签中（欣赏器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
    
  • 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
    
  • 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
    
  • 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
    
  
  

• 语义化html标签
  
• 合理的title, description, keywords;
  
• 重要的html代码放前面
  
• 少用iframe, 搜索引擎不会抓取iframe中的内容
  
• 图片加上alt
  

• 作用: doctype声明位于文档中最前面的位置，处于标签之前，告知欣赏器使用的是哪种规范。
  
• 类型: 三种: Strict、Transitional 以及 Frameset
  
• 假如不声明: 不写doctype，欣赏器会进入quirks mode （混杂模式）。即，假如不声明doctype，欣赏器不引入w3c的标准，那么早期的欣赏器会按照自己的解析方式渲染页面。欣赏器接纳自身方式解析页面的行为称为"quirks mode（混杂模式也称怪异模式）"；接纳w3c方式解析就是"strict mode（标准模式）"。 假如完全接纳strictmode就不会出任何的差错，但这样会降低程序的容错率，加重开发人员的难度
  
• 用哪种:
  
  
  
  • 没有doctype声明的接纳quirks mode解析
    
  • 对于有doctype的大多数接纳standard mord。
    
  • 特殊情况：
    
    
    
    • 对于那些欣赏器不能识别的doctype ,欣赏器接纳quirks mode；
      
    • 没有声明DTD或者html版本声明低于4.0接纳quirks mode，其他使用standard mode；
      
    • ie6中，假如在doctype声明前有一个xml声明(好比:)，则接纳quirks mode解析
      
    
    
  
  
• 标准模式与怪异模式的区别:
  
  
  
  • 标准模式：欣赏器根据规范呈现页面
    
  • 混杂模式（怪异模式）：页面以一种比较宽松的兼容方式显示。
    
  • 他们最大的差异是对盒模型的解析。
    
    
    
    • 在strict mode中 ：width是内容宽度 ，也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width +  margin-right;
      
    • 在quirks mode中 ：width则是元素的实际宽度 ，内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + 　border-right-width)
      
    
    
  
  

• XHTML较为严格，标签必须闭合，必须要body，head等
  
• 假如页面使用 'application/xhtml+xml' 一些老的欣赏器并不兼容