HTML & CSS & HTTP

1、Link与@import区别

• 从属关系，link是html标签，@import是css提供的语法规则；
• 加载顺序
• 兼容性
• dom和js可控性

2、浏览器理解

• 呈现web资源，这里的资源是向服务器请求，资源通常有html、图片、pdf及其他格式，用户用URL指定资源位置
• 浏览器分两部分：shell和内核；shell外壳，菜单、工具栏，提供用户操作界面、参数设置等。内核才是核心。
• 内核就是引擎：渲染引擎和js引擎。渲染引擎，再浏览器窗口显示请求的内容；js引擎，解析和执行javascript实现网页动态效果。由于js引擎越来约独立，现在内核多指渲染引擎。
• 常见内核：IE浏览器trident，兼容性差；Firefox浏览器geocko功能强大，兼容性好，耗资源；欧朋浏览器presto，速度快，兼容性一般；safari浏览器webkit，速度快、兼容性一般；谷歌浏览器blink其实是webkit的一个分支。现在欧朋与谷歌一起研发blink。
  -浏览器渲染原理，见下文

3、 浏览器架构

• 用户界面

  • 主进程（控制浏览器的地址栏，书签栏，返回和前进按钮，同时还有浏览器的不可见部分，例如网络请求和文件访问）
  • 渲染进程（内核）
  • 渲染引擎（界面渲染）

  • js引擎（脚本执行）

    • 执行栈

  • 事件触发线程（事件处理）

    • 消息队列

      • 微任务
      • 宏任务
  • 网络异步线程
  • 定时器线程

3、浏览器渲染原理

• 解析收到文档，构建dom树
• 解析css，生成css rule 树
• 解析js、脚本，通过Dom api 和cssom api操作dom树和css rule树（浏览器解析js，defer、asycn ）
• 根据dom树，css规则树，构建渲染树
• 布局，渲染树被构建时没有大小和位置，生成后浏览器根据渲染树来进行布局（重绘，回流）
• 绘制，遍历渲染树调用渲染对象的paint方法，将他们的内容显示在屏幕上。

4、 什么是重绘和回流，如何减少回流

• 重绘：当渲染树中的一些元素需要改变外观，而不影响布局，如color。
• 回流：布局和几何属性改变，比如：宽、高、定位、字体及等
• 回流必定依法重绘，重绘不一定引发回流。（尽量减少回流）

5、如何减少回流

• 使用transform替代top
• 不使用table布局，小改动引起整个table重新布局
• 不要一条一条地修改DOM样式，预先定义好class修改dom的className
• 不要把节点的属性值当成循环里的变量

6、 cookie、sessionStorage和localStorage

• cookie是网站为了标示用户身份而存储在用户本地终端上的数据(通常被加密)，cookie数据始终在同源的http请求中携带，在浏览器与服务器之间来回传递，在设置失效时间到期之前始终有效。能传递的数据不超过4k.
• sessionStorage和localStorage是html5 提供的两种浏览器本地存储方法，两者同样能存储5M或者更大的数据。sessionStorage数据存储在浏览器，能在同源同窗口中共享数据，当前窗口关闭后失效。而localStorage数据存储在用户本地，能在同源页面中共享，除非手动删除，否则始终有效。

7、 iframe缺点

• 阻塞主页面的onload事件。window的unload事件需要在所有iframe家在完毕后才会触发。
• 搜索引擎无法识别iframe内的内容，不利于seo
• 浏览器后退按钮失效
• 页面可能出现多个滚动条，小屏设备无法完全显示全部内容
• 影响页面并行加载，因为iframe和主页面共享连接池

8、 如何实现浏览器内多个标签页之间的通行？

• 可以调用localStorage本地存储方式，localStorage另一个浏览上下文里被添加、修改或删除时，他都会触发一个storage事件，通过监听storage事件，控制它的值实现页面间的通信；
• 使用websocket,因为websocket协议可以实现服务器推送，所以服务器就可以充当这个中介，标签页向服务器发送数据，服务器向其他标签页推送转发；
• 使用sharedWorker，兼容性，只在Chrome实现

9、 如何在页面实现一个圆形可点击区域

