首页
学习
活动
专区
圈层
工具
发布

Chrome的First Paint触发的时机探究

解析的过程中碰到css和js外链(其实HTML的下载也是这个流程)都会执行以下过程: Send Request:表示给这个外链对应的服务器发送请求 Receive Response: 表示接收响应,这里是表示告诉浏览器可以开始从网络接收数据了...可以发现FP居然更快触发,但是我鼠标hover到绿色虚线后,仍然是白屏,只有等到CSS加载完成执行Parse Stylesheet之后才显示出内容(说明这种用法也不可取),难道body中的CSS也会影响...所以结合之前得出的结论,在CSSOM准备就绪之后,浏览器会提前渲染第一脚本前的内容,我们可以用第九种情况来验证: 第九种情况: 这种情况和上种没什么区别,只是增加了一个CSS,这个CSS中还会发出一个请求去加载其他...在第一脚本前使用骨架图,可以减少用户的白屏感知时间(对于使用JS插入模板来渲染的框架,建议将骨架图的路由生成逻辑单独提出来) 科普一下 Chrome会渲染局部CSSOM和DOM First Paint和...第一脚本前的CSS如果还会去加载字体文件,那么即使CSSOM和DOM构建完成触发FP,页面内容也会是空白,只有等到字体文件下载完成才会出现内容(这也是我们在打开一个加载了谷歌字体的网站会白屏很长时间的原因

3.1K90
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Chrome的First Paint触发的时机探究

    解析的过程中碰到css和js外链(其实HTML的下载也是这个流程)都会执行以下过程: Send Request:表示给这个外链对应的服务器发送请求 Receive Response: 表示接收响应,这里是表示告诉浏览器可以开始从网络接收数据了...可以发现FP居然更快触发,但是我鼠标hover到绿色虚线后,仍然是白屏,只有等到CSS加载完成执行Parse Stylesheet之后才显示出内容(说明这种用法也不可取),难道body中的CSS也会影响...所以结合之前得出的结论,在CSSOM准备就绪之后,浏览器会提前渲染第一脚本前的内容,我们可以用第九种情况来验证: 第九种情况: 这种情况和上种没什么区别,只是增加了一个CSS,这个CSS中还会发出一个请求去加载其他...在第一脚本前使用骨架图,可以减少用户的白屏感知时间(对于使用JS插入模板来渲染的框架,建议将骨架图的路由生成逻辑单独提出来) 科普一下 Chrome会渲染局部CSSOM和DOM First Paint和...第一脚本前的CSS如果还会去加载字体文件,那么即使CSSOM和DOM构建完成触发FP,页面内容也会是空白,只有等到字体文件下载完成才会出现内容(这也是我们在打开一个加载了谷歌字体的网站会白屏很长时间的原因

    2.1K40

    Web自动化测试面试题

    Web自动化测试面试题 1、Selenium 中 hidden 或者是 display = none 的元素是否可以定位到? 不可以。...6、自动化测试的时候是不是需要连接数据库做数据校验? 从数据库层面来进行数据校验可以更方便验证系统的数据处理方面是否正确,数 据处理逻辑正常后,UI 层面上的校验也是需要做的。...css、xpath 几乎所有的元素都可以定位到,但是它们的短处在于页面上更改了元素后位置很容易改变,所以首先使用的还是 id 或者 name 等。 8、如何去定位页面上动态加载的元素?...触发动态加载元素的事件,直至动态元素出现,进行定位。 9、如何去定位属性动态变化的元素? xpath 或者 css 通过同级、父级、子级进行定位。 10、什么是 page object 设计模式?...如果 要实现接口测试,可以使用 Requests 模块来实现。

    2.4K20

    Web前端实现瀑布流的几种方法

    瀑布流效果图如下: 前端实现瀑布流的方法很多,其中最简单的就是用CSS实现,其次是通过jQuery实现,最麻烦的就是js,那么就从最麻烦的开始吧$_$ 不管用哪种方法去实现瀑布流效果,html文件里的写法都是相同的...,粘贴如下: $函数是自定义的函数,根据id获得标签 还有一个获取数组中特定值的脚标的函数 在网页加载完毕的onload函数中调用实现瀑布流的函数,第一个参数是最外层的div标签的id="main...jQuery实现瀑布流效果 首先要保证你有jQuery文件,然后导入jQuery文件,css文件跟js实现瀑布流效果是一样的,就不重新粘贴一遍了。...重点的还是我们自己写的js实现文件,道理跟js实现是一样的,所以我连函数名起得都一样,不多说,两个主要的函数直接粘贴如下: 实现瀑布流函数 判断是否加载的函数 加载数据 OK,jQuery实现瀑布流效果搞定了...CSS实现瀑布流效果 现在可以把前面的都忘掉了,最简单的实现方式来了。这个是没有js文件的,只需要修改css文件就行,直接粘贴代码: OK,css实现瀑布流效果搞定了。 纳尼?就三行?对,就三行!

    3K10

    【JQuery】基础从零入门操作,简单详细

    使⽤JQuery可以轻松地选择和操作HTML元素 从 ⽽减少了开发⼈员编写的代码量,提⾼了开发效率,它提供的 API 易于使⽤且兼容众多浏览器, JQuery对于事件的处理也进⾏了简化, 提供了⼀个简单的...二:JQuery使用 三:JQuery语法 JQuery 的代码通常都写在 document ready 函数中 这是为了防⽌⽂档在完全加载(就绪)之前运⾏ jQuery 代码,即在 ⽂档加载完成后才可以对...如果在⽂档没有完全加载之前就运⾏函数,操作可能失败 1:起手式 先粘贴JQuery $可以理解成选择,ready加载整个文档,执行function方法 表示整个页面加载完之后执行的代码 2:选中元素...这里用的是ID选择器,也可以用标签选择器 ①解释:点击button后就隐藏 ②代码简写 ③再简写(但是不规范) 四:JQuery选择器 JQuery选择器 基于已经存在的CSS选择器, 除此之外, 还有...:取值 2:赋值 举例①更改链接 举例②更改图片尺寸 举例③点击 按钮尺寸变大 六:获取返回CSS值/属性 css() ⽅法设置或返回被选元素的⼀个或多个样式属性 1:返回属性 (1)

    99010

    献给前端求职路上的你们(下)

    (6) 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。 (7) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。...503 – 服务不可用 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?...解析:对加载到的资源(HTML、JS、CSS等)进行语法解析,建议相应的内部数据结构(比如HTML的DOM树,JS的(对象)属性表,CSS的样式规则等等)} 你常用的开发工具是什么,为什么?...可以从你接触前端到逐步深入学习使用的过程中,你用过什么编辑器以及转化的过程和原因方面回答 对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?...实现界面交互 提升用户体验 有了Node.js,前端可以实现服务端的一些事情 前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好, 参与项目,快速高质量完成实现效果图

    1.4K60

    根据IE版本加载不同CSS样式的方法小结,解决低版本IE兼容问题

    搜来搜去,网上给出大约有三种简单可行的方法: 一、最简单的方法就是在页面引入 css3-mediaqueries.js 插件解决兼容性问题; 经测试,发现此方法 IE8 是可以了,但是 IE7 还是有点局部问题...二、准备多个 CSS 样式表,通过 JS 判断 IE 版本来激活 CSS 样式表; 拿到网友给的源码,修改了半天才搞定!谁叫我是小白呢!...} }; }); 原理很简单,使用 js 判断 IE 及 IE 版本,然后根据不同版本来改变当前 css 样式表的 href,由于使用了 jQuery ready 预加载方法,所以需要在代码之前引入...三、通过条件注释判断浏览器版本,从而加载不同的 css 样式表 代码非常简单: 使用第三种方法来解决兼容性问题的时候,只需要将这些采用 CSS3 Queries 方法的 css 样式单独抠出来,使用常规的写法再写一份放到HtForOldIE.css样式表当中,其他样式定义无需更改

    3.1K80

    JS的面试题(一)

    ,当内层函数在外层函数的外部调用时,就产生了闭包 10.用闭包可以解决什么问题 循环绑定事件中获取索引 无需全局变量实现变量值递增 11.argums是什么?...常用dom操作的实现: 在指定元素后面添加元素(外部)after() 在指定元素前面添加元素(外部)before() 在指定元素内部追加元素(内部)append() 将新元素添加到指定元素的首部...找div是否有class ips 36、jQuery有哪些动画,分别设置的是什么?...45、列举jquery的ajax请求,并说明作用 (“div”).load() 加载文档 .get() 获取数据 .post()传递数据 .getScript() 加载js文件 .getJSON()...jQuery.noConflict() jQuery 使用 noConflict 方法来放弃 调用时的命名,之后由 jQuery 代替 进行编写 54、如何用jQuery获取元素在文档中的位置?

    1K10

    一个小时学会jQuery

    前一段时间录了一套关于jQuery的视频分享给大家,可以在下载区下载到,本来想配合文字一起的,后面发现视频+帮助文档也是非常好的学习方法。...有了jQuery,就能够利用现有知识去发挥选择器的威力,在很大程度上简化JavaScript代码。CSS中可以使用的选择器基本都可以用到jQuery中,反之不然。 3.1. ...选择器和包装集 为了使设计和内容分离而把CSS引入Web技术的时候,需要以某种方式从外部样式表中引用页面元素组。...在jQuery中,可以获取同一类名的多个HTML元素,编写方式同CSS,即在类名的前面加上点号。...如果希望判断数据自从上次请求后没有更改过就报告出错的话,可以设置ifModified为true。

    22.4K71

    【性能】688- 前端性能优化——从 10 多秒到 1.05 秒

    避免空的 src 和 href 使用 gzip 压缩内容 把 CSS 放到顶部 把 JS 放到底部 避免使用 CSS 表达式 将 CSS 和 JS 放到外部文件中 减少 DNS 查找次数 精简 CSS...和 JS 避免跳转 剔除重复的 JS 和 CSS 配置 ETags 使 AJAX 可缓存 尽早刷新输出缓冲 使用 GET 来完成 AJAX 请求 延迟加载 预加载 减少 DOM 元素个数 根据域名划分页面内容...可见,请求时间是 4.59 s ,总请求个数 51 , 而 js 的请求个数是 8 , css 的请求个数是 3 (其实就 all.css 一个,其它 2 个是 Google浏览器加载的), 而没使用...Tips:大的图片在不同终端,应该使用不同分辨率,而不应该使用缩放(百分比) 整个 压缩、合并 (js、css、img) 再放入 CDN ,请求时间从 10 多秒 ,到最后的 1.70 s,性能提升 5...需要使用缓存协商,先与服务器确认返回的响应是否被更改,如果之前的响应中存在 ETag ,那么请求的时候会与服务端验证,如果资源未被更改,则可以避免重新下载。

    1.6K21

    油猴脚本编写教程

    如果不指定的话,油猴会默认添加几个最常用的API require 如果脚本依赖其他js库的话,可以使用require指令,在运行脚本之前先加载其他库,常见用法是加载jquery connect 当用户使用...,然后比对版本号确认是否更新 脚本权限 下面简单介绍一下grant指令那里可以填写的一些权限,详情请查看油猴脚本文档。...GM_getValue(name,defaultValue) 从油猴扩展的存储中访问数据。可以设置默认值,在没成功获取到数据的时候当做初始值。...GM_log(message) 将日志打印到控制台中,可以使用F12开发者工具查看。 GM_addStyle(css) 像网页中添加自己的样式表。...所以需要一个额外的判断,这就需要利用油猴提供的API来保存当前日期,只有每天第一次的时候才会执行检查代码。本来我想的很复杂,需要一个日期变量,然后还要额外一个变量保存是否是今天第一次更新。

    7.9K10

    【JavaScript】网页交互的灵魂舞者

    ,JavaScript 的数组的大小可以更改,里面也可以存储很多类型 var arr = [1, 2, 'haha', false]; 再来看新增,数组下标为 - 1 时的值也可以更改,也可以不按照下标顺序新增...对象 JavaScript 中创建对象使用一组 { } ,里面的属性和值通过键值对来组织,键值对之间使用逗号分割,键和值之间用冒号区分,获取对象的属性也是通过 ' . ' 来获取,还可以通过 ' [ ]...Object 的方式 new 对象 还可以通过 this 去修改一些属性的值 3. jQuery jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作 基础语法:$(selector...this).hide(); }); }); JQuery 的代码通常都写在 document ready 函数中 ,这样可以保证在文档加载完之后才能对页面进行操作...是获取或者设置表单字段的值,同理,如果有参数就表示设置值,没有参数就表示获取值 attr () 还可以通过 attr () 方法来获取或者设置属性值 通过 css() 方法获取样式 获取 CSS

    61210

    资源文件的动态加载

    缺点是BASE64在一定程度上会增大文件大小(即使用了GZip压缩);浏览器也要重新解码显示,会带来一定的性能问题;最重要的是,无法被缓存,每次请求HTML/CSS都会加载一遍。...当然有一些cdn站点提供诸如jquery之类的服务,在jQuery官方下载可以看到介绍,经我试验下来微软的ajax.aspnetcdn.com响应速度最快,优点有很多,速度和稳定性咱就不提了,更重要的是对浏览者来说他们可能已经请求过该脚本并放在缓存中了...Web Worker 部分浏览器支持 web worker 功能,可以创建一个 worker 在后台工作,包括加载外部脚本。...Script DOM Element 这是最常用的方式,它的优点很多:可以跨域、可以加载任何格式的外部 js(不需要对外部 js 进行重构)、不会阻塞其它资源的下载、实现简单。...不过这不会造成问题,因为这两种浏览器可以直接通过上面的 Script DOM Element 的方式来加载外部脚本。

    3K90

    JavaScript是什么意思?

    其中一些是: ● 向页面添加新的HTML内容 ● 更改现有HTML内容和样式 ● 对用户操作做出反应,如鼠标点击,指针移动等。 ● 可以获取和设置cookie ● 记住客户端的数据。...每当解析器遇到CSS或JavaScript指令(内联或外部加载)时,它都会根据需要移交给CSS解析器或JavaScript引擎。...JavaScript引擎加载外部JavaScript文件和内联代码,但不会立即运行代码;它等待HTML和CSS解析完成。...如何在网页中加载JavaScript? 在网页中加载JavaScript的最常用方法是使用脚本 HTML标记。根据您的要求,您可以使用以下方法之一。...来自与网页不同的域,则可以指定完整的URL,如下所示: jquery.com/jquery-3.2.1

    15.4K10

    jQuery 教程

    您可以使用以下方法: 从 jquery.com 下载 jQuery 库 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery 下载 jQuery 有两个版本的 jQuery 可供下载...JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。...通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。...的 HTTP GET 请求从服务器加载数据 $.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码的数据 $.getScript() 使用 AJAX 的 HTTP GET 请求从服务器加载并执行...检测浏览器是否使用W3C的CSS盒模型渲染当前页面 $.browser 在版本 1.9 中被废弃。

    21K20
    领券