前端核心知识

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}就是特征参数，这个参数不变化就使用缓存文件，如果发生变化则重新下载新文件或更新信息

浏览器结构

1. 用户界面(UI)
2. 浏览器引擎(Rendering engine)
3. JS解析器
4. 网络部分
5. UI后端
6. 数据存储

浏览器加载文件

文件加载顺序

浏览器加载页面上引用的CSS、JS文件、图片时，是按顺序从上到下加载的，每个浏览器可以同时下载文件的个数不同，因此经常有网站将静态文件放在不同的域名下，这样可以加快网站打开的速度。

reflow

在加载JS文件时，浏览器会阻止页面的渲染，因此将js放在页面底部比较好。

因为如果JS文件中有修改DOM的地方，浏览器会倒回去把已经渲染过的元素重新渲染一遍，这个回退的过程叫reflow。
CSS文件虽然不影响js文件的加载，但是却影响js文件的执行，即使js文件内只有一行代码，也会造成阻塞。因为可能会有var width = $('#id').width()这样的语句，这意味着，js代码执行前，浏览器必须保证css文件已下载和解析完成。
办法：当js文件不需要依赖css文件时，可以将js文件放在头部css的前面。

常见的能引起reflow的行为：

1. 改变窗囗大小
2. 改变文字大小
3. 添加/删除样式表
4. 脚本操作DOM
5. 设置style属性

线程和进程的区别

一个程序至少有一个进程,一个进程至少有一个线程.

线程的划分尺度小于进程，使得多线程程序的并发性高。

线程是独立调度的基本单位, 进程是拥有资源的基本单位

另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。

线程在执行过程中与进程还是有区别的。

每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。

但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别

前端开发的优化问题

1. 减少http请求次数：css spirit,data uri
2. JS，CSS源码压缩
3. 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
4. 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
5. 用setTimeout来避免页面失去响应
6. 用hash-table来优化查找
7. 当需要设置的样式很多时设置className而不是直接操作style
8. 少用全局变量
9. 缓存DOM节点查找的结果
10. 避免使用CSS Expression
11. 图片预载
12. 避免在页面的主体布局中使用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