性能优化 相关

性能优化：

代码相关优化

1. 将样式表放在首部-使用link标签将样式表放在文档的HEAD中

   遵循HTML规范，将样式表放在头部，可以有效避免白屏和无样式内容的闪烁。

2. 将脚本放在底部

   将脚本放在顶部会造成的影响: 脚本阻塞对其后面内容的显示; 脚本会阻塞对其后面组件的下载;将脚本放在底部</body>标签之前。

   或者使用async/await加载

代码压缩

1. Gzip 压缩

gzip压缩可以节省50%-70%的网络开销

浏览器支持的压缩类型可以通过network的Accept-Encoding: gzip, deflate来查看。支持deflate的浏览器也支持gzip，但很多浏览器支持gzip却不支持deflate，因此gzip是最理想的压缩方法

2. 代码压缩

前端打包压缩的有grunt，gulp，webpack，可以对HTML，CSS，Javascript代码压缩

首屏加载

https://blog.csdn.net/clark_fitz817/article/details/79513046

https://segmentfault.com/a/1190000019355672?utm_source=tag-newest

https://zhangzifan.com/website-speed-seo.html

白屏加载和首屏加载时间的区别

白屏时间是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。

首屏时间是指浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但在当前视窗的内容需要。

白屏时间是首屏时间的一个子集。

用户体验对web网页来说很重要，而首屏加载是用户体验中最重要的环节之一，可能没有之一。

• cdn分发

  通过在多台服务器部署相同内容，当用户访问时，服务器根据用户跟哪台服务器地理距离小或者哪台服务器此时的压力小来决定哪台服务器响应这个请求。

• 后端要做好缓存

  比如搭建缓存服务器、数据库查询缓存、接口缓存。

• http缓存方案

  现在流行的方式是文件hash+强缓存的一个方案。

• 利用好async和defer这两个属性

  如果是独立功能的js文件，可以加入async属性。如果是优先级低且没有依赖的js，我们可以加入defer属性。

• 渲染的优先级

  前端可以对接口排优先级，或者对页面的模块排优先级，先请求和渲染优先级高的部分。

• 前端做一些接口缓存

  前端也可以做接口缓存，缓存的位置有两个，一个是内存，即保存给变量，另一个是localStorage。比如用户的签到日历（展示用户是否签到），我们可以缓存这样的接口到localStorage，有效期是当天。或者有个列表页，我们总是缓存上次的列表内容到本地，下次加载时，我们先从本地读取缓存，并同时发起请求到服务器获取最新列表。

• 页面使用骨架屏

  意思是在首屏加载完成之前，通过渲染一些简单元素进行占位。骨架屏虽然不能提高首屏加载速度，但可以减少用户在首屏等待的急躁情绪。这点很有效，在很多成熟的网站都有大量应用。

SPA

单页web应用。

它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。

SPA的特点：

• 速度：更好的用户体验，让用户在web app感受native app的速度和流畅，
• MVVM：经典MVVM开发模式，前后端各负其责。
• ajax：重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交。
• 路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载

SPA的优缺点

单页Web程序的出现是客户端发展的必然结果，但是该技术也是有些局限性，所以采用之前需要了解清楚它的优缺点。

优点：

1). 良好的交互体验
用户不需要重新刷新页面，获取数据也是通过Ajax异步获取，页面显示流畅。
2). 良好的前后端工作分离模式
单页Web应用可以和RESTful规约一起使用，通过REST API提供接口数据，并使用Ajax异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分。
3). 减轻服务器压力
服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
4). 共用一套后端程序代码
不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端；

缺点：

1. 首屏渲染等待时长： 为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，必须得加载完毕，才能渲染出首屏
2. seo（搜索引擎优化）不友好：爬虫只能拿到一个div，认为页面是空的，不利于seo

服务器端渲染的原理

https://www.cnblogs.com/it-dennis/p/11674358.html

服务器渲染

