一.HTML篇

1.HTML5 drag api

dragstart	事件主体为被拖放元素	开始时触放
drag	事件主体为被拖放元素	正在拖
dragenter	事件主体为目标元素	进入
dragover	事件主体为目标元素	被拖元素在某元素内移动
dragleave	事件主体为目标元素	被拖元素离开某元素
drop	事件主体为目标元素	目标元素完全接受被拖放元素
dragend	事件主体为被拖元素	整个拖放操作结束

2.语义化标签

hgroup用来标题分组，将一组相关的标题同时放入到hgroup
blockquote用来表示引用别人的话,长引用。q表示短引用
注意：p元素里不能写块元素
块级：h,p,blockquote,
行内：em,strong,q
替换元素：img
结构化语义标签
- header 网页头部
- main 主体（一个网页只有一个）
- footer 底部
- nav 导航
- aside 和主体相关（常用于侧边栏）
- articel 文章
- section 一个独立的区块
dl,dt（一级）,dd（二级）定义列表
a可以嵌套除了他自身以外的任意元素
快捷生成任意英语lorem
图片格式：jpg色彩丰富不支持透明和动图，gif颜色少支持透明动图，png颜色丰富支持透明不支持动图，webp谷歌新推表示网页中的图片有所有优点，base64将图片使用base64进行编码将图片转化为字符通过字符来引入（当网页和图片一起加载的时候用）
其实主要用div，span

3.meta

meta 主要用于设置网页中的一些元数据（不给用户看）
- charset 指定网页的字符集
- name 数据名称
- keywords 表示网站的关键字
- description 用于指定网站的描述
- title 作为搜素结果上的文字显示
- content 指定的数据内容
- 重定向

SEO会爬取到
<meta name="keywords" content="网上购物,家电,手机,计算机,服装,国际,海外,居家,母婴,美妆,个护,食品,京东,集运,全球" /> 

3秒后跳到百度
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">

4.SEO

原理：
- 页面抓取：蜘蛛向服务器请求页面，获取页面的线程编程的web worker,web socket协议内容
- 分析入库：对获取到的内容进行分析，优质收录
- 检索排序：当用户输关键词，从收录中按一定规则排序返回

蜘蛛：爬取页面的程序
工作方式：
- 深度优先
- 广度优先

如何利用蜘蛛优化？
- 在更有名的网站放自己的外链
- 经常更新
- 增加外链
- 首页做好导航

前端怎么做SEO优化？
- url
规范简单有描述性在建站前想好
不要把id之类用户信息，放到url中
不同形式，防止用户输错的备用域名
扁平化网络结构，层次越少，越利于爬取
- title
清晰，关键
- meta
- description
- keywords
- html
纯粹和高质量，使html,css,js三者分离
- alt
- 设rel='nofollow'
给不需要的a标签加忽略跟踪
- 减少使用的元素
- 图片，视频里的文本无法爬要写的静态页面
- flash：无法处理文本要用，给object标签加注释
- frame,iframe：内容可能被蜘蛛丢弃
重要内容不应该由JavaScript或iframe输出，蜘蛛没有办法读取js，故不会读iframe
- 小优化
404页面，重要内容放前面，关键词，语义化元素

5.web socket和web worker

web socket 和 worker 的作用：为构建高效能的web应用提供了新的参考方案。
web socket提供更高效的传输协议，web worker提供多线程提高web应用计算效率。

web socket
是一种协议，本质上和http,tcp一样。
- 前缀：
  ① ws:// 不可加密
  ② wss:// 加密
- 客户端和服务端进行web socket交互的方式也可以理解为http握手+tcp数据传输
- websocket的数据传输形式是：frame。比如会将一条消息分为几个frame，按照先后顺序传输出去。
- 可以实现跨域。利用origin字段。
web worker
在html页面中，如果执行脚本时，页面状态是不可响应的，直到脚本执行完成，才变成可响应
web worker是运行在后台的独立的js，通过post message 将结果传到主线程，在进行复杂操作的时候不会阻碍主线程
- 如何创建？
  - 检测浏览器对于web worker的支持性
  - 创建web worker文件
  - 创建web worker对象

