前端面试基础总结

引言

作为一个刚毕业的大学生，出来求职面试必不可少，在6月份的面试中很多公司的笔试题中都提到很多相同的知识要点，再结合网上查找的一些资料，写下了这篇文章来帮助更多准备做前端的初学者，让准备深入前端的初学者们节约下更多的时间取探索自己想要深入的一方面。

面试笔试涉及到的领域

HTML/CSS
对web标准的理解、浏览器的内核差异、兼容性、CSShack、布局、盒子模型、选择器的优先级、HTML3、CSS3、移动端适应。
JavaScript
数据类型、对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Node.js、JSON、ajax。
其他
HTTP、安全、正则表达式、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯。

作为前端工程师必须知道的知识点：

1. DOM结构 – 两个节点之间的关系
2. DOM操作 – 如何增加、删除、修改、插入、移动、复制等
3. 事件 – 如何使用事件，IE和标准DOM模型之间的差别
4. XMLHttpRequest – 这是什么，如何完整的执行一次GET请求
5. 严格模式与混杂模式 – 如何触发他们，他们有什么区别
6. 盒模型 – 外边距、内边距和边框，IE8以下的盒模型和标准盒模型有什么区别
7. 块级元素和行内元素 – 怎么用CSS控制他们
8. 浮动元素 – 怎么使用他们，如何解决浮动元素产生的我内天
9. HTML和XHTML – 他们有什么区别
10. JSON – 作用、用途、设计结构

HTML

1. Doctype的作用？严格模式与混杂模式的区别。
   
   • 位于文档的最前面，处于HTML标签之前，用来告诉浏览器用什么文档规范来解析这个文档。
   • 严格模式的排版和JS运作模式是按照浏览器的最高标准运行的
   • 混杂模式是一宽松的向后兼容的模式来运行的，模式老式浏览器的模式以防止页面无法运行。
   • DOCTYPE不存在或者格式不正确的时候会导致浏览器以混杂模式执行。
2. 行内元素、块级元素、空元素分别有哪些？
   
   • 每个元素都有display属性，用来规范该元素以何种规范显示，比如如果display值为block，则元素显示为块级元素，如果display值为inline，则为行内元素。
   • 行内元素：input、img、select
   • 块级元素：div、section、article、p、ul、li
   • 空元素：input、img、link、meta
3. link和@import的区别。
   
   • link是XHTML元素，@import是在CSS中定义的
   • link不存在兼容问题，@import在低版本浏览器中无法显示
   • link在页面加载的时候会同时加载，@import在整个页面运行完以后再加载。
   • link方式的权重高于@import
   • link可以加载除CSS以外的其他文档，@import只能加载CSS
4. 常见的浏览器内核有哪些？
   
   • IE trident内核
   • FireFox Gecko内核
   • Chrome Blink内核（webkit的一个分支）
   • Safari webkit内核
   • Opera 以前为Presto内核，现在和谷歌一起为Blink内核
5. 常见的兼容问题有哪些？
   
   • PNG24位的图片在IE6浏览器上会出现背景，解决方式是改为PNG8
   • 浏览器的默认margin和padding不同，解决方法是加一个*{margin:0;padding:0}来统一
   • IE6的双边距bug，当设置块元素float后，又设置了margin，后面有元素出现时margin会比设置的大。解决方法：设置IE6下的display为inline,_display:inline,_只有在IE6下会识别。
   • IE下，可以使用普通方法获取自定义属性，也可以使用getAttribute()方法获得自定义属性，在FireFox下只能使用getAttribute()获得自定义属性，解决方法，统一用getAttribute()方法。
   • 在IE下，event对象有x,y属性，但是没有pageX,pageY属性，FireFox下event有pageX,pageY属性，没有x,y属性。解决方法：条件注释，缺点是在IE下可能会产生额外的HTTP请求。
   • Chrome中文界面下会将小于12px的字体默认显示为12px，解决方法：在CSS中加入-webkit-text-size-adjust:none;
   • 超链接在被点击访问过以后就不显示了，不在具有hover和active属性，这是CSS属性顺序排列错误，争正确的排列顺序为：link-visited-hover-active
