作用域
预编译 --》
{
1、创建上下文（AO对象）
2、找将形参及变量申明,（重复的不用列），将形参名及变量作为AO的属性，值为undefined
3、将形参值和实参值统一
4、在函数体里找函数申明，值赋予函数体
}
例：
function fn(a,b){
console.log(a); //function a(){}
console.log(b); //undefined
var b = 234;
console.log(b) //234;
a = 123;
console.log(a); //123
function a(){}
var a;
b = 234;
var b = function(){}
console.log(a); //123
console.log(b); //function(){}
}
fn(1);
第一步：OA {
第二部：a: undefined
b:undefined
第三部： a:1,
b: undefined
第四部：a:function a(){}
b:undefined
}
src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
以上是比较官方的，然而我所理解的是
href:是到哪里去
src：是从哪里来
解决 display:inline-block 之间显示间隙
1、移除空格（div之间回车）
2、使用margin 负值
3、使用 font-size:0（给最外面的div把font-size设为0在两个小的div里面设置自身字体大小）
4、letter-spacing
5、word-spacing
display:none和visibility:hidden的区别
display:none:隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢， 就当他从来不存在。(通俗来说，就是display的隐藏，不仅仅是隐藏就连他原本的位置也会消失)
visibility:hidden:隐藏对应的元素，但是在文档布局中仍保留原来的空间。
（然而这个隐藏只是隐藏了元素，并没有去掉他原本的位置）
HTML的< >&"©分别是<，>，&，"，©;的转义字符
<script defer src="/js/logDiv.js"></script>，JS 文件的内容是：
const div = document.querySelecot('div');
console.log(div);
defer 属性MDN 对此的描述是用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行。设置这个属性，能保证 DOM 解析后马上打印出 div。
sass生成css文件的同时，所生成的.map文件是做什么用途的
sass文件相当于源文件，css相当于编译后的文件，当检查到页面问题的时候，你看到的是css，但是需要修改的是sass文件，这个map就是两个文件的对应关系表。
1、 JavaScript包括哪些数据类型？
参考答案：javascript中包含6种数据类型：undefined、null、string、 number、boolean和object。其中，前5种是原始数据类型，object是对象类型。
object类型中包括Object、 Function、String、Number、Boolean、Array、Regexp、Date、Globel、Math、Error，以及宿主环境提供的object类型。
2、 列举所知道的图片格式，说明其应用场景和优缺点
参考答案：
（1）bmp(位图)格式：它是Windows操作系统中的标准图像文件格式，能够被多种Windows应用程序所支持。图像信息较丰富，几乎不进行压缩，但由此导致了它与生俱生来的缺点——占用磁盘空间过大。
（2）gif格式：可以同时存储若干幅静止图象进而形成连续的动画。目前Internet上大量采用的彩色动画文件多为这种格式的文件。缺点是不能存储超过256色的图像。
（3）jpeg格式：文件扩展名为.jpg或.jpeg，其压缩技术十分先进，可以用最少的磁盘空间得到较好的图像质量。应用非常广泛，特别是在网络和光盘读物上。
（4）png格式：一种新兴的网络图像格式，结合GIF及JPG两家之长，是目前保证最不失真的格式，它汲取了GIF和JPG二者的优点，存贮形式丰富。PNG的缺点是不支持动画应用效果。
3、 <img>元素的alt和title有什么异同？
参考答案：在不同浏览器里面表现有些不同。在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。
4、 请简单实现双向数据绑定mvvm。
5、 用css、html编写一个两列布局的网页，要求右侧宽度为200px，左侧自动扩展。
常见技术问题总结如下：
1、 web前端产品的开发流程
-
根据产品的定位、用户群，确定配色，在纸上设计整体布局；
-
png或者psd出效果图，切出需要的小图片；
-
手写代码div+css构造出页面，然后根据功能写脚本。
2、 说一说事件流
事件流分为两种，捕获事件流和冒泡事件流。
-
捕获事件流从根节点开始执行，一直往子节点查找执行，直到查找执行到目标节点；
-
冒泡事件流从目标节点开始执行，一直往父节点冒泡查找执行，直到查到到根节点。
事件流分为三个阶段，一个是捕获节点，一个是处于目标节点阶段，一个是冒泡阶段。
3、 请说出几种你知道的AJAX跨域的方法，这些跨域的方法分别有哪些特点，适合应用于哪些场景。
-
代理实现最麻烦，但使用最广泛，任何支持AJAX的浏览器都可以使用这种方式；
-
JSONP相对简单，但只支持GET方式调用；
-
XHR2最简单，但只支持HTML5，如果你是移动端开发，可以选择使用XHR2。
4、请列举一下常用的Linux命令。
cd,ls,cp,find,mv,rm,cat,grep。
5、对于加快网页的加载速度都有哪些优化的方法。
-
优化图片资源的格式和大小;
-
减少重定向请求;
-
减少DNS查询次数；
-
压缩css和js内容。
for of与 for in
区别：for of es6标准 循环出的是value 只可以循环可迭代对象的可迭代属性，不可迭代属性在循环中被忽略了。
for in es5标准 循环出的是key 循环除了遍历数组元素以外,还会遍历自定义属性。
例：var arr = [1,2,3] arr.name = 'aaa'
for(var key in arr){
console.log(key) // 0,1,2,name
}
for(var value of arr){
console.log(value) //1，2，3
}
for of 可以与Object.keys()搭配使用 //Object.keys()获取对象key的数组
var student = {
name:'aaa',
age:22,
locate:{
country:'china',
city:'shanxi'
}
}
// Object.keys(student) // ['name','age','locate']
for (var key of Object.keys(student)){
console.log(`${key}:${student[key]}`)
}
script引入方式：
<script defer> :异步加载，元素解析完成后执行
<script async>：异步加载，与元素解析并行执行
-
<script src="script.js"></script>没有
defer或async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 -
<script async src="script.js"></script>有
async，加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行（异步）。 -
<script defer src="myscript.js"></script>有
defer，加载后续文档元素的过程将和script.js的加载并行进行（异步），但是script.js的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。 -
![]()
模块化
-
分类:
- es6:
import / exports - commonjs:
require / module.exports / exports - amd:
require / defined
- es6:
-
require与import的区别require支持 动态导入，import不支持，正在提案 (babel 下可支持)require是 同步 导入，import属于 异步 导入require是 值拷贝，导出值变化不会影响导入值；import指向 内存地址，导入值会随导出值而变化
数组(array)
-
map: 遍历数组，返回回调返回值组成的新数组 -
forEach: 无法break，可以用try/catch中throw new Error来停止 -
filter: 过滤 -
some: 有一项返回true，则整体为true -
every: 有一项返回false，则整体为false -
join: 通过指定连接符生成字符串 -
push / pop: 末尾推入和弹出，改变原数组， 返回推入/弹出项 -
unshift / shift: 头部推入和弹出，改变原数组，返回操作项 -
sort(fn) / reverse: 排序与反转，改变原数组 -
concat: 连接数组，不影响原数组， 浅拷贝 -
slice(start, end): 返回截断后的新数组，不改变原数组 -
splice(start, number, value...): 返回删除元素组成的数组，value 为插入项，改变原数组 -
indexOf / lastIndexOf(value, fromIndex): 查找数组项，返回对应的下标 -
reduce / reduceRight(fn(prev, cur)， defaultPrev): 两两执行，prev 为上次化简函数的return值，cur 为当前值(从第二项开始)
从输入 url 到展示的过程
- 输入url //当我们开始在浏览器中输入网址的时候，浏览器其实就已经在智能的匹配可能得 url 了，他会从历史记录，书签,缓存等地方
- DNS 解析
- TCP 三次握手
- 发送请求，分析 url，设置请求报文(头，主体)
- 服务器返回请求的文件 (html)
- 浏览器渲染
- HTML parser --> DOM Tree
- 标记化算法，进行元素状态的标记
- dom 树构建
- CSS parser --> Style Tree
- 解析 css 代码，生成样式树
- attachment --> Render Tree
- 结合 dom树 与 style树，生成渲染树
- layout: 布局
- GPU painting: 像素绘制页面
- HTML parser --> DOM Tree
-
浏览器缓存机制分析及前端缓存清理
-
缓存的优缺点
优点
现在说一下缓存的好处，好处显而易见嘛，就是说请求一些静态资源，js，css，图片这些，不会变化的资源，请求会变得更快，加快了客户端加载网页的速度，提高了页面的响应速度，也减少了冗余数据的传递，节省了网络带宽流量，减少服务端的负担，大大提高了网站性能。
缺点
但是缺点也显而易见，客户端和服务端交互的时候，服务端的数据虽然变了，但是页面缓存没有改变，对于相同的url，ajax提交过去以后，浏览器是从缓存中拿数据，这种情况肯定是不被允许的。
那么什么时候会触发缓存呢，在这之前先说一下缓存机制吧。
-
强制缓存
就是缓存中已经有了请求数据的时候，客户端直接从缓存中获取数据，只有当缓存中没有请求数据的时候，客户端才会从服务端拿取数据。
协商缓存
也成为对比缓存，就是说客户端会从缓存中获取到一个缓存数据的标识，根据这个标识会请求服务端验证是否失效，如果没有失效，服务端会返回304，这时候客户端就直接从缓存中取数据，如果失效了，服务端会返回新的数据。
这两种缓存机制可以同时存在，不过强制缓存的优先级高于协商缓存。
现在我们简单的了解了一下缓存机制的原理，该说一下什么时候会触发缓存，服务端是如何判断缓存是否失效呢？大家都知道，发送请求的时候会有请求数据和响应数据，这个被称为报文，报文中包含首部header和主体部分body。与缓存相关的规则信息就包含在header中。body中的内容就是http请求真正要传输的数据。举个http报文的头部例子
-
![]()
-
强制缓存
服务器响应的header中会用两个字段来表明，Expires和Cache-Control。
Expires
Expires的值是服务端返回的数据到期时间。当再次请求时的请求时间小于返回的此时间，则直接使用缓存数据，但是因为客户端和服务端的时间可能有误差，所以这个缓存命中可能会有误差，另一方面，expires是http1.0的产物，所以现在大多数都使用Cache-Control
Cache-Control
Cache-Control有很多产物，不同的属性代表的意义不同。
private： 客户端可以缓存
public： 客户端和服务器可以缓存
max-age=t：缓存内容在t秒后失效
no-cache：需要使用协商缓存来验证缓存数据
no-store：所有内容不使用缓存
协商缓存
协商缓存需要判断是否可以用缓存，浏览器第一次请求数据的时候，服务器会将缓存标识与数据一起响应给客户端，客户端将他们备份到缓存中，再次请求时，客户端会将缓存中的标识发送给服务器，服务器根据此标识判断是否失效，如果没有失效，服务端返回304状态码，浏览器拿到此状态吗就可以直接使用缓存数据了。对于协商缓存来说，缓存标识很重要，对于理解协商缓存，这是重点。
-
-
问题：相信很多新手前端发布页面的时候都会遇到一个问题，就是明明页面已经更新了，但是浏览器浏览页面并没有变化，那么如何解决这个问题呢？
事实上，这个问题各种搜索引擎搜索之后会发现有很多的方案，但不一定有效，一般的解决方案有以下的两种：1：添加时间戳；2：cache-control。
首先第一种，就是在你的所有静态资源文件后面添加随机时间戳，例如你的页面里面用到了test.js，那你修改过test.js在html页面中的引用就要改成像下面这个样子
<script type="text/javascript" src="https://resources.test.com/js/test.js?version=56965"></script>
每次修改test.js之后修改version后面的时间戳，这样浏览器就会忽略缓存从服务器请求新的文件，但是，真正这么做了之后，还是会发现，即使所有修改过的文件在应用的时候都添加了时间戳了，但是页面缓存还是没有清除，这又是为什么呢？原因很简单，你只对你修改过的文件添加了时间戳，但是html页面本身在这个时候已经被修改了，html页面是所有静态资源的载体，如果不对它加上时间戳，所有的其他应用都会沿用旧的缓存，所以，这个时候要让缓存失效，只需要在你的访问的网址上面再添加一个时间戳，例如：http://www.test.com/index.html?version=123456。但很明显，这种做法其实很不优雅，例如网站的访问地址是不能经常变更的，所以这种方法其实使用收到很大程度的限制，接下来是第二种方法，cache-control。
-
<meta name="Cache-Control" content="no-cache"> 并没什么用
File协议主要用于访问本地计算机中的文件,就如同在Windows资源管理器中打开文件一样，基本的格式如下：file:///文件路径。
FTP是文件传输协议，可以用于互联网上。例如，你有一个网站，放在某个服务器上，可以通过FTP来访问服务器上的文件。
SFTP SFTP与 FTP有着几乎一样的语法和功能。SFTP为SSH的一部份，是一种传输文件到服务器的安全方式。
HTTP 协议定义服务器端和客户端之间文件传输的沟通方式。
URL由以下几部分组成：协议，服务器主机地址，端口，路径和参数。
1、协议：常用的有http协议，https（http+ssh）协议。
2、服务器主机地址：可以是域名，也可以是主机名，或IP地址。
3、端口：服务器设定的端口。URL地址里一般无端口，因为服务器使用了协议的默认端口，用户通过url访问服务器时，可以省略。
4、路径：访问的资源在服务器下的相对路径，是服务器上的一个目录或者文件地址。
5、参数：查询搜索的部分，通过问号？连接到路径后面，有时候也归类到路径中。
js中事件委托的优缺点
优点：
- 减少事件注册，节省内存。比如，
- 在table上代理所有td的click事件。
- 在ul上代理所有li的click事件。
- 简化了dom节点更新时，相应事件的更新。比如
- 不用在新添加的li上绑定click事件。
- 当删除某个li时，不用移解绑上面的click事件。
缺点：
- 事件委托基于冒泡，对于不冒泡的事件不支持。
- 层级过多，冒泡过程中，可能会被某层阻止掉。
- 理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在table上代理td，而不是在document上代理td。
- 把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用改js时，可能不知道，造成单击button触发了两个click事件。