❞ 这不仅使回调保持轻巧和灵活，而且还通过不允许视觉更新在事件回调代码上阻塞来改善交互的呈现时间。...这对于包含大量元素或复杂布局的页面特别有用，因为它可以减少初始渲染所需的时间，从而提高页面的加载速度。...随后对内容区域的更新也会因用户交互而发生。通常将其称为单页应用（SPA）模型。...但是要记住，即使不是单页应用（SPA）的网站，由于交互的结果，也可能涉及通过JavaScript进行某些数量的HTML渲染。...正如其名称所示，FID仅考虑用户与页面的「首次交互」。尤其对于长时间保持打开的页面，比如单页应用程序，这第一次交互可能不能代表整体用户体验。 INP通常衡量页面上最差的输入延迟。
并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的 HTML 页,而用户每次都要浪费时间和带宽去重新读取整个页面。...这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。...JavaScript 的 Ajax 引擎读取信息，并且互动地重写 DOM，这使网页能无缝化重构，也就是在页面已经下载完毕后改变页面内容，这是我们一直在通过 JavaScript 和 DOM 在广泛使用的方法...，但要使网页真正动态起来，不仅要内部的互动，还需要从外部获取数据，在以前，我们是让用户来输入数据并通过 DOM 来改变网页内容的，但现在，XMLHTTPRequest，可以让我们在不重载页面的情况下读写服务器上的数据...Ajax 使 WEB 中的界面与应用分离(也可以说是数据与呈现分离)，而在以前两者是没有清晰的界限的，数据与呈现分离的分离，有利于分工合作、减少非技术人员对页面的修改造成的 WEB 应用程序错误、提高效率
更新说明：对文章排版以及内容格式做了调整。 更新时间：2022-05-04 导读 本文主要是从三个方面学习服务端渲染，内容整理自多个博客。 服务端渲染是什么？什么是服务端渲染？...延伸 客户端渲染的方式起源于JavaScript的兴起，ajax的大热更是让前端渲染更加成熟，前端渲染真正意义上的实现了前后端分离，前端只专注于UI的开发，后端只专注于逻辑的开发，前后端交互只通过约定好的...客户端拿到手的，是可以直接渲染然后呈现给用户的 HTML 内容，不需要为了生成 DOM 内容自己再去跑一遍 JS 代码。...使用服务端渲染的网站，可以说是“所见即所得”，页面上呈现的内容，我们在 html 源文件里也能找到。...为什么使用服务端渲染 简单总结起来就是两点： 首屏加载快： 相比于加载单页应用，我只需要加载当前页面的内容，而不需要像 React 或者 Vue 一样加载全部的 js 文件 SEO 优化： 对于单页应用
单页应用程序概述（SPA） 内容从数据库中获取，然后通过控制器传递，最后在视图模板发送前与视图模板合并 这体现在每次浏览应用程序或网站时重新加载的页面的形式。...JavaScript在这里的作用是非常小的。它只负责控制用户界面的小部分 几年前，单页应用程序开始在开发人员中流行起来。...Ajax请求 - 将请求发送到服务器以便在不重新加载页面的情况下获取数据。...如果没有Ajax，将不会有单个页面的应用程序 Web套接字 - 用于在Web浏览器和服务器之间建立持久连接的API。...请求的数据,达到在不刷新整个页面的情况下,在用户执行某些DOM事件(比如点击,滚动)等时,页面的局部刷新呈递新数据的展现,至于更深的体会,还是要多撸代码,概念的东西说多了都是故事,虚无缥缈的,代码就是对概念理论最好的解释
前段时间，群里有位同学问起 Ajax 加载的问题，这个不属于模板制作系列教程的内容，因此单独再出一个使用技巧系列的教程。...Ajax 无刷新加载内容，看起来高大上一点，但是对 SEO 是不太友好的，所以在使用的时候应该有个取舍。...由于 PbootCMS 的 api 接口的存在，在 PbootCMS 上实现 Ajax 加载还是比较方便的。 一、点击更多按钮加载内容 1、首先，添加一个按钮用来触发事件。...var Page = parseInt('0') + 1; //Num就是每页几条信息，因为列表默认显示的是2条，所以这里设为2，结合上面的第二页实际上就是从第三条信息开始读取。...var Num = 2; //定义内容的Dom位置，也就是读取出来的内容要添加到哪个div里面去。
前言 HTML内容模板元素只包含全局属性，是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以在运行时使用JavaScript实例化。...将模板视为一个内容片段，存储在文档中供后续使用。虽然解析器在加载页面时确实会处理元素的内容，但这样做只是为了确保这些内容有效；然而，元素的内容不会被呈现。...比如需要ajax刷新一个列表，以前的做法是后端生成html返回，或者前端用DOM构建后加入，但现在有了template标签，html的架构就不需要程序管了，只需要在特定的位置加入ajax请求到的数据即可...模板元素示例 如下代码，验证了元素加载页面时不会呈现(显示)该元素和内容。 <!...其实许多人以前也应该做过类似的事情，把一段html隐藏起来，然后clone它并修改里面的属性或者内容，得到一个DOM，加入列表并显示，用来刷新ajax列表。
他们都在同一个页面上，我们点击按钮他并没有跳转，只是修改了路径，通过 JS 修改了页面的内容，即 DOM 里面的内容，让我们看上去进行了切换，实际上并没有，所以很大程度提升了用户的体验。...客户端拿到手的，是可以直接渲染然后呈现给用户的 HTML 内容，不需要为了生成 DOM 内容自己再去跑一遍 JS 代码。...使用服务端渲染的网站，可以说是“所见即所得”，页面上呈现的内容，我们在 html 源文件里也能找到。...为什么使用服务端渲染，它解决的是什么问题 简单总结起来就是两点： 首屏加载快 相比于加载单页应用，我只需要加载当前页面的内容，而不需要像 React 或者 Vue 一样加载全部的 js 文件 SEO...优化 对于单页应用，搜索引擎并不能收录到 ajax 爬取数据之后然后再动态 js 渲染出来的页面。
他们都在同一个页面上，我们点击按钮他并没有跳转，只是修改了路径，通过 JS 修改了页面的内容，即 DOM 里面的内容，让我们看上去进行了切换，实际上并没有，所以很大程度提升了用户的体验。...客户端拿到手的，是可以直接渲染然后呈现给用户的 HTML 内容，不需要为了生成 DOM 内容自己再去跑一遍 JS 代码。...为什么使用服务端渲染，它解决的是什么问题 简单总结起来就是两点： 首屏加载快 相比于加载单页应用，我只需要加载当前页面的内容，而不需要像 React 或者 Vue 一样加载全部的 js 文件 SEO...优化 对于单页应用，搜索引擎并不能收录到 ajax 爬取数据之后然后再动态 js 渲染出来的页面。...什么情况下使用服务端渲染 通过服务端渲染的概念以及它的两个特点：首屏加载速度快、SEO优化。
减少HTTP请求 终端用户响应时间80%消耗在前端，而大部分时间都是在下载页面的资源：图片，脚本，flash等等，减少请求资源简化页面设计成为了性能提升的关键。...使用内容分发机制 使用内容分发如CDN加速，使用户从离自己最近的服务器下载文件。但一般要求减少DNS查询次数，如同一个页面的请求资源尽量少的使用不同的主机名，可以减少网站并行下载的数量。...设置header的过期时间，使内容可以缓存 这个规则可以从两个方面来看： 对于静态组件，实现“永不过期”的政策，通过设置一个较长时间的Expires头，例如图片，flash； 对于动态组件：使用适当的Cache-Control...样式放在页头 用户在打开一个页面时，浏览器会逐步的加载头部，导航栏及logo等，在加载过程中用户能看到页面的反馈，提升了用户体验。...如果样式放在页脚，带来的问题是，包括在IE的很多浏览器上禁止逐步呈现，他们会阻止渲染，避免页面样式变化而引起重绘页面元素，用户就只能看到一个空白页。 6.
DOM树的创建、外链脚本的加载、外链脚本的执行以及内联脚本的执行，而不会等待样式文件,图片文件,子框架页面的加载。...「Navigation Timing」 中古时期（指距今 10-5 年左右的 Ajax 纪元），网页的交互形式更加丰富多样，Gmail 为首的富网页应用在用户体验大幅增强的同时，也给细粒度的网页加载时间记录带来了需求...我们直接使用 performance.timing，就可以轻松获得这些时间来帮助分析页面的加载时间。...Paint，标记的是浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、SVG 甚至 元素。...对于这种单页应用来说，以上的各个指标其实都无法满足在主体框架加载完成后切换不同页面时的重新计算。那么我们是不是只能够完全依赖业务开发本身去在代码里主动打点和上报加载时间呢？那也未必。
(FCP)：首次内容绘制，衡量从网页开始加载到网页任何部分呈现在屏幕上所用的时间 Largest Contentful Paint (LCP)：最大内容绘制，衡量从网页开始加载到屏幕上渲染最大的文本块或图片元素所用的时间...to Interactive (TTI)：可交互时间，衡量的是从网页开始加载到视觉呈现、其初始脚本（若有）已加载且能够快速可靠地响应用户输入的时间 Total Blocking Time (TBT)：...一次一页或一次多页 指标 核心网络生命、页面速度性能指标（首次内容绘制、速度指数、最大内容绘制、交互时间、总阻塞时间、累积布局偏移） 性能（包括页面速度指标）、可访问性、最佳实践、SEO、渐进式 Web...LCP Largest Contentful Paint (LCP) 指标会报告视口内可见的最大图片或文本块的呈现时间（相对于用户首次导航到页面的时间）。...：DOM 元素由于内容异步加载而发生移动。
业务场景 这里也是引用笔者之前做过的一个业务来举例：有一个模拟用户朋友圈记录的H5页面，用户能通过管理端来编辑一条朋友圈消息「图文|视频」，并展示在这个H5页面上。...虽然说服务器拉数据比前端更稳定和快速，但带来了额外的问题： 拉取数据服务宕机，导致html请求阻塞，前端页面一直处于空白等待状态，需要服务端做额外逻辑兼容； 拉取数据耗时较长时，前端页面的白屏时间也相应增加...缺点：无法抹平异步数据加载带来的页面抖动，但可以快速给用户呈现页面雏形，综合考虑无法满足需求，舍弃。...设置ssr数据拉取api超时，前端页面onload后加上ajax请求补偿 这个就是在服务器拉取数据时加上短暂的时间判断，在接口超时情况下直接返回没有ssr渲染的页面，前端在首屏完成后再异步请求数据。...可以参考官方描述，主要作用是在服务端将react函数实例化成一个dom Ajax vs Redis 效率 Ajax 对于异步获取数据的http请求开销： [image.png] Redis 使用nodejs
服务端API测试通过后，需要根据具体业务的需求集成到管理系统中，配合BIMFACE提供的前端JavaScript API的使用可以很轻松的集成到网页中实现模型/图纸的加载、浏览、批注对比等功能。...接下来的系列主要介绍网页集成开发方面的实现过程与经验。 本篇主要介绍如何在网页中加载与浏览BIM/CAD模型。 先展示网页中加载BIM模型的实际效果，如下图： ?...使用JQuery的ajax技术调用获取模型/文件的ViewToken的接口 1 // 加载BIM模型 2 function loadBimFile() { 3 $.ajax({ 4...元素是页面上的 div 容器，用于呈现模型适用。...提供了查看模型的上、下、左、右、前、后以及主视角等功能。 提示：键盘上的 Q、W、E、A、S、D 也可以操作模型以不同的视角呈现模型。 （3）工具栏 ?
必须告知浏览器是使用缓存中的地址薄还是发送一个新的请求。这可以通过为读取地址薄的Ajax URL增加一个含有上次编辑时间的时间戳来实现，例如，&t=11900241612等。...这样做可以使你的Web2.0应用程序更加快捷。 5、推迟加载内容 你可以仔细看一下你的网页，问问自己“哪些内容是页面呈现时所必需首先加载的？哪些内容和结构可以稍后再加载？ ...第一次访问你页面的用户就意味着进行多次的HTTP请求，但是通过使用Expires文件头就可以使这样内容具有缓存性。它避免了接下来的页面访问中不必要的HTTP请求。...21、用代替@import 前面的最佳实现中提到CSS应该放置在顶端以利于有序加载呈现。 ...22、避免使用滤镜 IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。
除了浏览器主窗口显示的请求的页面外，其他显示的各个部分都属于用户界面。 浏览器引擎：在用户界面和呈现引擎之间传送指令 呈现引擎：负责显示请求的内容。...HTML5 定义了“web数据库”，这个是一个完整但轻便的浏览器内数据库。 注意：和大部分浏览器不同，Chrome 浏览器每个标签页都分别对应一个呈现引擎实例，每个标签页都是一个独立的进程。...：对 Node 添加特定的属性，通过指针确定 Node 的父、子、兄弟关系和所属 treeScope 生成 DOM Tree：通过 node 包含的指针确定的关系构建出 DOM Tree # 浏览器重绘与重排的区别...# 如何触发重排和重绘 任何改变用来构建渲染树的信息都会导致一次重排或重绘： 添加、删除、更新 DOM 节点 通过 display: none 隐藏一个 DOM 节点——触发重排和重绘 通过 visibility...）加载后依旧存在，并且可以支持非常长的 name 值，可以利用这个特点进行跨域 location.hash + iframe: a.html 想与 c.html 跨域相互通信，通过中间页 b.html
1.1.1 传统的性能指标以及它们存在的问题 传统的性能指标最典型的是 DOM Ready 时间和页面加载时间（load time）：前者指的是初始 HTML 文档完全加载和解析完成的时间，一般是通过...： 1.2.1 FCP FCP 指标测量的是页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。...比如通过在 setTimeout 中放一个任务获取执行时间点，再计算到页面开始加载的差值。...我们需要优化关键路径资源，页面中要呈现的内容很多，但不是所有内容都需要第一时间呈现，应优先呈现最重要的内容。...3.3 组件懒加载 可视区域之外的内容和需要用户交互时才呈现的组件，都可采用懒加载，保证页面首要内容快速呈现。
十二、将 CSS 图像映射用于装饰功能 使用图像映射代替多个图像，这是另一种缩短加载时间的方式，因为同时下载图像的各个独立部分能够加快整个页面的下载进度。...您使用 CSS 来选择（通过调用某些位置和维度）用于特定元素的映射。 十三、尽可能延迟脚本加载 一种提升页面下载速度的潜在方式是将脚本放在页面的底部，使页面加载更迅速。...CSS或image,然后继续执行下面的转换，而不需要等待request的返回，当request返回 后，只需要把返回的内容放入到DOM树中对应的位置就OK。...，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现....外部JS会阻塞所有内容的呈现 嵌入式的JS会阻止其后内容的显示 当CSS后面跟着嵌入的JS的时候，该CSS就会出现阻塞后面资源下载的情况
尽量减少HTTP请求次数 终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。...必须告知浏览器是使用缓存中的地址薄还是发送一个新的请求。这可以通过为读取地址薄的Ajax URL增加一个含有上次编辑时间的时间戳来实现，例如，&t=11900241612等。...这样做可以使你的Web2.0应用程序更加快捷。 5. 推迟加载内容 你可以仔细看一下你的网页，问问自己“哪些内容是页面呈现时所必需首先加载的？哪些内容和结构可以稍后再加载？ ...用代替@import 前面的最佳实现中提到CSS应该放置在顶端以利于有序加载呈现。 在IE中，页面底部@import和使用作用是一样的，因此最好不要使用它。 22....避免使用滤镜 IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。
样本DOM树(来源:Wikimedia Commons) 当在浏览器中呈现HTML页面时，浏览器将HTML下载到本地内存中，并创建一个DOM树来显示屏幕上的页面。...使用JS，我们可以通过几种方式操作DOM树: JS可以通过添加、更改和删除页面中的所有HTML元素和属性来修改DOM树。 JS可以改变页面上的所有CSS样式。...可能会有更多关于用户存储的信息，例如他的指定，最后登录的时间等等。 您可能已经猜到，另一种选择是将“用户”信息存储在另一个表中，并将其与下面的“Related”Id关联在一起。...在非ajax网站中，每个用户操作都需要从服务器加载完整的完整页面。这个过程是低效的，并且创建了一个糟糕的用户体验。所有的页面内容都消失了，然后重新出现。...Ajax是构建单页应用程序(SPAs)的技术之一。顾名思义，整个应用程序在一个页面中，所有内容都是动态加载的。
减少页面重定向 一次重定向大概600毫秒的时间开销，为了保证用户能尽快看到页面内容，尽量避免页面的重定向 8....消除阻塞页面的CSS和JS 对于页面中加载时间过长的CSS或JS文件，需要进行合理的拆分或者延后加载，保证关键的资源能快速加载完成 17. 避免使用CSS import 引用加载CSS 18....由于JavaScript资源默认是解析阻塞的，除非被标记为异步或者通过其他的方式异步加载，否则会阻塞HTML DOM解析和CSS渲染过程 3....减少DOM元素数量和深度 HTML中标签元素约的，标签的层级越深，浏览器解析DOM并绘制到浏览器中说花的时间就越长。 5....避免运行耗时的JavaScript 长时间运行的JavaScript会阻塞浏览器构建DOM树、DOM渲染树、渲染页面。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
