性能优化、http、缓存
本篇问题基本上全部是高频、超高频问题，基本上都是必问的，而且了解性能优化、缓存、输入url的过程，对实际开发也有不小的帮助和提升
问题按照一定的顺序，毕竟了解了url输入过程，才能针对每个环节进行性能优化
自问自答，全部简答，给个大致方向，具体每个问题的详细讲解还要去看对应的长篇大论的博客
输入url到页面展示的过程
超高频问题，面试官通过问这道题，可以衍生出很多其他问题，比如http、tcp三次握手、资源加载、白屏优化、重绘回流等
- 输入域名后，dns解析将域名解析成ip地址，访问ip地址，通过tcp协议与服务端建立通信，发送http请求获取资源，服务端处理请求并返回http报文，浏览器解析渲染页面，维持连接，之后断开连接。
- 这篇文章非常详细，但是讲的太全了orz 浏览器输入 URL 后发生了什么？
浏览器渲染
这一块往往面试官会从上一题中抽出来，单独考察这一块知识点
-
根据html解析出dom树，根据css解析成CSSOM树，结合dom树和css规则树生成渲染树，计算每个节点信息，进行布局 绘制
-
根据 HTML 解析 DOM 树
– 根据 HTML 的内容，将标签按照结构解析成为 DOM 树，DOM 树解析的过程是一个深度优先遍历。即先构建当前节点的所有子节点，再构建下一个兄弟节点。
– 在读取 HTML 文档，构建 DOM 树的过程中，若遇到 script 标签，则 DOM 树的构建会暂停，直至脚本执行完毕。 -
根据 CSS 解析生成 CSS 规则树
– 解析 CSS 规则树时 js 执行将暂停，直至 CSS 规则树就绪。
– 浏览器在 CSS 规则树生成之前不会进行渲染。 -
结合 DOM 树和 CSS 规则树，生成渲染树
– DOM 树和 CSS 规则树全部准备好了以后，浏览器才会开始构建渲染树。
– 精简 CSS 并可以加快 CSS 规则树的构建，从而加快页面相应速度。 -
根据渲染树计算每一个节点的信息（布局）
– 布局：通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸
– 回流：在布局完成后，发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。 -
根据计算好的信息绘制页面
– 绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。
– 重绘：某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的重绘。
– 回流：某个元素的尺寸发生了变化，则需重新计算渲染树，重新渲染。
tcp/ip协议
TCP/IP 是互联网相关的各类协议族的总称，比如：TCP，UDP，IP，FTP，HTTP，ICMP，SMTP 等都属于 TCP/IP 族内的协议。
TCP/IP模型是互联网的基础，它是一系列网络协议的总称。这些协议可以划分为四层，分别为链路层、网络层、传输层和应用层。
-
tcp三次握手，为何是三次而不是两次或者四次？
– 三次握手是客户端与服务端建立连接的过程，三次握手的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误”
– 三次握手完成两个重要的功能，既要双方做好发送数据的准备工作(双方都知道彼此已准备好)，也要允许双方就初始序列号进行协商，这个序列号在握手过程中被发送和确认
– 如果两次，那么服务器无法确定服务器的信息客户端是否能收到，所以如果服务器先发送数据，可能后面的客户端都收不到，会出现问题
– TCP的三次握手和四次挥手，以及为什么要三次握手，而不是二次？
– TCP的三次握手与四次挥手理解及面试题（很全面） -
tcp与ip的区别
– tcp是传输层协议，ip是网络层协议 -
tcp与udp的区别
– tcp是面向连接，可靠传输
– udp不可靠性体现在无连接上，通信都不需要建立连接，想发就发
– 一文搞懂TCP与UDP的区别
http
面试点会涉及到版本进化，1.0和1.1区别，keep-alive，http缓存
- http的版本演化
- http0.9 只有get，只能响应html字符串
- http1.0 引入了post和head，每个tcp只能发送一个请求，发送完毕连接就关闭，请求其他资源需要重新建立连接，增加了数据格式content-type
- http1.1 新增方法put delete patch options，引入了持久连接，即tcp连接默认不关闭，不用声明connection:keep-alive，对同一个域名最大支持6个持久连接
- 同一个TCP连接里，所有的数据通信是按次序进行的。服务器只能顺序处理回应，前面的回应慢，会有许多请求排队，造成"队头堵塞"（Head-of-line blocking）
为避免上述问题，两种方法：一是减少请求数，二是同时多开持久连接 - http2.0 复用TCP连接，在一个连接里，客户端和浏览器都可以同时发送多个请求或回应，且不用按顺序一一对应，避免了“队头堵塞“,此双向的实时通信称为多工（Multiplexing）
引入头信息压缩机制（header compression），头信息使用gzip或compress压缩后再发送；客户端和服务器同时维护一张头信息表，所有字段都会存入这个表，生成一个索引号，不发送同样字段，只发送索引号，提高速度 - http2.0 允许服务器未经请求，主动向客户端发送资源，即服务器推送（server push）
还有http状态码，1-5，常见的200 301 302 400 401 403 404 409 500 502 504等
content-type常见的值，text/html image/png application/json
https
面试点会涉及 加密，对称加密、非对称加密，CA证书，公钥秘钥等
http缓存
面试会涉及到强缓存协商缓存
- 强缓存 expires过期时间 catch-control设置max-age表示请求缓存后多少秒内不再发起请求
- 协商缓存 catch-control设置no-catch
- if-modified-since last-modified
- etag if-not-match
- http缓存详解，http缓存推荐方案
- https://www.jianshu.com/p/227cee9c8d15
http头部
Accept：指定客户端能够接收的内容类型。
Accept-Charset：浏览器可以接受的字符编码集。
Accept-Encoding：指定浏览器可以支持的web服务器返回内容压缩编码类型。
Accept-Language：浏览器可接受的语言。
Cache-Control：指定请求和响应遵循的缓存机制。
Connection：表示是否需要持久连接。（HTTP 1.1默认进行持久连接）
CookieHTTP：请求发送时，会把保存在该请求域名下的所有cookie值一起发送给web服务器。
Content-Length：请求的内容长度。
Content-Type：请求的与实体对应的MIME信息。
Date：请求发送的日期和时间。
From：发出请求的用户的Email。
Host：指定请求的服务器的域名和端口号。
Referer：先前网页的地址，当前请求网页紧随其后,即来路。
User-Agent：的内容包含发出请求的用户信息。
前端性能优化
终于到这一题了，这个问题涉及的方面太多了，最好结合输入url后的过程去讲，按照执行顺序加载顺序，想一下每一步的可优化点，避免面试的时候这扯一下，那扯一下，思路混乱，容易卡壳
-
首先网络层面
– 减少DNS查询次数，减少域名数，DNS预获取
– 减少http请求数，比如css雪碧图，降低资源大小，资源进行压缩，压缩图片
– tcp 开启keep-alive保持连接，http1.1默认开启
– 同一个域名最大支持6个tcp连接（大部分浏览器支持），比如页面图片资源较多，可以开启image1.xx.com，image2.xx.com，一直到image6.xx.com
– 利用http缓存，缓存一切可缓存的静态资源
– CDN缓存分发
– 服务端接口合并，一个页面接口太多，合并成一个接口 -
渲染层面
– css、js文件加载顺序，css放头部，js放底部，js文件根据功能可以配置defer或者async，注意defer和async的区别
– 避免图片空src
– 首屏内容的css可以使用内部css，style标签
– 减少dom数，降低dom操作，减少重绘和回流，比如图片指定好宽高避免重绘，图片不会等待图片的加载完毕，会直接渲染下面的标签，如果图片加载出来，由于图片要占用空间，决定是否重新加载页面，这个概念叫reflow。（优化的方式——给图片宽高）
– 图片懒加载，先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。
– 组件库按需加载
– 减少js动画使用，或使用css3动画代替
– HTML使用viewport，viewport可以加速页面的渲染，如<meta name=”viewport” content=”width=device-width, initial-scale=1″>
– 避免页面跳转，也就是使用单页面应用的开发，每次页面跳转，就是一次html文件的下载过程。而这个过程，我们首先从服务端下载网页，再进行渲染，网页性能体验会很差。而单页面应用，它从一开始，就把完整的网页给加载到本地。 -
webpack打包优化，文件压缩，开启gzip，开启 tree-sharking，关闭source-map，切割成多个chunk.js
-
服务端渲染
-
vue react 小程序的优化方式放在后面篇章整理
-
参考
– 前端不止：Web性能优化 - 关键渲染路径以及优化策略
– 前端性能优化实战
– 移动端性能优化的方法
– 毫秒必争，前端网页性能最佳实践
– Performance — 前端性能监控
跨域
什么是跨域，如何跨域，对跨域的理解，跨域请求资源的方法有哪些
- 浏览器同源策略，协议-域名-端口都相同，其他均为跨域
- 解决跨域，jsonp、CROS、nginx
- 跨域我的理解是
– 现在后台都开发jsonp接口了，前台可以直接使用jsonp请求解决跨域
– 使用前端开发框架的时候，使用webpack启动本地服务器，请求服务端部署的接口存在跨域问题，可以在devServer里面配置代理，解决开发时碰到的跨域问题
– 实际代码部署到后台，如果是在同一服务器上就不存在跨域问题了
– 如果最后部署的时候，前端页面代码和请求资源没有部署在同一个服务器上，后台可以在响应头的Access-Control-Allow-Origin这个字段上配置前台代码部署的服务器地址，也就是CROS方式解决跨域
– nginx转发代理解决跨域，我没有具体配置过使用过
– 其他情况人家没有配置让你的网页访问，还想跨域访问，不是黑客行为了吗，哈哈
原生js实现ajax，ajax的工作原理
3年前面试被问到过js手写一个ajax，主要分为，创建XMLHTTPRequest对象，open，send，注册事件onreadystatechange监听状态
路由是如何实现的
hash
history
- [前端路由的实现方式(https://www.jianshu.com/p/5a5813648d87)
为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？
- 跨域友好，没有跨域问题，一般这种上报数据，代码要写通用的，img 天然支持跨域；（排除 ajax）
- 执行过程无阻塞，不会阻塞页面加载，影响用户的体验，只要 new Image 对象就好了, 通过它的onerror和onload事件来检测发送状态；（排 除 JS/CSS 文件资源方式上报）
- GIF的最低合法体积最小，在所有图片中，简单、安全、相比PNG/JPG体积最小；（tip:最小的BMP文件需要74个字节，PNG需要67个字节，而合法的GIF，只需要43个字节）
- 能够完成整个 HTTP 请求+响应（尽管不需要响应内容）
- 触发 GET 请求之后不需要获取和处理数据、服务器也不需要发送数据
- 相比 XMLHttpRequest 对象发送 GET 请求，性能上更好
websocket实现原理
双向通信
未完待续，持续补充…
扫一扫
655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
