广州蓝景分享—遇到网页慢，我们该怎么办？
前言
移动互联网时代，用户对于网页的打开速度要求越来越高。首屏作为直面用户的第一屏，其重要性不言而喻。优化用户体验更是我们前端开发非常需要 focus 的东西之一。
从用户的角度而言，当打开一个网页，往往关心的是从输入完网页地址后到最后展现完整页面这个过程需要的时间，这个时间越短，用户体验越好。所以作为网页的开发者，就从输入url到页面渲染呈现这个过程中去提升网页的性能。
所以输入URL后发生了什么呢？在浏览器中输入url会经历域名解析、建立TCP连接、发送http请求、资源解析等步骤。
http缓存优化是网页性能优化的重要一环。本文主要从网页渲染过程、性能指标的解读以及CDN应用优化三个角度，并对性能定位和性能优化做一个小结。
关键词：
通过工具（如何使用工具，怎么去看）定位问题
发现问题，对应的措施（提升页面）
监控（优化的东西 是持续性，不像bug一次性解决）
本质：两大范畴：加载 和 渲染
网页渲染过程
首先谈谈拿到服务端资源后浏览器渲染的流程：
解析 HTML 文件，构建 DOM 树，同时浏览器主进程负责下载 CSS 文件
CSS 文件下载完成，解析 CSS 文件成树形的数据结构，然后结合 DOM 树合并成 RenderObject 树
布局 RenderObject 树 （Layout/reflow），负责 RenderObject 树中的元素的尺寸，位置等计算
绘制 RenderObject 树 （paint），绘制页面的像素信息
浏览器主进程将默认的图层和复合图层交给 GPU 进程，GPU 进程再将各个图层合成（composite），最后显示出页面
经典面试题：输入url后，浏览器做了什么？
Url 首先进行DNS解析，找到目的服务器IP,建立TCP链接，发送http请求，服务器响应网页，浏览器接收对应的文件并解析，html 和css 通过对应的解析器生成并融合的成渲染树，渲染页面。
总结出问题出现的地方：
1。加载时间过长，加载很久
- 解析的过程太久，导致渲染很慢
前端性能指标的建立和解读
在我们的Google浏览器中已经内置了一个perfomance的功能，
Web Vitals 是 Google 的一项举措，旨在为web质量提供统一的指导，这些指标对于在网络上提供出色的用户体验至关重要。Web Vitals为了简化场景，帮助网站专注于最重要的指标，提出了Core Web Vitals。Core Web Vitals 是 Web Vitals 的子集，包含 LCP(Largest Contentful Paint)，FID(First Input Delay) 和 CLS(Cumulative Layout Shift)。
● LCP(Largest Contentful Paint)：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5秒内发生。
● FID(First Input Delay)：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的 FID 应为100毫秒或更短。
● CLS(Cumulative Layout Shift)：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的 CLS 应保持在0.1或更少。
从这三个指标的含义中我们可以发现这三个指标分别从页面的加载速度，页面的交互性和页面的视觉稳定性这三个角度来衡量页面的性能。
如果我们想自己采集页面的各项原始指标数据，该怎么做呢？浏览器为我们提供了原生的 Timing API
CDN介绍及工作原理
1、为什么要用CDN加速服务
如果一个网站（作为盈利渠道或是品牌窗口）需要吸引大流量， 以下几点因素是制胜的关键：
● 内容有吸引力
● 访问速度快
● 支持频繁的用户互动
● 可以在各处浏览无障碍
满足这些条件的前提就是：网站访问快
那么CDN就是一个加速网站访问的优秀解决方案
除此之外，CDN还有一些作用：
- 为了实现跨运营商、跨地域的全网覆盖
互联不互通、区域ISP地域局限、出口带宽受限制等种种因素都造成了网站的区域性无法访问。CDN加速可以覆盖全球的线路，通过和运营商合作，部署IDC资源，在全国骨干节点商，合理部署CDN边缘分发存储节点，充分利用带宽资源，平衡源站流量。阿里云在国内有500+节点，海外300+节点，覆盖主流国家和地区不是问题，可以确保CDN服务的稳定和快速。
- 为了保障你的网站安全
CDN的负载均衡和分布式存储技术，可以加强网站的可靠性，相当无无形中给你的网站添加了一把保护伞，应对绝大部分的互联网攻击事件。防攻击系统也能避免网站遭到恶意攻击。
- 为了异地备援
当某个服务器发生意外故障时，系统将会调用其他临近的健康服务器节点进行服务，进而提供接近100%的可靠性，这就让你的网站可以做到永不宕机。
- 为了节约成本投入
使用CDN加速可以实现网站的全国铺设，你根据不用考虑购买服务器与后续的托管运维，服务器之间镜像同步，也不用为了管理维护技术人员而烦恼，节省了人力、精力和财力。
- 为了让你更专注业务本身
CDN加速厂商一般都会提供一站式服务，业务不仅限于CDN，还有配套的云存储、大数据服务、视频云服务等，而且一般会提供7x24运维监控支持，保证网络随时畅通，你可以放心使用。并且将更多的精力投入到发展自身的核心业务之上。
优点：
● JS体积变小，使用CDN的第三方资源的JS代码，将不再打包到本地服务的JS包中。减小本地JS包体积，提高加载速度。
● 给网页加载提速
缺点：
● 请求变多
● 万一CDN资源路径有变动需要更改，建议自行搭建CDN库。
● 花钱
推荐BootCDN（有很多经过CDN加速的工具链接）
www.bootcdn.cn/
2、什么是CDN(深度) 更多的是存放分发静态内容
3、工作原理
借用阿里云官网的例子，来简单介绍CDN的工作原理。
假设通过CDN加速的域名为www.a.com，接入CDN网络，开始使用加速服务后，当终端用户（北京）发起HTTP请求时，处理流程如下：
当终端用户（北京）向www.a.com下的指定资源发起请求时，首先向LDNS（本地DNS）发起域名解析请求。
LDNS检查缓存中是否有www.a.com的IP地址记录。如果有，则直接返回给终端用户；如果没有，则向授权DNS查询。
当授权DNS解析www.a.com时，返回域名CNAMEwww.a.tbcdn.com对应IP地址。
域名解析请求发送至阿里云DNS调度系统，并为请求分配最佳节点IP地址。
LDNS获取DNS返回的解析IP地址。
用户获取解析IP地址。
用户向获取的IP地址发起对该资源的访问请求。
如果该IP地址对应的节点已缓存该资源，则会将数据直接返回给用户，例如，图中步骤7和8，请求结束。
如果该IP地址对应的节点未缓存该资源，则节点向源站发起对该资源的请求。获取资源后，结合用户自定义配置的缓存策略，将资源缓存至节点，例如，图中的北京节点，并返回给用户，请求结束。
从这个例子可以了解到：
（1）CDN的加速资源是跟域名绑定的。
（2）通过域名访问资源，首先是通过DNS分查找离用户最近的CDN节点（边缘服务器）的IP
（3）通过IP访问实际资源时，如果CDN上并没有缓存资源，则会到源站请求资源，并缓存到CDN节点上，这样，用户下一次访问时，该CDN节点就会有对应资源的缓存了。
想要了解更多关于IT前端技术问题，可以关注广州蓝景。
广州蓝景分享—遇到网页慢，我们该怎么办？相关推荐
- 广州蓝景分享—前端开发JavaScript中的Array对象与其他数组
各位小伙伴好,今天我们广州蓝景与大家分享一些前端技术知识. JavaScript中的Array对象与其他编程语言中的数组一样,可以将多个项目的集合存储在单个变量名下,并具有用于执行常见数组操作的成员. ...
- 广州蓝景分享—程序员必备的3个JavaScript插件,让你的视频更实用
今天,广州蓝景小编跟大家分享一些干货,程序员必备的3个JavaScript插件,让你的视频更实用. 下面就从这篇技术文章开始,我倾向于利用以图形交换格式 (GIF) 格式编码的屏幕截图,以尽可能减少额 ...
- 广州蓝景分享—目前微前端架构的几种技术选型，你了解吗？
各位编程的小伙伴,今天广州蓝景继续跟大家分享前端技术相关文章:微前端架构的几种技术选型,你了解吗?随着SPA大规模的应用,紧接着就带来一个新问题:一个规模化应用需要拆分. 一方面功能快速增加导致打包时 ...
- 广州蓝景分享—Web前端开发培训机构如何选择
首先Web前端培训机构如何选择?相信很多人都不是很清楚,就是听别人推荐哪家好哪家不好,没有合理性的去实地了解,看看是否符合自己.所以,最好的方法就是自己在网上可以找一些判断web前端培训机构的条件,然 ...
- android启动微信应用程序,android 从微信分享的网页中启动APP
项目中有个需求,让用户可以从分享到微信的网页中启动自己的APP,如果本机没有安装该应用程序则打开应用商店并打开该程序在商店中的搜索结果页面.在这里跟大家分享一下: 首先需要和服务端协商好网页中按钮点击 ...
- 记录一下微信、QQ、微博分享web网页功能
记录一下微信.QQ.微博分享web网页功能 分享至QQ,生成一个二维码,扫码进入网页 const url = "https://www.mi.com/?masid=2701.0318&quo ...
- [H1B/H4] H1B, H4 分别面签成功（广州）分享帖
http://bbs.tigtag.com/thread-1397091-1-1.html [H1B/H4] H1B, H4 分别面签成功(广州)分享帖 我们一家人都已经面签成功,12月3日就要飞美国 ...
- 广州蓝景介绍 — 什么是“低代码开发平台”以及国内外最受欢迎的低代码平台
前言 众所周知,国际知名的信息技术研究和分析公司Gartner曾预言,到2022年,50%以上的公司将采用低代码开发平台,来进行企业应用定制.以下是由广州蓝景介绍,国内外最受欢迎的低代码开发平台有哪些 ...
- 如何在微信分享的网页中显示描述和图片
微信分享网页显示图片和标题隐藏网址 由于项目需要,需要在微信公众号中添加分享,显示图片和标题 这个分享是 需要jssdk 才能 展示图片 和 标题的 开发文档 https://developers.w ...
最新文章
- 淘宝二面，面试官居然把TCP三次握手问的这么详细
- 中国AI产业背后的富士康工人：拿低工资为硅谷巨头的数据贴标
- javaweb数据库操作
- 关于 form表单 嵌套问题的解决方案
- CF1251F Red-White Fence（多项式/背包问题/组合数学）
- java quartz 2.2.3_java – Spring 3 Quartz 2错误
- xor和gates的专杀脚本
- python进阶06并发之二技术点关键词
- windows 虚拟磁盘的软链接_如何在Windows的操作系统下创建VHD虚拟磁盘
- vim插件command-t安装
- htc816t Android go,移动版HTC 816t刷入官方原版recovery教程
- PCkit3.5烧写器直接上手使用方法
- yolov5测试单张图片
- python存根文件_打包存根文件
- winedit自动换行
- Eclipse Memory Analyzer 使用技巧
- Python基础详解（十三）：(视频符号化)将视频转换成ASCII符号形式展示出来
- 实现库房批次管理，先进先出原则（一次难忘的找bug经历）
- Docker安装Mysql8、并打成镜像在其他内网环境部署
- 5月29日第十三届蓝桥杯国赛python中高年级组 小鸟看对方 题目、答案和解析