内联元素和块级元素

HTML4中，元素被分成两大类：inline （内联元素）与 block （块级元素）。

iFrame缺点

浏览器内核

主要分成两部分：渲染引擎和 JS 引擎。

渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用 PDF 阅读器插件，可以显示 PDF 格式。

JS 引擎：解析和执行 javascript 来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

常见浏览器

Trident：这种浏览器内核是 IE 浏览器用的内核，因为在早期 IE 占有大量的市场份额，所以这种内核比较流行，以前有很多网页也是根据这个内核的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好。但是由于 IE 的高市场占有率，微软也很长时间没有更新 Trident 内核，就导致了 Trident 内核和 W3C 标准脱节。还有就是 Trident 内核的大量 Bug 等安全问题没有得到解决，加上一些专家学者公开自己认为 IE 浏览器不安全的观点，使很多用户开始转向其他浏览器。

Gecko：这是 Firefox 和 Flock 所采用的内核，这个内核的优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是代价是也显而易见就是要消耗很多的资源，比如内存。

Webkit：Webkit 是 Safari 采用的内核，它的优点就是网页浏览速度较快，虽然不及 Presto 但是也胜于 Gecko 和 Trident，缺点是对于网页代码的容错性不高，也就是说对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。WebKit 前身是 KDE 小组的 KHTML 引擎，可以说 WebKit 是 KHTML 的一个开源的分支。

Blink：谷歌在 Chromium Blog 上发表博客，称将与苹果的开源浏览器核心 Webkit 分道扬镳，在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。其实 Blink 引擎就是 Webkit 的一个分支，就像 webkit 是KHTML 的分支一样。Blink 引擎现在是谷歌公司与 Opera >Software 共同研发，上面提到过的，Opera 弃用了自己的 Presto 内核，加入 Google 阵营，跟随谷歌一起研发 Blink

常见浏览器

DOMContentLoaded事件和Load事件的区别

当初始化的HTML文档被完成加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待图像等外部文件的加载完成。

Load事件是当所有资源加载完成后触发。

如何实现浏览器内多个标签页之前的通信

disabled和readyonly的区别

disabled 指当intput元素加载时禁用此元素。input内容不会随表单提交。

readonly规定输入字段为只读。input内容会随着表单提供。

无论设置readonly还是disabled，通过js脚本都能更改input的value

前端性能优化

内容方面:

自定义组件

var shadow = this.attachShadow({mode: 'open'});
var div = document.createElement('div');
var style = document.createElement('style');
shadow.appendChild(style);
shadow.appendChild(div);

回调:

url

组成:

移动端显示适配

在Web中，浏览器为我们提供了window.devicePixelRatio来帮助我们dpr(设备像素比), 单位: px/em/rem

  • px： 像素，相对屏幕分辨率而言
  • em: 相对于自身字体fontSize的大小，如果自身指定fonstSize=20px，那1em=20px
  • rem: 相对于根元素<html>fontSize的大小，如果<html>的fontSize=20px，那么rem=20px
  • vw/vh: 相当于屏幕宽度/高度的百分比

页面渲染过程

等待获取CSS不会阻塞HTML的解析或下载，但是它会阻塞JavaScript，因为JavaScript经常用于查询元素的CSS属性 创建图层的属性和元素: <video>、<canvas>、opacity、3D transform、will-change元素等

加载检测方法

MVC、MVP、MVVM模式

Model、View、Control三者相互依赖，修改起来要兼顾其他两者，维护较困难，于是出现了MVP。

View和Model不再相互依赖，使代码耦合降低。但由于Presenter和View相互依赖，Presenter没办法单独做单元测试。所以对View分割一部分叫View接口，Presenter只依赖View接口，增加了复用性。 MVP中因为Presenter发送数据到View展示，仍需要大量代码，无法自动更新，于是出现了MVVM。

Vue项目中，new Vue()就是一个ViewModel，View是template模板。Model就是Vue的选项如data、methods等。

Web项目架构简介

监控页面性能

Performance接口可以获取到当前页面中与性能相关的信息。

字段含义

Performance.timing属性

白屏时间: domInteractive-fetchStart

首屏时间: domContentLoadedEventEnd-fetchStart

浏览器缓存

浏览器缓存(Brower Caching)是浏览器对之前请求过的文件进行缓存，以便下一次访问时重复使用，节省带宽，提高访问速度，降低服务器压力

http缓存机制主要在http响应头中设定，响应头中相关字段为Expires、Cache-Control、Last-Modified、Etag