• border-radius，当border-radius等于长度与宽度相等元素的一半时，即可实现一个圆形可点击区域
• 使用使用map+area来给img图像标记热点区域的方式；
• 使用canvas绘制
  参考文档《如何在页面上实现一个圆形的可点击区域》

10、 meta标签作用？常用的meta标签？

• meta标签定义与描述

  • meta标签是html文档，head标签里的一个对文档进行解释的标签

  • 有两个属性值：name 和 http-equiv。每个属性对应不同的参数值，实现不同的功能，主要有以下几方面作用

    • 搜索引擎优化
    • 定义页面语言
    • 控制网页显示窗口
    • 网页定级评价

  • name属性主要用于描述网页，对应属性值为content，content内容主要是是便于搜索引擎机器人查找和分类信息使用

    • <meta name="参数" content="具体的参数值" >
  • http-equiv 属性，相当于http文件头作用，向浏览器传递信息，帮助浏览器正确和精确的显示网页内容。

• 常用meta标签

    - <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1′′/> 优先使用 IE 最新版本和 Chrome
    - <meta name=”description” content=”不超过 150 个字符”/> 页面描述
    - <meta name=”keywords” content=””/> 页面关键词者
    - <meta name=”author” content=”name, [e-mail]”/> 网页作者
    - <meta name=”robots” content=”index,follow”/> 搜索引擎抓取
  

11、 前端性能优化

前端性能优化主要是为了提高页面的加载速度，优化用户的访问体验。我认为可以从这些
方面来进行优化。
第一个方面是页面的内容方面
(1)通过文件合并、css 雪碧图、使用 base64 等方式来减少 HTTP 请求数，避免过多的 请求造成等待的情况。
(2)通过 DNS 缓存等机制来减少 DNS 的查询次数。
(3)通过设置缓存策略，对常用不变的资源进行缓存。
(4)使用延迟加载的方式，来减少页面首屏加载时需要请求的资源。延迟加载的资源当用 户需要访问时，再去请求加载。
(5)通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速 度。
第二个方面是服务器方面
(1)使用 CDN 服务，来提高用户对于资源请求时的响应速度。
(2)服务器端启用 Gzip、Deflate 等方式对于传输的资源进行压缩，减小文件的体积。
(3)尽可能减小 cookie 的大小，并且通过将静态资源分配到其他域名下，来避免对静态 资源请求时携带不必要的 cookie
第三个方面是 CSS 和 JavaScript 方面
(1)把样式表放在页面的 head 标签中，减少页面的首次渲染的时间。
(2)避免使用 @import 标签。
(3)尽量把 js 脚本放在页面底部或者使用 defer 或 async 属性，避免脚本的加载和执行 阻塞页面的渲染。
(4)通过对 JavaScript 和 CSS 的文件进行压缩，来减小文件的体积。

12、介绍一下BFC及其应用

BFC（block format context）块级格式化上下文，一个独立的容器，里面和外面的元素互不干扰。
1、创建BFC的方式：

1）.html根元素
2）float浮动
3）绝对定位（absolute）
4）display为表格布局或者弹性布局；
5）overflow不为visible

2、应用

1）清除浮动
2）防止同一BFC容器中相邻元素的外边距重叠问题

13、HTTPS、HTTPS和HTTP的区别？

HTTPS基于HTTP协议，通过SSL或TLS（可以看作SSL3.0）提供加密处理数据、验证对方身份以及数据完整性保护。特点如下：

*   内容加密：采用混合加密技术，中间者无法直接查看明文内容
*   验证身份：通过证书认证客户端访问的是自己的服务器
*   保护数据完整性：防止传输的内容被中间人冒充或者篡改

HTTPS和HTTP的区别主要如下：

1.  HTTPS协议需要到CA（证书颁发机构）申请证书，一般免费证书很少，需要交费。
2.  HTTP协议运行在TCP之上，所有传输的内容都是明文，HTTPS运行在SSL/TLS之上，SSL/TLS运行在TCP之上，所有传输的内容都经过加密的。
3.  HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4.  http的连接很简单，是无状态的；HTTPS协议是由HTTP+SSL协议构建的可进行加密传输、身份认证的网络协议，可以有效的防止运营商劫持，解决了防劫持的一个大问题，比http协议安全。