6. HTML5有哪些新特性，移除了哪些元素，如何处理HTML5的新标签兼容问题。
   
   • HTML5已不在是SGML的子集，主要是集图像、音频、视频、位置、存储、多任务等功能的增加
     
     • 绘画canvas、用于播放音频的video、播放视频的audio、本地离线存储localStorage、sessionStorage。
     • 语义化更好的元素：article、section、header、footer、nav
     • 表单控件：calendar、date、time、email、url
     • 新的技术：webworker、websocket、Geolocation
   • 移除的元素：
     
     • 纯表现的元素：basefont、big、center、strong、font
     • 可能产生负作用的元素：frame、frameset、noframes
   • 支持HTML5的新标签
     
     • IE6/7/8下可以通过document.createElement方法产生新的标签，利用这个方法让浏览器支持HTML5的新标签。

7. 对语义化的理解

   • 用正确的标签做正确的事情
   • html语义化就是为了让内容结构化，便于浏览器，搜索引擎的解析
   • 在没有CSS的情况下也会显示出比较清晰的结构，容易阅读
   • 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO
   • 便于阅读源码的人对网站进行分块，便于团队开发和维护
8. HTML5的离线存储
   
   • localStroage 长期数据存储，浏览器关闭后数据不会丢失
   • sessionStroage 数据在浏览器关闭后自动删除
9. iframe有哪些缺点，如何解决
   
   • iframe会阻塞主页面的onload事件
   • iframe会影响页面的并行加载（因为iframe和主页面共享一个连接池，而浏览器对相同域的连接有限制）。
   • 解决方法：通过javascript动态的为iframe添加src属性，可以绕开上面两个缺点。
10. 描述一下cookie、sessionStroage、localStroage的区别
    
    • cookie在浏览器和服务器之间来回传递，sessionStroage和localStroage不会。
    • cookie的大小限时为4K，sessionStroage和localStroage存储空间更大
    • sessionStroage和localStroage有很多借口，cookie没有
    • sessionStroage和localStroage有各自独立的存储空间

CSS

1. 介绍一个CSS的盒模型
   
   • 盒模型包括IE盒模型和W3C标准盒模型，IE盒模型中content包括了padding和border
   • 盒模型：content、padding、border、margin

2. CSS选择符有哪些？哪些属性可以继承哪些属性不能继承？优先级

   • 按选择符权重排列：

     • id选择器 #id
     • 类选择器 .class
     • 标签选择器 div,p,h1
     • 相邻兄弟选择器 p+li
     • 子元素选择器 li>a
     • 后代选择器 ul li
     • 通配符选择器 *
     • 属性选择器 a[href=”test”]
     • 伪类选择器 a:hover

   • 可继承的样式：font-size,color,font-family

   • 不可继承的样式：marging,padding,border,width,height
   • 优先级：!important>id>class>标签
   • 同样权重下以最近的为准
   • !important比内联样式权重高
3. CSS3新增了哪些伪类
   
   • p:first-of-type
   • p:last-of-type
   • p:only-of-type
   • p:nth-child(n)
4. 如何居中一个div
   
   • 给div设置宽度和高度，然后margin:auto

div {
    width:200px;
    height:200px;
    margin:auto;
    background:#E47B7D;
}

5.如何居中一个浮动的元素

div {
    float:left;
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
    background:#E47B7D;
}

1. display的值主要有哪些，分别有什么意义
   
   • block，显示为块级元素
   • inline，显示为行内元素
   • inline-block，显示为内联元素
   • none，不显示
2. position的值有哪些，他们有什么区别
   
   • static，缺省值，不进行定位。
   • relative，相对定位，元素会根据自己原本所在的位置进行定位。
   • absolute，绝对定位，元素会根据自己第一个有定位（static除外）的祖先元素进行定位
   • fixed，绝对定位，元素会根据浏览器的位置进行定位。
3. CSS3有哪些新特性
   
   • 圆角，阴影，多背景，背景定位
   • 过渡，渐变，多列
   • 媒体查询，弹性盒子
4. 为什么要初始胡CSS样式
   
   • 因为每个浏览器对有些标签的默认值是不一样的，不初始化的话会在各个浏览器中显示的效果不一样。
   • 初始化会对SEO有一定的影响，鱼和熊掌不可兼得，力求影响最小的情况下初始化。