服务器接到用户请求之后，计算出用户需要的数据，然后将数据更新成视图（也就是一串dom字符）发给客户端，客户端直接将这串字符塞进页面即可。这样做的好处是响应很快，用户体验会比较好，另外对于搜索引擎来说也是友好的，有SEO优化。nodejs层的服务器渲染，还有一个明显的好处就是前端性能优化更顺手了，可操作的空间大了。但是缺点也很明显，如果不是增加一个node层的话，前后端责任分工不明，不能很好的并行开发。

浏览器渲染原理

https://www.cnblogs.com/it-dennis/p/11674358.html

页面崩了怎么监控

利用 window 对象的 load 和 beforeunload 事件实现了网页崩溃的监控。

这个方案巧妙的利用了页面崩溃无法触发 beforeunload 事件来实现的。

在页面加载时（load 事件）在 sessionStorage 记录 good_exit 状态为 pending，如果用户正常退出（beforeunload 事件）状态改为 true，如果 crash 了，状态依然为 pending，在用户第2次访问网页的时候（第2个load事件），查看 good_exit 的状态，如果仍然是 pending 就是可以断定上次访问网页崩溃了！

但这个方案有问题：

1. 采用 sessionStorage 存储状态，但通常网页崩溃/卡死后，用户会强制关闭网页或者索性重新打开浏览器，sessionStorage 存储但状态将不复存在；
2. 如果将状态存储在 localStorage 甚至 Cookie 中，如果用户先后打开多个网页，但不关闭，good_exit 存储的一直都是 pending，完了，每有一次网页打开，就会有一个 crash 上报。

基于 Service Worker 的崩溃统计方案

随着 PWA 概念的流行，大家对 Service Worker 也逐渐熟悉起来。基于以下原因，我们可以使用 Service Worker 来实现网页崩溃的监控：

1. Service Worker 有自己独立的工作线程，与网页区分开，网页崩溃了，Service Worker 一般情况下不会崩溃；
2. Service Worker 生命周期一般要比网页还要长，可以用来监控网页的状态；
3. 网页可以通过 navigator.serviceWorker.controller.postMessage API 向掌管自己的 SW 发送消息。

• p1：网页加载后，通过 postMessage API 每 5s 给 sw 发送一个心跳，表示自己的在线，sw 将在线的网页登记下来，更新登记时间；
• p2：网页在 beforeunload 时，通过 postMessage API 告知自己已经正常关闭，sw 将登记的网页清除；
• p3：如果网页在运行的过程中 crash 了，sw 中的 running 状态将不会被清除，更新时间停留在奔溃前的最后一次心跳；
• sw：Service Worker 每 10s 查看一遍登记中的网页，发现登记时间已经超出了一定时间（比如 15s）即可判定该网页 crash 了。

图片的懒加载和预加载

https://blog.csdn.net/kjnsfijglqj/article/details/80711896

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

预加载会增加服务器的压力，可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。

懒加载：当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。

懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

懒加载的原理：

我们先将img标签中的src链接设置为一样的图片（空白图片），将真正的图片链接放在自定义属性中，如（data-src），当js监听到图片元素进入到可视窗口的时候，将自定义属性中的地址存储到src中，达到懒加载的效果。

两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。
懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

怎么看网站的性能如何

检测页面加载时间一般有两种方式，一种是被动去测：就是在被检测的页面置入脚本或探针，当用户访问网页时，探针自动采集数据并传回数据库进行分析，另一种主动监测的方式，即主动的搭建分布式受控环境，模拟用户发起页面访问请求，主动采集性能数据并分析，在检测的精准度上，专业的第三方工具效果更佳，比如说性能极客

web性能优化

降低请求量：合并资源，减少HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。

加快请求速度：预解析DNS，减少域名数，并行加载，CDN 分发。

缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存localStorage。

渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline。

通过哪些平台进行性能测试

https://www.cnblogs.com/zengfp/p/9888048.html

打包的性能优化

https://www.jianshu.com/p/3e9f907dd9a0

webpack项目太大了怎么办

https://www.jianshu.com/p/a64735eb0e2b

https://blog.csdn.net/qq_26708777/article/details/79210549?utm_source=blogkpcl4