Promise
Promise对象代表一个异步操作，有三种状态
- Pending
- Resolved
- Rejected
Promise缺点是无法取消，pending的进度无法获取
基本api:
Promise.resolve()
Promise.reject()
Promise.reject()
Promise.prototype.then()
Promise.prototype.catch()
Promise.all()//所有的完成
Promise.race()//竞速 完成一个即可
block, inline和inline-block的区别
- 起新行
- 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的同行特性
Ajax缓存
Ajax调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的<script src=”xxx.js?{VERHASH}”，{VERHASH}就是特征参数，这个参数不变化就使用缓存文件，如果发生变化则重新下载新文件或更新信息
浏览器结构
- 用户界面(UI)
- 浏览器引擎(Rendering engine)
- JS解析器
- 网络部分
- UI后端
- 数据存储
浏览器加载文件
文件加载顺序
浏览器加载页面上引用的CSS、JS文件、图片时，是按顺序从上到下加载的，每个浏览器可以同时下载文件的个数不同，因此经常有网站将静态文件放在不同的域名下，这样可以加快网站打开的速度。
reflow
在加载JS文件时，浏览器会阻止页面的渲染，因此将js放在页面底部比较好。
因为如果JS文件中有修改DOM的地方，浏览器会倒回去把已经渲染过的元素重新渲染一遍，这个回退的过程叫reflow。
CSS文件虽然不影响js文件的加载，但是却影响js文件的执行，即使js文件内只有一行代码，也会造成阻塞。因为可能会有var width = $('#id').width()这样的语句，这意味着，js代码执行前，浏览器必须保证css文件已下载和解析完成。
办法：当js文件不需要依赖css文件时，可以将js文件放在头部css的前面。
常见的能引起reflow的行为：
- 改变窗囗大小
- 改变文字大小
- 添加/删除样式表
- 脚本操作DOM
- 设置style属性
线程和进程的区别
一个程序至少有一个进程,一个进程至少有一个线程.
线程的划分尺度小于进程，使得多线程程序的并发性高。
线程是独立调度的基本单位, 进程是拥有资源的基本单位
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。
每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。
但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别
前端开发的优化问题
- 减少http请求次数：css spirit,data uri
- JS，CSS源码压缩
- 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
- 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
- 用setTimeout来避免页面失去响应
- 用hash-table来优化查找
- 当需要设置的样式很多时设置className而不是直接操作style
- 少用全局变量
- 缓存DOM节点查找的结果
- 避免使用CSS Expression
- 图片预载
- 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢
display:none 和 visibility: hidden的区别
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
CSS预处理器
基于 CSS 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问题：
语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。
选择器引用&
用 & 在嵌套的规则集中引用上层的选择器
元素分类
- 行内元素有：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....
搜索引擎优化SEO
- 语义化html标签
- 合理的title, description, keywords;
- 重要的html代码放前面
- 少用iframe, 搜索引擎不会抓取iframe中的内容
- 图片加上alt
Doctype
- 作用: 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声明(比如:<?xml version="1.0" encoding="iso-8859-1"?>)，则采用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)
cookies，sessionStorage 和 localStorage 的区别
- cookie:
- cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
- cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
- sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
- 存储大小：
- cookie数据大小不能超过4k。
- sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
- 有期时间：
- localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
- sessionStorage 数据在当前浏览器窗口关闭后自动删除。
- cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
- 作用域不同:
- sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
- localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
- Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
- Web Storage 的 api 接口使用更方便。
canvas和svg的区别
- svg:
- SVG是一种使用XML描述2D图形的语言
- SVG基于XML, 这意味着SVG DOM中的每个元素都是可用的. 所以可以为每个元素附加JavaScript事件处理器
- 在SVG中, 每个被绘制的图像均被视为对象. 如果SVG对象的属性发生变化, 那么浏览器能够自动重现图像
- Canvas
- Canvas通过js来绘制2D图形
- Canvas是逐像素进行渲染的
- 在Canvas中, 一旦图形被绘制完成, 它就不会继续得到浏览器的关注. 如果其位置发生变化, 那么整个场景也需要重新绘制, 包括任何或许已被图形覆盖的对象.
- 区别
- Canvas支持分辨率, SVG不支持
- Canvas不支持事件处理器, SVG支持
- Canvas只有弱的文本渲染能力, 而SVG最适合带有大型渲染区域的应用程序(比如谷歌地图)
- Canvas能够以.png或.jpg格式保存结果图像
- SVG的复杂度过高的话会减慢渲染速度(任何过度使用DOM的应用都不快)
- Canvas最适合图像密集型的游戏, 其中的许多对象会被频繁重绘. 而SVG不适合游戏应用
- Canvas是基于位图的图像,它不能够改变大小, 只能缩放显示; SVG是基于矢量的, 所以它能够很好地处理图形大小的改变
- Canvas提供的功能更原始, 适合像素处理, 动态渲染和大数据量绘制; SVG功能更完善, 适合静态图片显示, 高保真文档查看和打印的应用场景
- 绘制Canvas对象后, 不能使用脚本和CSS对它进行修改; 而SVG对象是文档对象模型的一部分, 所以可以随时使用脚本和CSS修改它们
src和href的区别
- src指向外部资源的位置, 用于替换当前元素, 比如js脚本, 图片等元素
- href指向网络资源所在的位置, 用于在当前文档和引用资源间确定联系, 加载css