6.HTML的async和defer

async和defer对于内联JavaScript都是无效的
使得script都不会阻塞DOM的渲染

defer
等js下载完毕时若HTML还没解析完毕，js会等到HTML文档解析完毕后再执行。
浏览器会异步的下载，该文件并且不会影响到后续DOM的渲染
- 多个按顺序
  defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行
async
在下载js文件期间不会阻塞HTML的解析，但是js下载完毕之后就会立即执行，无论现在HTML是否正在解析。
async的执行不会按着script在页面的顺序来执行，而是谁先加载完成谁先执行
DOMContentLoaded事件的触发并不受async脚本加载的影响

defer(脚本代码依赖页面中的DOM)评论框，代码语法高亮
async(脚本并不关心页面中的DOM)百度统计　　
defer更稳定

7.css为什么要放在html文档的`<head>`标签内

如果把css文件引用放在HTML文档的底部，浏览器为了防止无样式,内容闪烁，会在css文件下载并解析完毕之前什么都不显示，这也就会造成白屏现象。
当css文件放在中时，虽然css解析也会阻塞后续dom的渲染，但是在解析css的同时也在解析dom，所以等到css解析完毕就会逐步的渲染页面了。

怎么优化？
因为Css的解析会阻塞页面的渲染，为了让页面尽早的呈现处理，那么就要避免一些无用的css文件。
使用媒体查询可以让css文件只在必要的时候解析，进而避免不必需的渲染阻塞，加快页面呈现时间。
8.H5引入了哪些新特性？

（1）8个语义元素 hearder section footer aside nav main article figure
内容元素 mark高亮，progress进度
新的表单控件 calander,date,time,email,url,search
新的input类型 color，date，datetime，datetime-local,email
移除过时标签 big font frame frameset

(2)canvas绘图，支持内联svg

(3)多媒体audio,video,source,embed,track

(4)本地离线存储，将文件列在一个配置文件

(5)web存储。localstorage,sessionstorage

二.CSS篇

1.CSS3新特性

css边框：border-radius，border-shadow
css背景：background-origin，background-size
css 2D 3D转换，动画：transform，animation

css媒体查询

2.box-sizing的语法和基本用处

box-sizing规定两个并排的带边框的框
：content-box / border-box /inherit

content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框
border-box：为元素设定的高和宽决定了元素的边框值
inherit：继承父元素的box-sizing

3.如何让一个元素消失？

display: none 改变布局。在页面将元素删除了
visibility: hidden 不改变布局，不触发事件
opacity: 0 该元素隐藏起来了，不会改变布局，如果绑定了事件如click，点击仍会触发

4.重排和重绘

浏览器渲染页面默认采用的是流式布局模型，某一个DOM节点信息更改了，就要对DOM结构重新计算，重新布局界面。全局范围是从根节点html开始，局部从渲染树的某部分或某一个渲染对象进行重新布局。

引起重排的操作（DOM对象位置和大小）
- 1.页面首次渲染
- 2.浏览器窗口大小改变
- 3.元素尺寸或位置改变
- 4.元素内容变化（图片大小）
- 5.元素字体大小的改变
- 6.添加或删除可见的DOM元素
width,display,clientwidth,scrollwidth,offsettop

重绘（页面中元素的样式）
color,border-style,outline,background

5.position属性

取值：static，relative，absolute，fixed，sticky

6.像素

css像素
物理像素

可以通过改变视口的大小来改变css像素和物理像素的比值

在不同屏幕下，单位像素是不同的，像素越小屏幕越清晰

默认情况下，移动端网页都会将视口设置为980像素（css像素），确保pc端可在移动端正常访问

将网页视口设置为完美视口<meta name="viewport" content="width=device-width, initial-scale=1.0">

vw表示的是视口宽度（100vw == 1个视口宽度）

7.字体

不会失真，是矢量
对于电脑中没有的字体，下载字体到font

