1、从输入URL到页面展示发生了什么?
(DNS域名解析、TCP 链接、HTTP请求、HTTP响应、渲染)
(1)解析 URL,分析协议头,再分析主机名是域名还是 IP地址;
(2)如果主机名是域名的话,则发送一个 DNS 查询请求到DNS 服务器,获得主机IP 地址
(3)使 用DNS 获 取 到 主 机 IP 地 址 后 ,建立TCP链接,向 目 的 地 址 发 送 一 个(http/https/protocol)请求,并且在网络套接字(Socket)上自动添加端口信息(http 80 https 443);若命中强缓存,则无需发送请求;
(4)等待服务器响应结果;
(5)将响应结果(html)经浏览器引擎解析后得到 渲染树(Render tree),浏览器将渲染树进行渲染后显示在显示器中,用户此时可以看到页面被渲染。
2、DNS的解析过程
3、什么是 CDN 服务?
CDN 是一个内容分发网络,通过对源网站资源的缓存,利用本身多台位于不同地域、不同运营商的服务器,向用户提供资源就近访问的功能。也就是说,用户的请求并不是直接发送给源网站,而是发送给 CDN 服务器,由 CDN 服务器将请求定位到最近的含有该资源的服务器上去请求。这样有利于提高网站的访问速度,同时通过这种方式也减轻了源服务器的访问压力。
4、CDN 访问过程
(1)用户输入访问的域名,操作系统向 LocalDns 查询域名的 ip 地址;
(2)LocalDns 向 ROOT DNS 查询域名的授权服务器(这里假设 LocalDns 缓存过期);
(3)ROOT DNS 将域名授权 dns 记录回应给 LocalDns;
(4)LocalDns 得到域名的授权 dns 记录后,继续向域名授权 dns 查询域名的 ip 地址;
(5)域名授权dns 查询域名记录后(一般是CNAME ),回应给 LocalDns;
(6)LocalDns得到域名记录后,向智能调度DNS 查询域名的 ip 地址;
(7)智能调度DNS 根据一定的算法和策略(比如静态拓扑,容量等),将最适合的 CDN 节点 ip 地址回应给 LocalDns;
(8)LocalDns 将得到的域名 ip 地址,回应给用户端;
(9) 用户得到域名 ip 地址后,访问站点服务器;
(10)CDN 节点服务器应答请求,将内容返回给客户端.(缓存服务器一方面在本地进行保存,以备以后使用,二方面把获取的数据返回给客户端,完成数据服务过程);
5、TCP的三次握手
(1)浏览器发送SYN包说要建立连接;
(2)服务端收到后,发送回应ACK+SYN说好的;
(3)浏览器收到ACK+SYN包后,发送ACK包说好的,TCP连接成功。
6、浏览器缓存机制
浏览器缓存分为强缓存和协商缓存,
强缓存:响应头中的cache-control/expires(优先级cache-control>expires)
协商缓存:前是响应头中的字段/后是请求头中的字段 Last-Modified/If-Modified-Since Etag/If-None-Match
在HTTP/1.1中,Cache-Control是最重要的规则,主要用于控制网页缓存,主要取值为:
-
public:所有内容都将被缓存(客户端和代理服务器都可缓存)
-
private:所有内容只有客户端可以缓存,Cache-Control的默认取值
-
no-cache:客户端缓存内容,但是是否使用缓存则需要经过协商缓存来验证决定
-
no-store:所有内容都不会被缓存,即不使用强制缓存,也不使用协商缓存
-
max-age=xxx (xxx is numeric):缓存内容将在xxx秒后失效
Last-Modify/If-Modify-Since原理(Etag/If-None-Match原理类似)
浏览器第一次请求一个资源的时候,服务器返回的header中会加上Last-Modified,Last-Modified是一个时间,标识该资源的最后修改时间,例如Last-Modified: Thu,31 Dec 2037 23:59:59 GMT。
当浏览器再次请求该资源时,request的请求头中会包含If-Modified-Since,该值为缓存之前返回的Last-Modified。服务器收到If-Modified-Since后,根据资源的最后修改时间判断是否命中缓存。
如果命中缓存,则返回304,并且不会返回资源内容,并且不会返回Last-Modified。
注意:(1)expires是http1.0的产物,存在主要是为了兼容,如果用了cache-control,会直接忽略掉 expires;
(2) ETag 比较的是响应内容的特征值,每次有内容改变值都会改变,根据hash等算法生成,具有一定的复杂度;而Last-Modified 比较的是响应内容的修改时间,只能精确到秒级别。这两个是相辅相成的,并不是说有了ETag就不该有Last-Modified,有Last-Modified就不该有ETag。同时传入服务器时,服务器可以根据自己的缓存机制的需要,选择ETag或者是Last-Modified来做缓存判断的依据,甚至可以两个同时参考。
7、浏览器的渲染原理
(1)首先解析收到的文档,根据文档定义构建一棵 DOM 树,DOM 树是由 DOM 元素及属性节点组成的。
(2)然后对 CSS进行解析,生成 CSSOM 规则树。
(3)根据 DOM树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象, 渲染对象是一个包含有颜色和大小等属性的矩形,渲染对象和 DOM 元素相对应,但这种对应关系不是一对一的,不可见的 DOM 元素不会被插入渲染树。还有一些 DOM 元素对应 几个可见对象,它们一般是一些具有复杂结构的元素,无法用一个矩形来描述。
(4)当渲染对象被创建并添加到树中,它们并没有位置和大小,所以当浏览器生成渲染树以后,就会根据渲染树来进行布局(也可以叫做回流)。这一阶段浏览器要做的事情是 要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
(5)布局阶段结束后是绘制阶段,遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上,绘制使用 UI 基础组件。值得注意的是,这个过程是逐步完成的,为 了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的 html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。
8、渲染过程中遇到 JS 文件怎么处理?(浏览器解析过程)
JavaScript 的加载、解析与执行会阻塞文档的解析,也就是说,在构建 DOM 时,HTML 解析器若遇到了 JavaScript,那么它会暂停文档的解析,将控制权移交给 JavaScript 引擎,等 JavaScript 引擎运行完毕,浏览器再从中断的地方恢复继续解析文档。 也就是说,如果你想首屏渲染的越快,就越不应该在首屏就加载 JS 文件,这也是都 建议将 script 标签放在 body标签底部的原因。当然在当下,并不是说 script 标签必须放 在底部,因为你可以给 script标签添加 defer 或者 async 属性。
9、async 和 defer 的作用是什么?有什么区别?(浏览器解析过程)
(1)脚本没有 defer 或 async,浏览器会立即加载并执行指定的脚本,也就是说不等
待后续载入的文档元素,读到就加载并执行。
(2)defer 属性表示延迟执行引入的 JavaScript,即这段 JavaScript 加载时 HTML 并
未停止解析,这两个过程是并行的。当整个 document 解析完毕后再执行脚本文件,在 DOMContentLoaded 事件触发之前完成。多个脚本按顺序执行。
(3)async 属性表示异步执行引入的 JavaScript,与 defer 的区别在于,如果已经加
载好,就会开始执行,也就是说它的执行仍然会阻塞文档的解析,只是它的加载过程不会阻塞。多个脚本的执行顺序无法保证。
DOMContentLoaded 事件和 Load 事件的区别?
当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,
而无需等待样式表、图像和子框架的加载完成。Load 事件是当所有资源加载完成后触发的。
10、CSS 如何阻塞文档解析?(浏览器解析过程)
css本身不会阻塞文档解析,但是会阻塞DOM渲染,css加载会阻塞后面js语句的执行。
理论上,既然样式表不改变 DOM 树,也就没有必要停下文档的解析等待它们,然而,
存在一个问题,JavaScript 脚本执行时可能在文档的解析过程中请求样式信息,如果样式还没有加载和解析,脚本将得到错误的值,显然这将会导致很多问题。
所以如果浏览器尚未完成 CSSOM 的下载和构建,而我们却想在此时运行脚本,那么
浏览器将延迟 JavaScript 脚本执行和文档的解析,直至其完成 CSSOM 的下载和构建。也就是说,在这种情况下,浏览器会先下载和构建 CSSOM,然后再执行 JavaScript,最后再继续文档的解析。
11、什么是重绘和回流?(浏览器绘制过程)
重绘: 当渲染树中的一些元素需要更新属性,而这些属性只是影响元素的外观、风格,而
不会影响布局的操作,比如 background color,我们将这样的操作称为重绘。
回流:当渲染树中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作,会影响到布局的操作,这样的操作我们称为回流。
常见引起回流属性和方法:
任何会改变元素几何信息(元素的位置和尺寸大小)的操作,都会触发回流。
(1)添加或者删除可见的 DOM 元素;
(2)元素尺寸改变——边距、填充、边框、宽度和高度
(3)内容变化,比如用户在 input 框中输入文字
(4)浏览器窗口尺寸改变——resize 事件发生时
(5)计算offsetWidth 和 offsetHeight 属性scrollWidth, clientWidth
(6)设置style 属性的值
(7)当你修改font-size。
回流必定会发生重绘,重绘不一定会引发回流。回流所需的成本比重绘高的多,改变父节点里的子节点很可能会导致父节点的一系列回流。
12、如何减少回流?(浏览器绘制过程)
(1)使用 transform 替代 top
(2)不要把节点的属性值放在一个循环里当成循环里的变量
(3)不要使用 table 布局,可能很小的一个小改动会造成整个 table 的重新布局
(4)把 DOM 离线后修改。如:使用 documentFragment 对象在内存里操作 DOM
(5)不要一条一条地修改 DOM 的样式。与其这样,还不如预先定义好 css 的 class,
然后修改 DOM 的 className。
13、 为什么操作 DOM 慢?(浏览器绘制过程)
一些 DOM 的操作或者属性访问可能会引起页面的回流和重绘,从而引起性能上的消耗。
14、请描述一下 cookies,sessionStorage 和 localStorage 的区别
浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。
(1)cookie 其实最开始是服务器端用于记录用户状态的一种方式,由服务器设置,在客户端存储,然后每次发起同源请求时,发送给服务器端。cookie 最多能存储 4 k 数据,它的生存时间由 expires属性指定,并且 cookie 只能被同源的页面访问共享。
(2)sessionStorage是 html5 提供的一种浏览器本地存储的方法,它借鉴了服务器端session
的概念,代表的是一次会话中所保存的数据。它一般能够存储 5M 或者更大的数据,它在当前窗口关闭后就失效了,并且 sessionStorage 只能被同一个窗口的同源页面所访问共享。
(3)localStorage 也是html5 提供的一种浏览器本地存储的方法,它一般也能够存储 5M 或者更大的数据。它和sessionStorage不同的是,除非手动删除它,否则它不会失效,并且 localStorage 也只能被同源页面所访问共享。
15、cookie 与 session 的区别? 服务端如何清除 cookie?
主要区别在于,session 存在服务端,cookie 存在客户端。session 比 cookie 更
安全,而且 cookie 不一定一直能用(可能被浏览器禁止)。服务端可以通过设cookie
的值为空并设置一个及时的 expires 来清除存在客户端上的 cookie。
cookie可能会包含一些关键信息,而 session 一般都是一个加密串。
16、Canvas 和 SVG 有什么区别?
Canvas 是一种通过 JavaScript 来绘制 2D 图形的方法。Canvas 是逐像素来进行渲染的,
因此当我们对 Canvas进行缩放时,会出现锯齿或者失真的情况。
SVG 是一种使用XML 描述 2D 图形的语言。SVG 基于XML,这意味着 SVG DOM中的每个元素都是可用的。我们可以为某个元素附加 JavaScript事件监听函数。并且 SVG保存的是图形的绘制方法,因此当 SVG 图形缩放时并不会失真。
Canvas适用场景
Canvas提供的功能更原始,适合像素处理,动态渲染和大数据量绘制
SVG适用场景
SVG功能更完善,适合静态图片展示,高保真文档查看和打印的应用场景
17、简单介绍使用图片 base64 编码的优点和缺点。
base64 编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,在页面上
显示的时候,可以用该字符串来代替图片的
url 属性。
使用 base64 的优点是:
(1)减少一个图片的 HTTP 请求
使用 base64 的缺点是:
(1)根据 base64 的编码原理,编码后的大小会比原文件大小大 1/3,如果把大图片编码到
html/css 中,不仅会造成文件体
积的增加,影响文件的加载速度,还会增加浏览器对 html 或 css 文件解析渲染的时间。
(2)使用 base64 无法直接缓存,要缓存只能缓存包含 base64 的文件,比如 HTML 或者 CSS,这相比域直接缓存图片的效果要差很多。
(3)兼容性的问题,ie8 以前的浏览器不支持。一般一些网站的小图标可以使用 base64 图片来引入。
18、前端需要注意哪些 SEO ?
(1)合理的 title、description、keywords:搜索对着三项的权重逐个减小,title 值强调重
点即可,重要关键词出现不要超过 2 次,而且要靠前,不同页面 title要有所不同;
description 把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面description 有所不同;
keywords 列举出重要关键词即可。
(2)语义化的HTML代码,符合 W3C 规范:语义化代码让搜索引擎容易理解网页。
(3)重要内容HTML代码放在最前:搜索引擎抓取 HTML 顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容肯定被抓取。
(4)重要内容不要用 js 输出:爬虫不会执行 js 获取内容
(5)少用 iframe:搜索引擎不会抓取 iframe 中的内容
(6)非装饰性图片必须加 alt
(7)提高网站速度:网站速度是搜索引擎排序的一个重要指标
前端缓存有哪些?
http缓存、webStorage、cookie、indexDB、Application Cache、PWA Mainfest、Service workers
indexDB是客户端的大容量存储
IndexDB就是浏览器提供给本地的数据库,可以被JS创建和操作.就数据库类型而言,IndexDB属于非关系型数据库;
应用缓存 Application Cache
HTML5 引入了应用程序缓存,这意味着 Web 应用程序可以被缓存,然后在无互联网连接的时候进行访问。
应用程序缓存使得应用程序有三个优点:
- 离线浏览 - 用户可以在离线时使用应用程序
- 快速 - 缓存的资源可以更快地加载
- 减少服务器加载 - 浏览器只从服务器上下载已更新/已更改的资源
manifest 属性应该被 Web 应用程序中您想要缓存的每个页面包含。
manifest 文件是一个简单的文本文件,列举出了浏览器用于离线访问而缓存的资源。
使用:
<!DOCTYPE HTML><html manifest="demo.appcache">...</html>
manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件可分为三个部分:
-
CACHE MANIFEST
- 在此标题下列出的文件将在首次下载后进行缓存
-
NETWORK
- 在此标题下列出的文件需要与服务器的连接,且不会被缓存
-
FALLBACK
- 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
CACHE MANIFEST# 2012-02-21 v1.0.0/theme.css/logo.gif/main.jsNETWORK:login.phpFALLBACK:/html/ /offline.html
PWA Mainfest 渐进式应用程序
Manifest就是一个json文件,在里面给出了诸如主题、背景色、图标等一系列的描述,用来让Web应用更接近于原生应用。
<link rel="mainfest" href="/mainfest.json">
{
"name":"hackerWeb", // 应用程序的名称,
"short_name":"hackerWeb", // 应用名称缩写
"lang":"en-US", // 定义语言
"start_url":"", // 指定设备启东时的url
"scope":"/myapp", // 定义应用程序可以访问的范围
"display":"standalone", // 定义开发人员对web应用程序的首选显示模式:fullscreen-全屏显示,standalone-类似独立应用程序,minimal-ui - 有浏览器栏的独立程序,browser-浏览器显示, fullscreen > standalone > minimal-ui > browser
"background_color":"#fff", // 程序预定义背景色,不能替代程序的真正背景色
"theme_color":"#fff", // 定义应用程序默认主题色
"description":"test for app", // 程序的描述
"dir":"ltr", // 名称,短名称,描述的文本方向,ltr-从左到右,rtl-从右到左,auto-浏览器自动判断
"orientation":"any", // 定义web程序顶级的默认方向
"icons":[ // 程序的图标的图像数组
{
"src":"icon/lower.png", // 图片路径
"size":48 x 48, // 图片尺寸
"type":"image/webp" // 图片类型
}
],
"prefer_related_applications":false, // 指定一个布尔值,提示用户代理向用户指示指定的相关应用程序可用,并建议通过web应用程序.
"related_applications":[ // 指定底层可安装或访问的本机应用程序
{
"platform":"web" // 找到应用程序的平台,
"url":"", // 找到应用程序的url
"id":"", // 指定平台上应用程序ID
}
]
}
//https://juejin.cn/post/6933231057823072264#heading-4
Service workers
有一个困扰web用户多年的难题---丢失网络连接,虽然现在有很多技术尝试解决这一难题,如:离线页面,但是仍然没有一个好的统筹机制对资源缓存和自定义网络请求进行控制.因此service workers应运而生,service workers可以使你的应用优先访问本地缓存资源,所以在离线状态下,没有通过网络接受更多的数据前,仍可以提供基本的功能. 它是一个服务器与浏览器的中间人角色,如果网站中注册了service worker,那么可以拦截当前网站的所有请求,进行判断(编写脚本处理)