note

html

• 对web标准和w3c的理解

对于html结构
标签要闭合
标签名小写
不能随意嵌套
提高搜索引擎的搜索几率
在meta头里面写入keyword关键字和网页描述description
提高网页加载速度
把js和css写到文档外部，利用link引入
减少http的请求次数，比如使用雪碧图
去掉不必要的空标签和注释

• 内核

-webkit- chrome/safari
-moz- gecko firefox
-mz- trident
-o- presto opera

• 兼容性

标签自带padding 和margin
父级没有宽高度时，子级有margin时，会有bug
ie6认识下划线和*
ie以上认识*

• hack

不同浏览器对css的支持和解析是不一样的，针对不同的浏览器，来写相对应的css（内部hack、选择器hack、条件注释）

• 盒模型

没有DOCTYPE的情况下使用怪异模式，IE也使用“IE盒模型”
content-box：w3c标准盒模型
border-box：“IE盒模型”
盒模型包括：margin、border、padding、content
W3C标准中width、height=content。不包含padding、border所占的空间；
IE的盒模型width、height=content＋padding＋border。
在没有声明doctype的情况下，浏览器选择自己的模式，怪异模式(QUICK MODE)
避免触发IE盒模型的方法是使用声明，告诉IE采用W3C盒子模型即可(box-sizing:border-box模拟ie盒模型)

• 选择器

important > 内联样式 > ID > 类 | 伪类 | 属性选择 > 标签 | 伪元素 > 继承 > 通配符

• 弹性模型的知识点
  1、变成弹性模型 display:flex;
  2、因为垂直排列，确定方向,列方向 flex-direction:column;
  3、垂直居中 align-items:center;
  4、垂直分部里面呈现出垂直分布 flex-direction：row
  5、成平均展示 justify-content:space-around
  6、成两端居中 justify-content:space-between

• 常见知识点

html:超文本语言
xhtml:可扩展超文本语言
XML设计用来传送及携带数据信息，不用来表现或展示数据，HTML语言则用来表现数据。(可扩展标记语言)
sgml标准通用标记语言

• git

js

• 浏览器的对象

window（alert,prompt,confirm,open.close）
document(write)
history(back后退、farword前进、go(n)正数向前，负数向后)
loaction(.href重定向)
navigator()表示浏览器的信息及js运行的环境
navigator.cookieEnabled：该属性表示是否启用cookie
screen 用于显示网页的显示器的大小和颜色

• 隐式转换

所有空为false
undefined and null 为false
0 为false

• 运算过程中的转化原则

字符串与数字相加，变成字符串
字符串与数字相减，变成数字

• 当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？

直接在DOM里绑定事件：

在JS里通过onclick绑定：xxx.onclick = test
通过事件添加进行绑定：xxx.addEventListener(‘click’, test)

• 什么是Ajax和JSON，它们的优缺点。

Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。
优点：
　可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量
　避免用户不断刷新或者跳转页面，提高用户体验

缺点：
　对搜索引擎不友好（
　要实现ajax下的前后退功能成本较大
　可能造成请求数的增加
　跨域问题限制

JSON是一种轻量级的数据交换格式，ECMA的一个子集
优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

关于事件

• DOM 事件流- 事件捕获或者事件捕捉、目标阶段、事件冒泡
• 事件捕获:事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
• 事件冒泡:事件由最具体的元素接受,然后逐级向上传播

阻止事件冒泡:event.shopPropagation--IE（event.cancelBubble= true）
阻止元素的默认事件event.preventDefault();

关于秒杀高并发

• 将活动页面上的所有可以静态的元素全部静态化，并尽量减少动态元素。通过CDN来抗峰值。
• 一般都会采用IP级别的限流，即针对某一个IP，限制单位时间内发起请求数量。

关于Ajax

• JAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术
• 原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

Ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。让我们来了解这几个对象。

特点是无需刷新页面便可向服务器传输或读写数据

• 优点

无刷新更新数据--AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。

异步与服务器通信--AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。

• 缺点

AJAX干掉了Back和History功能，即对浏览器机制的破坏。--在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是Ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。

.对搜索引擎支持较弱。--对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

AJAX的安全问题。--AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。

本地缓存

• cookie

客户端信息记录信息确定用户身份

• Session

通过在服务器端记录信息确定用户身份。