diff --git a/README.md b/README.md index 6916be3..8e0c2c8 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,6 @@ ## FE-interview 个人收集的前端知识点、面试题和答案，参考答案仅代表个人观点，方便复习 - ### 常见问题 - **什么是web语义化，有什么好处** @@ -14,6 +13,9 @@ css命名的语义化是指：为html标签添加有意义的class，id补充未 - 搜索引擎更好地理解页面，有利于收录 - 便团队项目的可持续运作及维护 + + + - **如何进行网站性能优化** [雅虎Best Practices for Speeding Up Your Web Site](https://developer.yahoo.com/performance/rules.html) - content方面 @@ -61,6 +63,11 @@ css命名的语义化是指：为html标签添加有意义的class，id补充未 + + + + + - **什么是渐进增强** 渐进增强是指在web设计时强调可访问性、语义化HTML标签、外部样式表和脚本。保证所有人都能访问页面的基本内容和功能同时为高级浏览器和高带宽用户提供更好的用户体验。核心原则如下: @@ -71,6 +78,7 @@ css命名的语义化是指：为html标签添加有意义的class，id补充未 - 通过非侵入式、外部javascript提供增强功能 - end-user web browser preferences are respected + - **HTTP状态码及其含义** 参考[RFC 2616](http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html) - 1XX：信息状态码 @@ -120,16 +128,31 @@ css命名的语义化是指：为html标签添加有意义的class，id补充未 - **504 Gateway Timeout**: - **505 HTTP Version Not Supported**: + + + + + + + + + +
## CSS部分 + + - **CSS有哪些继承属性** - 关于文字排版的属性如：`font`, `word-break`, `letter-spacing`,`text-align`,`tex--rendering`,`word-spacing`,`white-spacing`,`text-indent`,`text-transform`,`text-shadow` - `line-height` - `color` +
- **什么是FOUC？如何避免？** Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。**解决方法**：把样式表放到文档的`head` +
+ - **如何创建块级格式化上下文（block formatting context）？有什么用** 创建规则： 1.根元素 @@ -142,24 +165,38 @@ Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默 2.不被浮动元素覆盖 3.阻止父子元素的margin折叠 + - **display, float, position的关系** 1.如果``display``为none，那么position和float都不起作用，这种情况下元素不产生框 2.否则，如果position值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。 3.否则，如果float不是none，框是浮动的，display根据下表进行调整 4.否则，如果元素是根元素，display根据下表进行调整 5.其他情况下display的值为指定值 - +总结起来：**绝对定位、浮动、根元素都需要调整``display``** ![display转换规则](http://qiu-deqing.github.io/image/display-adjust.png) + + + + + + + + + + +
+ - **外边距折叠（collapsing margins）** 毗邻的两个或多个``margin``会合并成一个margin，叫做外边距折叠。规则如下： -1.两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠 +1.两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠 2.浮动元素/inline-block元素/绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠 3.创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠 4.元素自身的margin-bottom和margin-top相邻时也会折叠 +

- **如何确定一个元素的包含块（containing block）** - 根元素的包含块叫做初始包含块，在连续媒体中他的尺寸与viewport相同并且anchored at the canvas origin；对于paged media，它的尺寸等于page area。初始包含块的direction属性与根元素相同。 @@ -169,6 +206,7 @@ Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默 - 如果祖先元素为行内元素，the containing block is the bounding box around the **padding boxes** of the first and the last inline boxes generated for that element. - 其他情况下包含块由祖先节点的**padding edge**组成 +



- **stacking context，布局规则** z轴上的默认层叠顺序如下（从下到上）： @@ -223,6 +261,8 @@ z轴上的默认层叠顺序如下（从下到上）： 1. 必须声明高度 2. windows Phone设备上不起作用 + + - **负外边距**：当元素宽度高度固定时。设置margin-top/margin-left为宽度高度一半的相反数，top:50%;left:50% 
@@ -259,7 +299,6 @@ z轴上的默认层叠顺序如下（从下到上）：
 3. 边距大小域与padding，box-sizing有关
 
     - **CSS3 Transform**居中：这是最简单的方法
-
 
 <div class="parent">
     <div class="transform-center"></div>
@@ -293,9 +332,7 @@ z轴上的默认层叠顺序如下（从下到上）：
 2. 属性需要浏览器厂商前缀
 3. 可能干扰其他transform效果
 
-
     - **table-cell**居中：
-
 
 <div class="center-container is-table">
     <div class="table-cell">
@@ -331,8 +368,7 @@ z轴上的默认层叠顺序如下（从下到上）：
     - **flexbox**居中
 
 
-
-
+






 
 ## javascript部分
 - **javascript有哪几种方法定义函数？**
@@ -344,6 +380,8 @@ z轴上的默认层叠顺序如下（从下到上）：
 
 重要参考资料：[MDN:Functions_and_function_scope](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope)
 
+













+
 - **应用程序存储和离线web应用**  
 HTML5新增应用程序缓存，允许web应用将应用程序自身保存到用户浏览器中，用户离线状态也能访问。  
 1.为html元素设置manifest属性:````，其中后缀名只是一个约定，真正识别方式是通过``text/cache-manifest``作为MIME类型。所以需要配置服务器保证设置正确  
@@ -386,6 +424,8 @@ localStorage.clear();  // remove all data
 
 

 
+








+
 - **cookie及其操作**  
     - cookie是web浏览器存储的少量数据，最早设计为服务器端使用，作为HTTP协议的扩展实现。cookie数据会自动在浏览器和服务器之间传输。
     - 通过读写cookie检测是否支持
@@ -406,16 +446,19 @@ document.cookie = 'name=aaa; path=/; domain=domain; secure';
 
 //读取cookie，访问document.cookie返回键值对组成的字符串，
 //不同键值对之间用'; '分隔。通过解析获得需要的值
-
 

 
 [cookieUtil.js](https://github.com/qiu-deqing/google/blob/master/module/js/cookieUtil.js)：自己写的cookie操作工具
 
+










+
 - **javascript有哪些方法定义对象**
     1. 对象字面量： var obj = {};
     2. 构造函数： var obj = new Object();
     3. Object.create(): var obj = Object.create(Object.prototype);
 
+

+
 - **===运算符判断相等的流程是怎样的**  
 
     1. 如果两个值不是相同类型，它们不相等
@@ -426,6 +469,13 @@ document.cookie = 'name=aaa; path=/; domain=domain; secure';
     6. 如果他们都是字符串并且在相同位置包含相同的16位值，他它们相等；如果在长度或者内容上不等，它们不相等；两个字符串显示结果相同但是编码不同==和===都认为他们不相等
     7. 如果他们指向相同对象、数组、函数，它们相等；如果指向不同对象，他们不相等
 
+
+
+
+
+
+

+
 - **==运算符判断相等的流程是怎样的**
 
     1. 如果两个值类型相同，按照===比较方法进行比较
@@ -438,27 +488,61 @@ document.cookie = 'name=aaa; path=/; domain=domain; secure';
         5. **其他所有情况都认为不相等**
 
 
+
+
+

+
 - **对象到字符串的转换步骤**
     1. 如果对象有toString()方法，javascript调用它。如果返回一个原始值（primitive value如：string number boolean）,将这个值转换为字符串作为结果
     2. 如果对象没有toString()方法或者返回值不是原始值，javascript寻找对象的valueOf()方法，如果存在就调用它，返回结果是原始值则转为字符串作为结果
     3. 否则，javascript不能从toString()或者valueOf()获得一个原始值，此时throws a TypeError
 
+
+
+
+
+
+

+
 -  **对象到数字的转换步骤**
     1. 如果对象有valueOf()方法并且返回元素值，javascript将返回值转换为数字作为结果
     2. 否则，如果对象有toString()并且返回原始值，javascript将返回结果转换为数字作为结果
     3. 否则，throws a TypeError
 
+
+
+
+
+
+
+

+
 - **<,>,<=,>=的比较规则**  
 所有比较运算符都支持任意类型，但是**比较只支持数字和字符串**，所以需要执行必要的转换然后进行比较，转换规则如下:
     1. 如果操作数是对象，转换为原始值：如果valueOf方法返回原始值，则使用这个值，否则使用toString方法的结果，如果转换失败则报错
     2. 经过必要的对象到原始值的转换后，如果两个操作数都是字符串，按照字母顺序进行比较（他们的16位unicode值的大小）
     3. 否则，如果有一个操作数不是字符串，**将两个操作数转换为数字**进行比较
 
+
+
+
+
+
+

+
 - **+运算符工作流程**
     1. 如果有操作数是对象，转换为原始值
     2. 此时如果有**一个操作数是字符串**，其他的操作数都转换为字符串并执行连接
     3. 否则：**所有操作数都转换为数字并执行加法**
 
+
+
+
+
+
+
+

+
 - **函数内部arguments变量有哪些特性，有哪些属性，如何将它转换为数组**
     - arguments所有函数中都包含的一个局部变量，是一个类数组对象，对应函数调用时的实参。如果函数定义同名参数会在调用时覆盖默认对象
     - arguments[index]分别对应函数调用时的实参，并且通过arguments修改实参时会同时修改实参
@@ -467,6 +551,9 @@ document.cookie = 'name=aaa; path=/; domain=domain; secure';
     - arguments.caller为调用当前函数的函数（已被遗弃）
     - 转换为数组：var args = Array.prototype.slice.call(arguments, 0);
     
+
+

+
 - **DOM事件模型是如何的，编写一个EventUtil工具类实现事件管理兼容**
     - DOM事件包含捕获（capture）和冒泡（bubble）两个阶段：捕获阶段事件从window开始触发事件然后通过祖先节点一次传递到触发事件的DOM元素上；冒泡阶段事件从初始元素依次向祖先节点传递直到window
     - 标准事件监听elem.addEventListener(type, handler, capture)/elem.removeEventListener(type, handler, capture)：handler接收保存事件信息的event对象作为参数，event.target为触发事件的对象，handler调用上下文this为绑定监听器的对象，event.preventDefault()取消事件默认行为，event.stopPropagation()/event.stopImmediatePropagation()取消事件传递
@@ -532,6 +619,7 @@ var EventUtil = {
 function Person()
+



- **完成一个函数，接受数组作为参数，数组元素为整数或者数组，数组元素包含整数或数组，函数返回扁平化后的数组** 如：[1, [2, [ [3, 4], 5], 6]] => [1, 2, 3, 4, 5, 6] @@ -557,6 +645,8 @@ function Person() console.log(result); +
+ - **如何判断一个对象是否为数组** 如果浏览器支持Array.isArray()可以直接判断否则需进行必要判断 @@ -575,6 +665,8 @@ function isArray(arg) { } +


+ - **请评价以下代码并给出改进意见** 
@@ -631,7 +723,7 @@ else if (window.attachEvent) {
 }
- +




- **如何判断一个对象是否为函数** @@ -655,6 +747,8 @@ function isFunction(arg) { } +
+ - **编写一个函数接受url中query string为参数，返回解析后的Object，query string使用application/x-www-form-urlencoded编码** 
@@ -718,10 +812,11 @@ console.log(parseQuery('sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#ie=UTF-8&q
  */
+



+ - **解析一个完整的url，返回Object包含域与window.location相同** 
-
 /**
  * 解析一个url并生成window.location对象中包含的域
  * location:
@@ -760,6 +855,7 @@ function parseUrl(url) {
 }
+





- **完成函数getScrollOffset返回窗口滚动条偏移量** @@ -797,6 +893,7 @@ function getScrollOffset(w) { } +

- **现有一个字符串richText，是一段富文本，需要显示在页面上。有个要求，需要给其中只包含一个img元素的p标签增加一个叫pic的class。请编写代码实现。可以使用jQuery或KISSY。** @@ -819,14 +916,15 @@ function richText(text) { +



- **请实现一个Event类，继承自此类的对象都会拥有两个方法on和trigger**
+






- **编写一个函数将列表子元素顺序反转** - 
 <ul id="target">
     <li>1</li>
@@ -847,9 +945,9 @@ function richText(text) {
 </script>
+




- **以下函数的作用是？空白区域应该填写什么** - 
 // define
 (function (window) {
@@ -880,6 +978,7 @@ define部分定义一个简单的模板类，使用{}作为转义标记，中间
 1. ``Array.prototype.slice.call(arguments, 0)``
 2. ``/\{\s*(\d+)\s*\}/g``
 
+




 
 - **编写一个函数实现form的序列化（即将一个表单中的键值序列化为可提交的字符串）**
 
@@ -949,8 +1048,9 @@ function serializeForm(form) {
 }
-- **使用原生javascript给下面列表中的li节点绑定点击事件，点击时创建一个Object对象，兼容IE和标准浏览器** +
+- **使用原生javascript给下面列表中的li节点绑定点击事件，点击时创建一个Object对象，兼容IE和标准浏览器** 
 <ul id="nav">
     <li><a href="http://11111">111</a></li>
@@ -1050,6 +1150,8 @@ EventUtil.on(nav, 'click', function (event) {
 });
+
+ - **有一个大数组，var a = ['1', '2', '3', ...]; a的长度是100，内容填充随机整数的字符串。请先构造此数组a，然后设计一个算法将其内容去重**