精华内容
下载资源
问答
  • 2020-09-16 11:10:56

    1、前端ajax请求不要定义太多同步的,如果能异步请求就异步

    async:

    true异步,false同步

     

    2、开启CDN加速,去阿里云上买个配置一下就行

     

    3、适当使用缓存,但缓存会占用内存,如果服务器内存不多,可适当使用,不能全依赖这个

    更多相关内容
  • 这样的话网站做得再难看批判者进不来不是白搭嘛,于是针对web页面加载速度的优化迫在眉睫。基于博主以前优化过其他网站,于是博主准备把这次的优化过程记录下来分享给大家借鉴。先来看优化前的页面:加载时间8.18s,...
  • 作者keanlove,源码YJWebProgressLayer,模仿微信web页面加载进度条的读取,为了项目的敏捷性和简单性,现在的app常常会嵌入不少的H5页面,而如何优雅的显示这些web页面呢,我这里参照微信显示web页面的方式,做了一个...
  • WEB页面加载过程

    千次阅读 2019-01-03 20:57:10
    页面加载过程 资源加载过程 URL解析->DNS查询->资源请求->浏览器解析 1 URL结构 http://www.happymmall.com:80/get_data.do?productId=1#title 协议 域名+端口 路径 参数 哈希 2 DNS...

    页面加载过程

    资源加载过程

    URL解析->DNS查询->资源请求->浏览器解析

    1 URL结构

    http://www.happymmall.com:80/get_data.do?productId=1#title
    协议 域名+端口 路径 参数 哈希

    2 DNS(Domain Name System)查询

    浏览器 <-------> DNS缓存(越靠近用户的缓存时间越少)+DNS服务器

    dns-prefetch

    <link rel=“dns-prefetch” href="#">:加载页面时,预先进行指定网址的DNS查询,并缓存下来

    3 资源请求

    在这里插入图片描述

    4 浏览器解析

    在这里插入图片描述

    展开全文
  • 本篇文章小编为大家介绍,关于JSP配置文件web.xml加载顺序详解。需要的朋友参考下
  • GO Web服务器 一个简单的go应用程序以加载html页面
  • iOS预加载Web页面方案
  • web页面加载等待页面

    热门讨论 2008-12-17 16:12:00
    该资源是web页面加载等待页面的一个模板,非常实用,页面很大众化,大家快来下载吧!^_^
  • web-component-loader:将Web组件加载页面
  • 行业文档-设计装置-基于安卓平台浏览器Web页面的滑动加载方法.zip
  • 网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条。 大体的写法如下: body{ margin:0; } #progress { position:fixed; height: 2px; background:#2085c5; transition:opacity 500ms ...
  • 统计web网站页面加载时间

    千次阅读 2020-09-18 09:01:34
    前提:需要谷歌浏览器 1.先进入需要统计时间的页面 2.按F12 3.点击performance 4.点击开始录制 5.点击停止录制 6.点击call tree,就会显示从鼠标点击到页面渲染需要的时间

    前提:需要谷歌浏览器
    1.先进入需要统计时间的页面
    2.按F12
    3.点击performance
    4.点击开始录制
    在这里插入图片描述

    5.点击停止录制
    6.点击call tree,就会显示从鼠标点击到页面渲染需要的时间
    在这里插入图片描述

    展开全文
  • 一、提高网页加载速度的必要性 国际知名的一组来自Jupiter Research的数据显示:购物者在访问网站过程中的不满会导致销售损失和品牌受损,其中 77%的人将不再访问网站 ,62%的人不再从该网站上购买,48%会转向竞争...

    一、提高网页加载速度的必要性

    国际知名的一组来自Jupiter Research的数据显示:购物者在访问网站过程中的不满会导致销售损失和品牌受损,其中 77%的人将不再访问网站 ,62%的人不再从该网站上购买,48%会转向竞争对手,28%的人对公司产生负面印象。

    此组数据分析显示:Google网站访问速度每慢400 ms就将导致用户搜索请求下降 0.59%;Amazon表示,增加 100ms的网站延迟将导致其收入下降 1%;雅虎网站如果有400ms 延迟会导致流量下降 5-9%…

    大数据分析表明:当网站首页打开时间超过4秒时,约60%的用户会放弃继续访问浏览,83%的用户希望首页打开时间不要超过4秒。

    据调查发现,影响用户体验的因素有很多,如购物方便性、网站合理布局等,但最重要的是网站性能和网站可用性能,这两项对用户的影响占到了69%。

    结语:网站网页加载速度越慢,用户体验度就越低,将导致网站拥有者的收益大幅减少。因此,提高网页加载速度就成了前端工程师的必修课之一。

    二、前端性能优化

    网页加载顺序:1.DNS查找 > 2.下载并渲染HTML文件 > 3.下载并执行css及js组件 > 4.下载图片

    以下性能优化列表,按照对网页加载速度的提升幅度排序

    1. 减少DNS查找

    DNS查找,即浏览器根据url中域名,查找该域名对应的服务器IP地址,然后才能根据服务器IP地址,下载到文件。在DNS查找完成之前,所有的文件下载都无法执行。每一次DNS查找时间约20-120ms。

    一般而言,电脑会进行DNS缓存,包括浏览器缓存、系统缓存、路由器缓存、ISP DNS缓存。所以,浏览器DNS查找顺序一般是这样的:浏览器缓存→系统缓存→路由器缓存→ISP DNS 缓存→递归搜索。

    递归搜索,即ISP的DNS服务器从根域名开始进行递归查询,查找时间一般为20-120ms。

    若没有DNS缓存,才会执行DNS递归搜索。但是显而易见,第一次访问网站首页时,是不会有DNS缓存的,必然会执行DNS查找。而每一个DNS查找,需要耗时20-120ms。因此,减少DNS查找能加快网页加载速度。

    实例:

    在开发页面时,很多时候,我们都要用到别人已经封装好了的js及css文件,譬如jquery库、angularjs库、时间选择插件、定位插件等等诸多插件,一般而言,网上都有公用的CDN,我们不需要将这些文件下载到本地,就可以使用它们。

    譬如:w3c上推荐了谷歌的CDN,腾讯地图也有自己的CDN库,我们可以通过以下代码,获取到谷歌的jquery库,以及腾讯的前端定位插件。

    这样写做起来十分方便,我们可以省去下载文件这一步骤。但实际上,这样做会增加两个DNS查找,即"ajax.googleapis.com"和"3gimg.qq.com"的DNS查找,将会在首次加载网站首页时,拖慢首页加载速度40-240ms,而且每再增加一个DNS查找,还会额外拖慢20-120ms的加载时间,这是极为致命的。

    不仅如此,这两个文件的下载速度分别取决于谷歌服务器及腾讯服务器的下载速度,这是完全不可控的。而将自己网站所需要的文件,寄放在别人的服务器上,也是不安全的。例如,某一天谷歌的服务器抽风,无法再下载文件,或是谷歌不再支持该jquery库,那么我们的网站将会失去jquery核心库,会直接崩溃。更可怕的是,若谷歌在该jquery库文件中添加某些攻击性手段,将会直接导致网站处于危险状态中。

    因此,为了减少DNS查找,为了保障网站的安全,我们必须将网站所需的文件下载到本地,而不是调用别人支持的CDN。

    2. CSS优先加载,JS延迟加载

    在解析HTML文件,构建DOM树时,一旦遇到link标记时,即遇到了CSS样式表,将之下载,便可立即构建渲染树,从而立即呈现页面效果。

    而一旦遇到script 标记时,即遇到了JS脚本,将立即阻塞DOM树的构建,将控制权移交给 JavaScript 引擎,等到 JavaScript 引擎运行完毕,浏览器才会从中断的地方恢复渲染树的构建。这涉及到浏览器渲染原理,详情请见本人上一篇博客:浏览器渲染页面的原理及流程

    若将引入JS脚本的链接放到HTML页面顶部,那么在加载该页面时,一旦遇到JS,页面渲染就会停滞,出现一段时间的灰色空白,直到JS加载完成,才会出现页面内容,这对用户体验是不友好的。因此,我们需要将JS脚本放置到页面底部,或者让JS脚本异步或是延迟加载。

    实例:如下图所示,该首页有CSS样式表一个,若将CSS样式表置于JS脚本之下,那么在加载完JS脚本之前,页面都不会进行渲染,会出现108ms的灰色空白。该首页有JS脚本文件5个,若将这5个JS文件放置在该首页的顶部,那么该首页加载JS脚本时,也将会出现108ms的灰色空白。
    在这里插入图片描述

    从严格意义上来说,CSS的优先加载及JS的延迟加载并不能从根本上提升网页加载速度,但是它们能使网页更快被渲染出来,使页面内容逐步呈现,增加用户等待的耐心,提升用户体验。

    3. 减少HTTP请求

    HTTP请求,即客户端到服务器端的请求消息,包括资源请求、数据处理等。

    HTTP请求需从客户端发起请求,然后由服务器端进行数据处理,然后再返回数据或资源。一般而言,耗时据请求资源的大小,服务器网速,约数ms-数百ms之间。请求资源越大,所花费的时间越长,服务器网速越慢,所花费的时间也越长。

    一般而言,完成了DNS查找后,接下来便是进行HTTP请求,获取资源。首先下载HTML文件,然后解析HTML文件,根据HTML内容,获取CSS、JS及图片文件。每一个CSS链接、JS链接以及图片链接都是一个HTTP请求。

    每一个HTTP请求都需要花费额外的时间。因此,我们可以将一些可合并的资源进行合并,譬如将所有页面的css合并成一个style.css文件,譬如将所有页面的js合并成一个function.js文件,再譬如将一批小图标利用ps合成一张图片(此手段效果最显著,也最常用)。虽然有时文件会变大,但是在HTTP请求中,请求下载一个大小为100KB的资源文件,比请求下载两个大小为50KB的资源文件要快。

    从实际测试来看,每减少一个HTTP请求,据请求资源大小,能加快网页加载速度约数ms-数百ms。

    实例:合并图标

    "用户信息页面"如下图所示:四个输入框左侧,有四张icon,合计大小8.9KB,四个HTTP请求合计时间23ms。

    在这里插入图片描述

    我利用ps,将此四张图片进行合并,然后以css的背景图片进行引用,其结果如下图所示:四个输入框左侧,四张icon合并后的大小6.0KB,一个HTTP请求时间8ms。减小图片大小2.9KB,提升加载速度15ms。看起来提升速度不多,但按比例算,提升幅度巨大。

    在这里插入图片描述

    4. 缩小文件

    众所周知,HTTP请求中,返回的资源越大,HTTP请求所花费的时间越长,因此,缩小资源文件可以提升HTTP请求的速度,进而提升页面加载速度。不仅如此,还能节省服务器流量及空间。

    一般而言,缩小文件主要是指图片压缩,也包括CSS、JS文件压缩,网上有成熟的代码在线压缩工具,譬如:在线JS/CSS/HTML 压缩

    而图片压缩主要是指图片在不同的格式下、不同的分辨率下保存,其大小将会有巨大的差异。譬如同一张图片的png格式与jpg格式肉眼看起来几乎没有区别,但是其大小相差了约5倍。而jpg格式中级也比高级要小约莫1倍。当然,图片的不同格式有不同的用处,且分辨率越高,图片也越清晰。

    因此,根据需求为图片选择合适的格式及分辨率,就能得到最小的图片文件。

    具体操作:在ps中打开图片,同时按下ctrl+alt+shift+s,打开"存储为web所用格式"弹框,即可任意选择保存图片的格式及分辨率(若按操作无法顺利压缩图片,请自行度娘)。

    实例:同一张图片,jpg格式比png格式小约5倍,加载速度快约3倍。
    在这里插入图片描述

    缩小文件来提升页面加载速度,从我个人的项目优化经验来看,其效果极为显著,多个项目都提升了超过100ms的加载时间。

    5. 善于利用缓存

    避免在HTML文件中使用style标签插入CSS样式,及使用script标签插入JS脚本。若在HTML文件中插入CSS及JS,那么它们无法进入缓存,每次刷新页面,都要重新加载,不但浪费了浏览器资源,拖慢了页面加载速度,而且显得冗余且复用性低,不利于日后的维护。因此,将CSS样式与JS脚本分离出来,形成CSS文件及JS文件,就能进入缓存,进而提高页面加载速度。

    灵活使用cookie和localstorage。在使用接口时,灵活使用cookie和localstorage来缓存接口返回的信息,避免不必要的接口查询,从而提升页面加载速度。譬如:在登录页面登录时,缓存好用户信息,设置过期时间。在进入用户个人中心页面时,若数据并未过期,可以直接从缓存中取用户信息,不必再调起接口去获取用户信息。

    实例:css、js、图片都可进行缓存,从缓存中获取文件,时间为0ms。

    在这里插入图片描述

    总结:以上几点,对于页面加载速度的提升效果都很显著,只要做到以上几点,只要服务器不坑,项目页面加载速度都不会很慢。以下我将会从代码的角度来提出几点项目优化的经验。

    6. HTML文件代码优化

    1. 避免使用空请求,包括空的href链接、空src链接。空链接本身无法请求成功,因此会把一个HTTP请求拖到超时,而且空链接会阻塞页面中其他资源的下载进程,会拖慢页面加载速度。譬如:

    2. 根据项目大小,选择主要使用class还是id。id选择器优先级最高,访问速度最快。但是在html中每声明一个id,就会在JS底层声明一个全局变量,而全局变量的增多,将会拖慢JS中变量遍历的效率,若变量遍历达到十万次以上,就会出现较显著的延迟,而且容易造成全局变量污染。对于小项目,并无影响,但是对中大型项目来说,尤其是游戏项目,影响很大。个人推荐,当项目较小时,灵活使用class和id,当项目较大时,尽量少使用id。

    3. 预先设定图片大小。在页面加载过程中,图片最后加载,若不对图片预设大小,当图片加载完成后,将会引起大量的重排,将会浪费浏览器资源及拖慢页面加载速度。

    4. 尽量减少DOM元素的数量与层级。解析HTML时,标签的数量越多,标签的层级越深,浏览器解析构建DOM树的时间就越长,应尽可能的减少DOM元素的数量和层级。

    5. 尽量避免使用table标签。浏览器对table标签的解析是全部生成后再一次性绘制的,因此会造成表格位置较长时间的空白,推荐使用ul及li标签绘制表格。

    6. 使用异步加载iframe标签。浏览器加载iframe标签时,会阻塞父页面渲染树的构建及HTTP请求,因此尽量使用异步加载iframe。

    等等…

    7. CSS样式代码优化

    1. 禁止使用样式表达式。CSS表达式从IE5起开始支持,但仅有IE支持。它的解析速度较慢,而且运算次数远比我们想象的要大,随意动动鼠标就能轻松达到上万次运算,会对页面性能造成影响。譬如:"#myDiv{width:expression(document.body.offsetWidth - 110 + “px”); }"

    2. 优化关键选择器,去掉无效的父级选择器,尽量少在选择器末尾使用通配符。大多数人都认为,浏览器对CSS选择器的解析式从左往右进行的,譬如选择器:"#myDiv ul li a",大多数人会认为这个选择器效率极高,毕竟第一个ID #myDiv 就已经把范围限定了,先选择 #myDiv ,再在 #myDiv 下寻找 ul ,再一级一级往下,直到找到 a 标签,效率很高。事实上这是错的,浏览器对CSS选择器的解析式从右往左进行的。在上述选择器中,浏览器会先去寻找 a 标签,范围为全局,再在 a 标签的列表中,寻找父级标签是 li 标签的 a 标签,一直向上,直到最后,找到父级标签是 #myDiv ul li 的a标签。因此,效率并不像想象中那么高。显而易见,"#myDi a"选择器比"#myDiv ul li a"选择器效率要高得多。而通配符 a 的效率远比类选择器及id选择器低,若给 a 标签添加一个class myA ,构造新选择器:"#myDiv .myA",它的效率又远比"#myDi a"要高了。浏览器对CSS选择器的解析式从右往左进行,因此在选择器末尾最好使用类选择器,而不是通配符。CSS选择器效率问题详情请见:CSS选择器效率问题

    等等…

    8. JS代码优化

    1. ajax请求方法按需求选择get或是post,访问接口所花费的时间在页面加载时间中占很大的比重,而接口访问方法中,get方法远比post方法要快,因此按需选择接口访问方法很重要。

    2. 减少全局变量,尽量使用局部变量。js中,全局变量运算速率远低于局部变量,速度差异达到上百倍,且全局变量越多,全局变量的查找速率便越慢。详情请见:减少全局变量对效率的提升

    3. 减少对DOM的操作。js操作DOM将会引起页面的重绘及重排,需要花费时间及耗费浏览器资源。

    等等…

    结语:前端性能优化是一门完整的学问,并非一两篇博客所能详尽的。以上我只是按照页面加载速度的提升幅度写了几点,其实还有大量优化手段,难以详尽。譬如:图片懒加载、按需加载、预加载等等,再譬如:从网络加载角度进行优化、从渲染角度进行优化、从架构协议角度进行优化等等

    学无止境,诸君共勉!

    展开全文
  • UE4 Web browser 加载web(h5)页面方式

    千次阅读 2021-04-23 09:37:28
    UE4中提供了 Web browser浏览器插件来显示web页面。通过UMG控件的方式直接进行加载web控件内容。web插件使用方式为: Web browser插件使用方式1、把插件加载到项目中。2、创建UMG控件蓝图3、设置web控件的URL4、在...
  • 任何jsp页面只要使用包含附件中的loading.jsp将自动拥有“页面正在加载的。。”提示信息,在页面加载完后将自动隐藏
  • 主要介绍了jQuery移动web开发中的页面初始化与加载事件,是JavaScript移动端页面开发学习中的基础知识,需要的朋友可以参考下
  • 50多少个 网页加载动画效果(Loading效果),加载中,SVG,加载动画
  • ![图片说明](https://img-ask.csdn.net/upload/201601/28/1453963603_233978.png) 页面加载不出来有哪几种原因?
  • 正在加载提示信息,WEB开发必不可少的功能。
  • web项目加载顺序

    千次阅读 2018-11-19 00:01:31
    今天讲述一下普通的web项目加载顺序。 虽然项目大部分都在使用SpringBoot、SpringCloud等微服务的架构来搭建项目,基本不会在进行这些配置了,但是如果项目追究Spring源码,这些基础知识还是需要了解的。 web.xml ...
  • Spriting是一种网页图片应用处理方式,它是将一个页面涉及到的所有零星图片都包含到一张大图中去,然后利用CSS技术展现出来。这样一来, 当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了,可以...
  • Flask写了个简单的页面,居然加载超过30s,排查问题发现如下: 能想象加载3分钟后还是失败的心情嘛? 解决方法如下: 添加CDN,就是让游览器加载moment.js时,不需要中介直接找到moment.js文件。 做法: 在moment...
  • web页面加载速度缓慢,如何优化?

    千次阅读 2018-04-25 23:38:00
    这样的话网站做得再难看批判者进不来不是白搭嘛,于是针对 web 页面加载速度的优化迫在眉睫。 基于博主以前优化过其他网站,于是博主准备把这次的优化过程记录下来分享给大家借鉴。 1. 页面分析 先来看优化前...
  • 通常情况下,有以下几种原因: 1、服务器带宽低,下载速度慢; 2、需要在服务端下载的东西过多; 3、后台接口数据量大接口回应速度慢; ...因此对应的解决方案: ...2、查看是下载的东西过多哪些东西过多,假如是js引用...
  • TinyWFL是一种最小的Web字体加载器,它使用与Google和Typekit的相似的方法来帮助您避免 (不可见文本的闪烁)和FOUT(未样式化的文本的闪烁),但它的功能要少得多,因此可以保持很小的体积-它缩小了95%,只有852个...
  • 里面总共有13种不同的页面加载效果,里面总共有13种不同的页面加载效果。
  • Flutter for web 首次加载过慢问题优化

    千次阅读 2021-09-10 16:42:25
    Flutter web 加载慢优化
  • web页面加载视频播放

    2019-07-04 11:48:00
    Web播放器 TcPlayer——腾讯直播sdk的网页播放器 https://www.cnblogs.com/stnlcd/p/7262034.html 转载于:https://www.cnblogs.com/tianyunchong/p/11131536.html
  • WEB包含30个前端加载效果页面,动态执行加载,用于加载图片,懒加载等等
  • web端下拉加载(分页)

    千次阅读 2019-01-25 14:10:17
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...下拉加载&lt;/title&gt; &lt;script src="./jquery.min.1.8.1.js"&gt;&lt;/script&gt;

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 511,015
精华内容 204,406
关键字:

web页面加载方法