转载请注明出处: https://github.com/qiu-deqing/FE-interview

转载请注明出处: https://github.com/qiu-deqing/FE-interview

Table of Contents generated with DocToc

• FE-interview
  • $HTML， HTTP，web综合问题
    • 常见排序算法的时间复杂度,空间复杂度
    • 前端需要注意哪些SEO
    • web开发中会话跟踪的方法有哪些
    • 的title和alt有什么区别
    • doctype是什么,举例常见doctype及特点
    • HTML全局属性(global attribute)有哪些
    • 什么是web语义化,有什么好处
    • HTTP method
    • 从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)
    • HTTP request报文结构是怎样的
    • HTTP response报文结构是怎样的
    • 如何进行网站性能优化
    • 什么是渐进增强
    • HTTP状态码及其含义
  • $CSS部分
    • CSS选择器有哪些
    • css sprite是什么,有什么优缺点
    • display: none;与visibility: hidden;的区别
    • css hack原理及常用hack
    • specified value,computed value,used value计算方法
    • link与@import的区别
    • display: block;和display: inline;的区别
    • PNG,GIF,JPG的区别及如何选
    • CSS有哪些继承属性
    • IE6浏览器有哪些常见的bug,缺陷或者与标准不一致的地方,如何解决
    • 容器包含若干浮动元素时如何清理(包含)浮动
    • 什么是FOUC?如何避免
    • 如何创建块级格式化上下文(block formatting context),BFC有什么用
    • display,float,position的关系
    • 外边距折叠(collapsing margins)
    • 如何确定一个元素的包含块(containing block)
    • stacking context,布局规则
    • 如何水平居中一个元素
    • 如何竖直居中一个元素
  • $javascript概念部分
    • DOM元素e的e.getAttribute(propName)和e.propName有什么区别和联系
    • offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
    • XMLHttpRequest通用属性和方法
    • focus/blur与focusin/focusout的区别与联系
    • mouseover/mouseout与mouseenter/mouseleave的区别与联系
    • sessionStorage,localStorage,cookie区别
    • javascript跨域通信
    • javascript有哪几种数据类型
    • 什么闭包,闭包有什么用
    • javascript有哪几种方法定义函数
    • 应用程序存储和离线web应用
    • 客户端存储localStorage和sessionStorage
    • cookie及其操作
    • javascript有哪些方法定义对象
    • ===运算符判断相等的流程是怎样的
    • ==运算符判断相等的流程是怎样的
    • 对象到字符串的转换步骤
    • 对象到数字的转换步骤
    • <,>,<=,>=的比较规则
    • +运算符工作流程
    • 函数内部arguments变量有哪些特性,有哪些属性,如何将它转换为数组
    • DOM事件模型是如何的,编写一个EventUtil工具类实现事件管理兼容
    • 评价一下三种方法实现继承的优缺点,并改进
  • $javascript编程部分
    • 请用原生js实现一个函数,给页面制定的任意一个元素添加一个透明遮罩(透明度可变,默认0.2),使这个区域点击无效,要求兼容IE8+及各主流浏览器,遮罩层效果如下图所示:
    • 请用代码写出(今天是星期x)其中x表示当天是星期几,如果当天是星期一,输出应该是"今天是星期一"
    • 下面这段代码想要循环延时输出结果0 1 2 3 4,请问输出结果是否正确,如果不正确,请说明为什么,并修改循环内的代码使其输出正确结果
    • 现有一个Page类,其原型对象上有许多以post开头的方法(如postMsg);另有一拦截函数chekc,只返回ture或false.请设计一个函数,该函数应批量改造原Page的postXXX方法,在保留其原有功能的同时,为每个postXXX方法增加拦截验证功能,当chekc返回true时继续执行原postXXX方法,返回false时不再执行原postXXX方法
    • 完成下面的tool-tip
    • 编写javascript深度克隆函数deepClone
    • 补充代码,鼠标单击Button1后将Button1移动到Button2的后面
    • 网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示"××年还剩××天××时××分××秒"
    • 完成一个函数,接受数组作为参数,数组元素为整数或者数组,数组元素包含整数或数组,函数返回扁平化后的数组
    • 如何判断一个对象是否为数组
    • 请评价以下事件监听器代码并给出改进意见
    • 如何判断一个对象是否为函数
    • 编写一个函数接受url中query string为参数,返回解析后的Object,query string使用application/x-www-form-urlencoded编码
    • 解析一个完整的url,返回Object包含域与window.location相同
    • 完成函数getViewportSize返回指定窗口的视口尺寸
    • 完成函数getScrollOffset返回窗口滚动条偏移量
    • 现有一个字符串richText,是一段富文本,需要显示在页面上.有个要求,需要给其中只包含一个img元素的p标签增加一个叫pic的class.请编写代码实现.可以使用jQuery或KISSY.
    • 请实现一个Event类,继承自此类的对象都会拥有两个方法on,off,once和trigger
    • 编写一个函数将列表子元素顺序反转
    • 以下函数的作用是?空白区域应该填写什么
    • 编写一个函数实现form的序列化(即将一个表单中的键值序列化为可提交的字符串)
    • 使用原生javascript给下面列表中的li节点绑定点击事件,点击时创建一个Object对象,兼容IE和标准浏览器
    • 有一个大数组,var a = ['1', '2', '3', ...];a的长度是100,内容填充随机整数的字符串.请先构造此数组a,然后设计一个算法将其内容去重

FE-interview

个人收集的前端知识点、面试题和答案，参考答案仅代表个人观点，方便复习，目录如下，通过文档内搜索目录可快速定位章节

$HTML， HTTP，web综合问题

常见排序算法的时间复杂度,空间复杂度

前端需要注意哪些SEO

1. 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
2. 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
3. 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
4. 重要内容不要用js输出：爬虫不会执行js获取内容
5. 少用iframe：搜索引擎不会抓取iframe中的内容
6. 非装饰性图片必须加alt
7. 提高网站速度：网站速度是搜索引擎排序的一个重要指标

web开发中会话跟踪的方法有哪些

1. cookie
2. session
3. url重写
4. 隐藏input
5. ip地址

的title和alt有什么区别

1. title是global attributes之一，用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。
2. alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

doctype是什么,举例常见doctype及特点

1. 声明必须处于HTML文档的头部，在标签之前，HTML5中不区分大小写
2. 声明不是一个HTML标签，是一个用于告诉浏览器当前HTMl版本的指令
3. 现代浏览器的html布局引擎通过检查doctype决定使用兼容模式还是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。
4. 在HTML4.01中声明指向一个DTD，由于HTML4.01基于SGML，所以DTD指定了标记规则以保证浏览器正确渲染内容
5. HTML5不基于SGML，所以不用指定DTD

常见dotype：

1. HTML4