本篇文章给大家谈谈web前端影响页面渲染的主要因素是,以及渲染异步解决办法对应的知识点,文章可能有点长,但是希望大家可以阅读完,增长自己的知识,最重要的是希望对各位有所帮助,可以解决了您的问题,不要忘了收藏本站喔。
本文目录
html5多线程处理如何解决问题
创建一个Worker对象,指向一个js文件,然后通过Worker对象往js文件发送消息,js文件内部的处理逻辑,处理完毕后,再发送消息回到当前页面,纯异步方式,不影响当前主页面渲染。
为什么现在又流行服务端渲染html
题主有点搞错了,现在的服务端渲染跟以前的服务端渲染是完全不一样的.
首先介绍一下以前的传统模式:服务端渲染,代表是PHP这类,那时候前端只是写网页的,偶尔写点ajax,但是不多,大部分靠服务器查找数据然后渲染出来页面发送给浏览器展示,每次跳转都要从新执行一遍这个逻辑.因此挺消耗服务端的资源的.
后来H5出来后才有所改观,单页应用也逐渐兴起,Nodejs使前端可以脱离浏览器,进军服务器写后端代码.
非常多的人按捺不住内心的激动,终于不被人称为"切图仔"了,而且前端人群非常的多,此时我写这个回答的时候,NPM上的包就已经有654,218个了!
移动端开始兴起,网站的加载速度也开始变得重要,各个网站也开始考虑用户的感受,如果能降低用户的流量成本,就能使用户更快的进入页面,停留的时间也就更久,更能为公司带来经济效益,因此这变得越来越重要.
如果还是以前的传统方式,每次跳转都要重新加载页面下载数据,那么用户肯定受不了等待从而离开,损失是非常严重的,因此这时候的人瞄准了H5,使用H5构建的单页应用开始越来越多,只需要加载一次网页,后面就不需要再次下载,而且还可以做缓存,减少用户的流量费用.
但是前端很快发现了一个严重的问题,爬虫是不认js的,也就是说你无法给自己的网站做SEO.
SEO搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式.当百度或者其他搜索引擎的爬虫来到你的网站的时候,它发现这里面什么东西都没有,就只有一些css和js资源连接,但是它并不执行你的js,因此是无法获取到你的网站信息的,它就无法记录你的网站信息,用户使用搜索引擎的时候也就无法查询到关于你网站的数据信息,这是很严重的问题,你的网站流量会断崖式下跌.
因此针对这个问题,前端想到了一个预处理方案:服务器端渲染(SSR).
前端使用Nodejs搭建服务器,然后在用户访问的时候预先执行一些页面中js的逻辑,渲染成HTML,将它们直接发送到浏览器,很多流行的开源前端框架已经集成了这类方式,比如Vue.js,React.js,Angular.js等等.
与传统SPA(Single-PageApplication-单页应用程序)相比,服务器端渲染(SSR)的优势主要在于:
1.更好的SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。如果SEO对你的站点至关重要,而你的页面又是异步获取内容,则你可能需要服务器端渲染(SSR)解决此问题。
2.更快的内容到达时间,特别是对于缓慢的网络情况或运行缓慢的设备.无需等待所有的JavaScript都完成下载并执行,才显示服务器渲染的标记,所以你的用户将会更快速地看到完整渲染的页面.通常可以产生更好的用户体验,并且对于那些时间就是金钱的应用程序而言,服务器端渲染(SSR)至关重要。
使用服务器端渲染(SSR)时还需要有一些权衡之处:
1.涉及构建设置和部署的更多要求.与可以部署在任何静态文件服务器上的完全静态单页面应用程序(SPA)不同,服务器渲染应用程序,需要处于Node.jsserver运行环境.
2.在Node.js中渲染完整的应用程序,显然会比仅仅提供静态文件的server更加大量占用CPU资源,因此如果你预料在高流量环境下使用,请准备相应的服务器负载,并明智地采用缓存策略.
在对你的应用程序使用服务器端渲染(SSR)之前,你应该问第一个问题是否真的需要它.这主要取决于内容到达时间对应用程序的重要程度.例如,如果你正在写一个活动页,那么初始加载时的额外几百毫秒并不重要,这种情况下去使用服务器端渲染(SSR)肯定是一个小题大作之举.然而,内容到达时间(time-to-content)要求是绝对关键的指标,在这种情况下,服务器端渲染(SSR)可以帮助你实现最佳的初始加载性能.
web前端影响页面渲染的主要因素是
主要因素:
1、script脚本阻塞渲染进程,一般的处理都是将script放在body标签的尾部,或者采用异步script
2、页面体积。一般页面内容越多,越复杂,浏览器渲染的耗时就越大,所以一般的处理方式是页面懒加载,按需加载,将一个大的script分成多个bundle文件
3、页面中有耗时的执行脚本,这个过程是在页面浏览过程中,因为执行某段耗时脚本而导致的页面卡顿,这种情况可以考虑将耗时任务放到webworker中和页面线程并行
4、页面中引入ifreme,或者移动播放的媒体组件。因为iframe会阻止浏览器渲染进程,所以建议页面中不到万不得已,尽量少使用iframe,对于视频这种资源比较大的场景,可以等页面加载完成后再启动媒体的加载。
5、网络问题也是影响页面加载的原因之一,一般我们的处理方案是对静态资源打包压缩,或者采用cdn来降低加载耗时,减少同域名下网络的请求数也是一个优化措施
什么是带有异步的触发器
异步触发器是最常用的一种触发器。
UpdatePanel的每个子控件默认都是一个异步触发器。这说明,与这些控件交互所导致的回送会替换为异步回送,将要求UpdatePanel渲染其内容。不过,未指定为UpdatePanel内容的控件又会怎么样呢?例如,假设你想根据一个按钮的点击事件来刷新一个UpdatePanel的内容,但是这个按钮并非该UpdatePanel的子控件。
对此,可以将这个控件注册为一个异步触发器。
AsyncPostBackTrigger有两个属性。第一个属性是ControlID,这是产生事件的控件的ID。第二个属性EventName可选,可以想见,这是导致异步回送的控件事件的事件名称。如果EventName未初始化,默认为控件最常见的事件(例如,对于按钮控件则是click事件)。
这种方法主要用于向UpdateMode设置为Conditional的面板增加触发器。它也适用于UpdateMode设置为Always的面板。
OK,关于web前端影响页面渲染的主要因素是和渲染异步解决办法的内容到此结束了,希望对大家有所帮助。