浏览器缓存分为强缓存和协商缓存:

  • 强缓存: 浏览器不会向服务器发送任何请求，直接从本地缓存中读取文件并返回Status Code: 200 OK
  • 协商缓存: 向服务器发送请求，服务器会根据这个请求中的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源。
强缓存参数
  • Expires: 过期时间，如果设置了时间，则浏览器会在设置的时间内直接读取缓存，不再请求
  • Cache-Control:
    1. max-age: 用来设置资源可以被缓存多长时间，单位为秒。
    2. s-maxage: 和max-age是一样的，不过它中针对代理服务器缓存而言
    3. public: 指示响应可被任何缓存区缓存
    4. private: 只能针对个人用户，而不能被代理服务器缓存
    5. no-cache: 强制客户端直接向服务器发送请求，也就是说每次请求都必须向服务器发送(评估缓存的有效性)。服务器收到请求后判断资源是否变更，是则返回新内容，否则返回304
    6. no-store: 禁止一切缓存
协商缓存参数
  1. Etag/If-None-Match
    • Etag: 由服务器生成返回给前端，用来帮助服务器控制Web端的缓存验证。(Apache中默认是对文件的索引节(INode)，大小(Size)和最后修改时间(MTime)进行Hash后得到的)
    • If-None-Match: 当资源过期时，浏览器发给服务器请求会带上头if-none-match(值是Etag值)。服务器收到请求进行比对，决定返回200或304
  2. Last-Modified/If-Modified-Since
    • Last-Modified: 浏览器向服务器发送资源最后的修改时间
    • If-Modified-Since: 当资源过期时(max-age)，浏览器发给服务器的请求会带上头if-modified-since，表示请求时间。服务器收到会与资源最后修改时间(Last-Modified)对比，有修改则返回最新资源，否则返回304
  • Last-Modified/If-Modified-Since的时间精底是秒，而Etag可以更精确
  • Etag优先级是高于Last-Modified的，所以服务器会优化验证Etag
  • Last-Modified/If-Modified-Since是http1.0的头字段

重定向

  1. 301 Moved Permanently(永久移动): 被请求资源已永久移动到新位置
  2. 302 Found(发现): 要求客户端执行临时重定向(原始描述语为"Moved Temporarily")。由于这样的重定向是临时的，客户端应该继续向原有地址发送以后请求。
  3. 303 See Other(查看其他): 允许重定向时改变请求方法
  4. 307 Temporary Redirect(临时重定向): 与302类似，但不允许更改HTTP方法(Get、Post)
  5. 308 Permanent Redirect(永久重定向): 与301类似，但不允许更改HTTP方法

301和302本来在规范中是不允许重定向时改变请求方式的(将POST改为GET)，但是浏览器却允许重定向时改变请求方法。所以出了303允许重定向时改变请求方法，以及307、308不允许重定向时改变请求方法。 网址劫持(URL Hijacking): 从网址A做一个302重定向到网址B时，搜索引擎(尤其是Google)可会显示网址A，而内容为网址B，这样相当于网址A白嫖了网址B的内容。

跨域请求携带Cookie

  1. 前端请求设置request对象的属性withCredentials为true
    • XMLHttpRequest.withCredentials属性是一个boolean类型，它指示了是否该使用类似cookies，authorization，headers(头部授权)或TLS客户端证书这一类资格证书来创建一个跨站点访问控制
  2. 在服务端设置Access-Control-Allow-Origin
  3. 在服务端设置Access-Control-Allow-Credentials

HTTP2.0和HTTP1.x相比的新特性

  • 新的二进制格式(Binary Format), HTTP1.x的解析是基于文本，HTTP2.0的协议解析采用的是二进制格式。
  • 多路复用(MultiPlexing)，连接共享，即每一个request都是用作连接共享机制的。一个request对应用一个id，这样一个链接上可以有多个request。
  • header压缩, HTTP2.0使用encoder来减少需要传输的header大小，通讯双方各cache一份header fields表，即避免了重复header的传输，又减小了需要传输的大小
  • 服务端推送(server push)，HTTP2.0也具有server push功能

OPTIONS请求

预检请求，主要作用:

  1. 检测服务器支持的请求方法
  2. CORS中的预检请求 预检响应头response header的关键字段
response header 作用
Access-Control-Allow-Methods 返回了服务端允许的请求，包含GET/HEAD/PUT/PATCH/POST/DELETE
Access-Control-Allow-Credentials 允许跨域携带cookie(跨域请求要携带cookie必须设置为true)
Access-Control-Allow-Origin 允许跨域请求的域名，这个可以在服务端配置一些信任的域名白名单
Access-Control-Request-Headers 客户端请求所携带的自定义首部字段content-type