前端知识大纲

Question

HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。

JavaScript： 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。

其他： HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯

HTML

web storage 与 cookie的区别

• cookie大小受限，且每次发送请求都会把cookie带上，造成带宽浪费；
• cookie需要指定作用域，不能跨域调用；
• cookie的作用是与服务器进行交互，是http规范的一部分
• web storage是为了更大容量存储设计的

iframe

iframe 优点

• 解决加载缓慢的第三方内容如图标和广告等的加载问题
• Security sandbox
• 并行加载脚本

iframe 缺点

• iframe会阻塞主页面的Onload事件；
• 即时内容为空，加载也需要时间
• 没有语意

CSS

link 与 @import

• link属于HTML标签，而@import是CSS提供的;
• 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
• import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
• link方式的样式的权重 高于@import的权重.

CSS 的盒子模型

• IE 盒子模型、标准 W3C 盒子模型
• IE的content部分包含了 border 和 pading;
• 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)

优化

减少加载时间

• 优化图片；
• 选择图片格式；
• 优化css(压缩合并css)；
• 网址后加斜杠；
• 减少http请求(合并图片, 合并文件).

JavaScript

javascript 延迟加载

defer、async、动态创建DOM方式(创建script, 插入到DOM中, 加载完毕后callback)、按需异步加载js

document.write 与 innerHTML

document.write只能重绘整个页面, innerHTML可以重绘页面的部分

javascript 创建对象的方式

• 工厂模式
• 构造函数模式
• 原型模式
• 混合构造函数和原型模式
• 动态原型模式
• 寄生构造函数模式

javascript 继承方法

• 原型链继承
• 借用构造函数继承
• 组合继承(原型+借用构造)
• 原型式继承
• 寄生式继承
• 寄生组合式继承