1. 说一下 HTML5 drag api

    • dragstart: 事件主体是被拖放元素,在开始拖放被拖放元素时触发。
    • darg: 事件主体是被拖放元素,在正在拖放被拖放元素时触发。
    • dragenter: 事件主体是目标元素,在被拖放元素进入某元素时触发。
    • dragover: 事件主体是目标元素,在被拖放在某元素内移动时触发。
    • dragleave: 事件主体是目标元素,在被拖放元素移出目标元素是触发。
    • drop: 事件主体是目标元素,在目标元素完全接受被拖放元素时触发。
    • dragend: 事件主体是被拖放元素,在整个拖放操作结束时触发。

  2. web 性能优化

    • 降低请求量: 合并资源,减少HTTP请求数,minify/gzip 压缩, webP,lazyLoad。
    • 加快请求速度: 预解析 DNS,减少域名数,并行加载,CDN分发。
    • 缓存: HTTP 协议缓存请求,离线缓存 manifest,离线数据缓存 localStorage。
    • 渲染: JS/CSS 优化,加载顺序,服务端渲染,pipeline。

  3. 浏览器缓存机制

    • 缓存分为两种: 强缓存和协商缓存
    • 强缓存相关字段有 expires,cache-control。如果cache-control与 expires同时存在的话,cache-control的优先级高于 expires。
    • 协商缓存相关字段有Last-Modified/If-Modified-Since, Etag/If-None-Match

  4. 浏览器输入网址到页面渲染全过程

    • DNS域名解析
      • 在客户端和浏览器,本地DNS之间的查询方式是递归查询;
      • 在本地DNS服务器与根域及其子域之间的查询方式是迭代查询
    • 建立TCP连接
      • 第一次握手, 建立连接。
        • 客户端发送连接请求报文段,将SYN位置为1,Sequence Number为x;
        • 然后,客户端进入SYN_SEND状态,等待服务器的确认;
      • 第二次握手: 服务器收到SYN报文段。
        • 服务器收到客户端的SYN报文段,需要对这个SYN报文段进行确认,设置Acknowledgment Number为x+1(Sequence Number+1);
        • 同时,自己还要发送SYN请求信息,将SYN位置为1,Sequence Number为y;
        • 服务器端将上述所有信息放到一个报文段（即SYN+ACK报文段）中,一并发送给客户端,此时服务器进入SYN_RECV状态
      • 第三次握手: 客户端收到服务器的SYN+ACK报文段。
        • 然后将Acknowledgment Number设置为y+1,向服务器发送ACK报文段,
        • 这个报文段发送完毕以后,客户端和服务器端都进入ESTABLISHED状态,完成TCP三次握手。
      • 如果是HTTPS,SSL握手
    • 发送HTTP请求,服务器处理请求并返回响应结果
    • 关闭TCP连接,四次挥手
      • 第一次分手
        • 主机1（可以使客户端,也可以是服务器端,设置Sequence Number和Acknowledgment Number,向主机2发送一个FIN报文段;
        • 此时,主机1进入FIN_WAIT_1状态;这表示主机1没有数据要发送给主机2了;
      • 第二次分手
        • 主机2收到了主机1发送的FIN报文段,向主机1回一个ACK报文段,Acknowledgment Number为Sequence Number加1;
        • 主机1进入FIN_WAIT_2状态;主机2告诉主机1,我”同意”你的关闭请求;
      • 第三次分手
        • 主机2向主机1发送FIN报文段,请求关闭连接,同时主机2进入LAST_ACK状态;
      • 第四次分手
        • 主机1收到主机2发送的FIN报文段,向主机2发送ACK报文段,然后主机1进入TIME_WAIT状态;
        • 主机2收到主机1的ACK报文段以后,就关闭连接;
        • 此时,主机1等待2MSL后依然没有收到回复,则证明Server端已正常关闭,那好,主机1也可以关闭连接了。
    • HTTP报文浏览器解析渲染页面
      • 构建DOM树
        • 渲染进程将 HTML 内容转换为能够读懂DOM 树结构。
      • 样式计算
        • 渲染引擎将 CSS 样式表转化为浏览器可以理解的styleSheets,计算出 DOM 节点的样式。
      • 布局阶段
        • 创建布局树,并计算元素的布局信息。
      • 分层
        • 对布局树进行分层,并生成分层树。
      • 栅格化
        • 为每个图层生成绘制列表,并将其提交到合成线程。合成线程将图层分图块,并栅格化将图块转换成位图。
      • 显示
        • 合成线程发送绘制图块命令给浏览器进程。浏览器进程根据指令生成页面,并显示到显示器上。

  5. 画一条 0.5px 的线

    • 采用meta viewport的方式 
      1
      <meta name="viewport" content="initial-scale=1. 0, maximum-scale=1.0, user-scalable=no" />
    • 采用border-image的方式
    • 采用transform: scale()的方式

  6. 关于 JS 动画和 css3 动画的差异性

    • JS动画(逐帧动画)
      • 在时间帧上逐帧绘制帧内容,可操作性高
      • 适合细腻动画,但是占用资源也大
      • 兼容性好
    • CSS3动画(补间动画)
      • 只需确定第一帧和最后一帧的关键位置即可,两个关键帧之间帧的内容由Composite线程自动生成,不需要人为处理。
      • 当然也可以多次添加关键帧的位置。
      • 适合简单动画,占用少量资源

  7. 浮动清除

    • 方法一: 使用带 clear 属性的空元素在浮动元素后使用一个空元素如<div class="clear"></div>
      • 并在CSS中赋予.clear {clear:both;}属性即可清理浮动。
      • 亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
    • 方法二: 使用CSS的 overflow 属性
      • 给浮动元素的容器添加 overflow:hidden;或 overflow:auto;
    • 方法三: 给浮动的元素的容器添加浮动
      • 给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。
    • 方法四: 使用邻接元素处理
      • 给浮动元素后面的元素添加 clear 属性
    • 方法五: 使用 CSS 的:after伪元素

  8. CSS 选择器优先级

    • id 选择器 > class 选择器 > 标签选择器
    • !important > 内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

  9. CSS 动画如何实现

    • 创建动画序列,需要使用 animation 属性或其子属性
    • 动画的实际表现是由@keyframes规则实现
    • transition 也可实现动画

  10. CSS3 中对溢出的处理

    • text-overflow 属性,
      • clip 是修剪文本
      • ellipsis 为显示省略符号来表被修剪的文本
      • string 为使用给定的字符串来代表被修剪的文本