@font-face {
    //指定字体名字
    font-family: 'myFont';
    src: url('路径')；

font-face可以将服务器中的字体直接提供给用户去使用
问题：1.加载速度 2.版权 3.格式

图标字体
- 问题：图片本身比较大，且非常不灵活
- 使用font-face的样式来引入
fontawesome使用
下载，解压，将css和webfonts移动到项目中，将all.css引入，使用
```
- 直接通过类名使用`<i class="类名"></i>`fas/fab
        - 通过伪元素（到all.css中查content,font-family,font-weight）
        - 通过实体（&#x图片的编码）
```

8.link 与 @import

link属于xhtml标签，而@import是由css提供
加载顺序：
- link引用的css会在页面加载时，同时加载。
- @import引用的css会等页面全部被下载完再加载
兼容性
- @import有兼容性限制
只能使用link标签去控制dom样式

9.px，em，rem ，vw ,vh

都是css中的单位长度

px 是固定像素，一旦设置就无法改变
em 和 rem 都是相对长度单位，是适应于响应式布局
em相对父元素 rem相对于html元素

vw视口宽度，100vw是视口的总宽度 vh 视口高度

三.JavaScript篇

1.为什么JS执行的时候要阻塞HTML解析

如果把JavaScript放在页面顶部，下载和解析JavaScript的时间里面，dom迟迟得不到解析和渲染，浏览器一直处于白屏，所以把JavaScript文件放在页面底部更有利于页面快速呈现。

2.BOM

浏览器对象：
- location
- history
- navigator

(1)location
.href – url
.host – 域名
.pathname – 域名后的部分
.replace(url) – 在history对象中移除这个url
.reload – 重载

(2)history
.go() – 前进/后退的页面数
.back()
.forwoard()

(3)navigator
.userAgent – 用户代理头的字符串表示
.cookieEnabled – 浏览器支持cookie吗

共同：保存在浏览器前端
区别：
cookie数据在同源的http请求中携带，过期前时间有效。可以在浏览器和服务器来回传递，存储容量小，大约为4kb
SessionStorage：仅在当前窗口关闭前有效
LocalStorage：始终有效

IndexedDB：被纳入HTML5标准的数据库存储方案，它是一个NoSql数据库，用键值对进行存储，可以快速读取操作，适合web场景和JavaScript操作

cookie的作用
- 保存用户登录状态
- 跟踪用户行为

4.cookie与session

- 工作原理：

\cookie的工作原理**：浏览器第一次发送请求到服务器，服务器创建cookie，将cookie发送到浏览器；如果浏览器再次访问服务器，会携带着cookie；服务器根据浏览器发送过来的cookie，区分不同的用户、权限等

\session的工作原理**：浏览器首次发送请求到服务器，服务器端创建一个session，同时创建一个cookie，发送到浏览器；浏览器再次访问服务器，会携带带有特殊id的cookie，服务器根据cookie中的sessionid，查看对应的session对象，区别用户

- 存储位置：

cookie和session都是会话技术，cookie数据是存储到客户端，而session是存储到服务端

- 数据大小限制

cookie存储的数据大小有限；而session没有大小限制，跟服务端的内存有关

- 安全

cookie安全性差，可以通过拦截或本地文件可以对cookie进行攻击；而session运行在服务端，安全性高

- 禁用

如果浏览器禁用了cookie，那么cookie就不能使用，而session不能禁用

9.css动画与js动画

功能涵盖面 js比css大
css 3 比 js 简单
低版本的浏览器css 3自然释放
css存在兼容性问题
js在主线程中运行易丢帧
css更流畅（因为在合成器线程中进行动画处理）

10.乐观锁和悲观锁

DBMS中的并发控制的任务是确保在多个事务同时存取数据库中的一个数据时，不破坏隔离性和统一性

悲观锁：假定会发生冲突，屏蔽一切可能违反数据完整性的操作。在查询完数据的时候把事务锁起来，直到提交事务
- 实现方法：使用数据库中的锁机制

乐观锁：假定不会冲突，只在提交操作时检查是否违反数据库的完整性。在修改数据时把事务锁起来
- 实现方法：版本号机制

11.死锁

多个事务在同一个资源上相互占用，并请求锁定对方的资源
解决：回滚

共享锁读锁
排他锁写锁