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

如何避免FOUC

如何避免FOUC FOUC即无样式内容闪烁也可以称为文档样式短暂失效,主要就是指HTML已加载而样式表并未加载,此后样式表再加载而产生闪烁现象。...样式表前置 根据浏览器渲染顺序,将CSS在中引入或者嵌入,相对于将CSS放到或者页面底部来说,可以使页面渲染速度加快,这对于页面内容比较丰富网站或者网络链接较慢时相当重要。...假如将样式表放置于底部,就会导致浏览器还未加载样式表就开始渲染页面,无法渐进式渲染页面而直接从无样式状态立即跳转到有样式状态,就会造成FOUC,用户体验较差;此外有些浏览器可能会在CSS下载完成后才开始渲染页面...尽量避免使用@import 尽量使用而避免使用@import,当HTML文件被加载时,引用文件会同时被加载,而@import引用文件则会等页面全部下载完毕再被加载,所以有时候浏览...@import加载CSS页面时会没有样式,会出现FOUC现象,网速慢时候就比较明显。

1.1K20

前端魔法堂:解秘FOUC

前言  对于问题多多IE678,FOUC(flash of unstyled content)——浏览器样式闪烁是一个不可忽视的话题,但对于ever green浏览器就不用理会了吗?...解决方法  现在我们知道FOUC时由于页面采用临时样式来渲染页面而导致,其中仅有chrome能好屏蔽了这一点,而其他浏览器就呵呵了。那有什么方案可以解决呢?... /*modernizr会将htmlno-js替换为js,并将modernizr代码在最后时加载,那么就能保证所有样式文件已经加载完成...(编译modernizr时记得勾setClasses哦,否则不会替换no-js!)...总结  上述方案虽然解决了FOUC问题,但很明显地延长了首屏白屏时间,当前较流行App Shell(可以理解为先显示页面布局骨架或一幅图片)也会失效,所以对于2C应用仅仅采用上述方案效果并不理想

1.4K70
您找到你想要的搜索结果了吗?
是的
没有找到

让骨架屏更快渲染 - 知乎

这是由于浏览器构建渲染树需要 DOM 和 CSSOM,因此 HTML 和 CSS 都是会阻塞渲染资源。这在大部分场景下都是合情合理,毕竟让用户看到内容在样式加载前后闪烁(FOUC)是需要避免。...Webpagetest Firefox 完全不阻塞渲染,除非 中已经出现了阻塞 。这样后续内容就会出现 FOUC。Webpagetest。...在 Vue 项目中应用 虽然异步加载样式表不会阻塞骨架屏渲染,但是当前端渲染内容替换掉骨架屏内容时,必须保证此时样式表已经加载完毕,否则真正有意义页面内容将出现 FOUC。...由于样式表和 JS 加载顺序无法预知,我们必须考虑两者加载先后情况。...首先,在模板中我们需要加入针对 JS 和 CSS : <% for (var jsFilePath of htmlWebpackPlugin.files.js

78010

浏览器工作原理分析与首屏加载

浏览器支持并行下载静态文件(只是下载文件),所以当浏览器解析到某个css文件或者js文件时,可能该文件已经缓存在浏览器里了。PS. 不同浏览器并行加载资源数不一样,一般在2-8个之间。...,会停止页面的解析过程,包括HTML、CSS,所以通常我们将JS放在页面底部,特别是不是首屏必须加载JavaScript脚本,可以采用延迟加载或者异步方式。...减少请求:CSS、JavaScript文件数尽量少,甚至当CSS、JS代码不多时,可以考虑直接将代码内嵌到页面中。 多用缓存:缓存能大幅度降低页面非首次加载时间。...做预加载:部分H5页面首屏可能要下载较多静态资源,比如图片,这时为了避免加载时出现“难看”页面,用预加载(loading方式)做一个过渡。 4.附录 什么是白屏和FOUC(无样式内容闪烁)?...web browsers 浏览器工作原理:新式网络浏览器幕后揭秘 WebKit内核分析 白屏问题与FOUC无样式内容闪烁/加载异步

1.7K100

面试官:DTD 有什么作用?

与后续元素渲染异步执行,乱序执行,若js文件之间存在依赖关系,容易产生错误, 只适用于完全没有依赖文件,文档解析过程中异步下载,下载完成之后立即执行。 <!...性能更优 注:内嵌脚本也不要紧跟在标签之后,否则会导致页面阻塞去等待样式表下载。 白屏和FOUC是什么?...FOUC 有的是先对 HTML 元素进行展示,然后等待 CSS 加载完成之后重新对样式进行修改(无样式内容闪烁) 如何解决FOUC问题 尽量把 js 文件放在 标签后面引入,执行。...如果将 js 放在 head 里面,则会先被浏览器解析,但是这时 body 还没被解析,如果这个时候,浏览器解析到 js 出现错误,就会阻止后续渲染。 例外的话?...一般都会绑定一个监听 onload,当全部html文档解析完之后,再执行代码 window.onload = function() { // 将所有 js 代码都在 window.onload

89510

客户端js js脚本引入 js解析过程

在core.js执行时候读取这段文本,然后动态执行一次。浏览器不会执行之间代码 html中事件处理程序 当脚本所在html文件被载入时候。脚本里js会执行一次。...为了可交互,js会定义事件处理程序即web浏览器先注册函数,并在之后调用其作为事件响应。其中事件处理程序属性可以包含任意条js语句。相互之间用逗号分隔。...url中js 应用用途 书签 通过协议类型指定url内容为任意字符串,该字符串是会被js解释器运行js代码,其会被当成单独一行代码实现。即语句之间必须使用分号作为分割。 即,书签实现。...事件驱动js js还能通过注册事件程序函数写程序。之后在发生该事件时候异步调用这些函数。 程序会响应一个事件,然后调用一个函数,该函数称为事件处理程序,事件监听器,或者回调,将该函数注册。  ...将一个监听器和回调函数绑定,当监听器被触发时候,回调函数将会被触发。 客户端js线程模型 js客户端为单线程模型。

13K80

几个前端工程师应当掌握“词语”

HTML5学堂-码匠:W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少? 有不少前端开发工程师,可能并不清楚下面的部分词语,但是在实战中其实都在使用着它们。...缩写,表示是“万维网联盟”。...FOUC 什么是FOUC FOUC是Flash Of Unstyled Content缩写,指的是加载网页时出现短暂CSS样式失效。...造成FOUC问题原因是什么 文档样式闪烁成因:在IE5+浏览器中,如果IE临时文件夹没有缓存过该页面的CSS文件;出现了样式表位置异常现象(使用import方法导入样式表、将样式表放在页面底部、多个样式表放置在...html结构不同位置等) 网页会优先加载整个HTML文档DOM,然后再去导入外部CSS文件,因此,在页面DOM加载完成到CSS导入完成过程中,会有一段时间页面上内容是没有样式,这段时间长短跟网速

89060

理解jsthis

为什么使用this 如果没有this,那么我们代码会是下面的写法: 在方法中,为了能够获取到name名称,必须通过obj引用(变量名称)来获取。...但是这样做有一个很大弊端:如果我将obj名称换成了info,那么所有的方法中obj都需要换成info。...(编写位置)没有关系; 3.this绑定和调用方式以及调用位置有关系; 4.this是在运行时被绑定; this绑定规则 默认绑定 在独立函数调用情况下使用默认绑定 独立函数调用我们可以理解成函数没有被绑定到某个对象上进行调用...: 也就是它调用位置中,是通过某个对象发起函数调用。...这个和setTimeout源码内部调用有关; setTimeout内部是通过apply进行绑定this对象,并且绑定是全局对象; 案例二:数组forEach 数组有一个高阶函数forEach,用于函数遍历

2.9K30

JS解析

JS解析 学习目标: 了解 定位js方法 了解 添加断点观察js执行过程方法 应用 js2py获取js方法 1 确定js位置 对于前面人人网案例,我们知道了url地址中有部分参数,但是参数是如何生成呢...找到js位置之后,我们可以来通过观察js位置,找到js具体在如何执行,后续我们可以通过python程序来模拟js执行,或者是使用类似js2py直接把js代码转化为python程序去执行 观察js...在知道了js如何生成我们想要数据之后,那么接下来我们就需要使用程序获取js执行之后结果了 3.1 js2py介绍 js2py是一个js翻译工具,也是一个通过纯python实现js解释器...js2py模块来执js代码,得到结果 但是在使用python程序实现js执行时候,需要观察js每一个步骤,非常麻烦,所以更多时候我们会选择使用类似js2py模块去执行js,接下来我们来使用js2py...js 通过在chrome中search all file 搜索关键字可以确定js位置 观察js数据生成过程可以使用添加断点方式观察 js2py使用 需要准备js内容 生成js执行环境

2.8K50

灵活js

前言 如果你觉得写基本赋值语句,或定义几个方法,或者使用下对象内置方法就算会了js,那其实还差远。 还差什么呢?还差一些编程思维,以及优化编程思想。...备注:可能你会想到函数对象写法,函数是特殊对象类型,当然也可以这样用。这里只提示一点,如果你通过点语法在函数外部申明方法,再通过new创建对象是无法使用这些方法。...,因为通过this定义到新创建对象了。...(prototype) prototype.js 是一款js框架,对很多原生对象拓展了很多函数方法,比如Function,String等。...() // 但是这样是被不允许,因为你污染了原生对象,所以别人创建函数也会被你方法污染。

1.2K20

【云+社区年度征文】全年技术盘点与总结(含小程序开发)

务必掌握面向对象等问题,如(面向对象编程中类,继承等)。 11. 务必掌握Ajax与JSON等。 12. 务必掌握HTTP和HTTPS等。 13. 务必掌握Node.js(开发服务器端开发)等。...务必掌握Vue.js(框架,插件),Angular(框架,插件),React(框架,插件)等。 16....标签要闭合,英文要小写,不要嵌套混乱,用标签语义化来提高搜索概率,使用外链式CSS和JS。(使结构,样式,行为分离,内容能够被更多设备访问,代码简洁,开发组件化,代码易维护,可复用等)。...visibility:hidden隐藏元素,为文档布局中保留原来空间。 13.有人问FOUC是啥?如何避免FOUC?...在页面DOM加载完成到CSS导入完成中间,有一段时间页面上内容是没有样式。这段时间跟网速和电脑速度有关。 可以解决FOUC:在head标签之间加入一个link或script标签。

1.7K341

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券