css加载会造成阻塞吗?css加载会阻塞js运行吗?

html-css014

css加载会造成阻塞吗?css加载会阻塞js运行吗?,第1张

直接给出结论: 1、css并不会阻塞DOM树的解析 2、css加载会阻塞DOM树渲染 3、css加载会阻塞后面js语句的执行 为了避免过长的白屏时间,我们应该尽可能的提高css加载速度,以下有几种优化方法: 1、使用CDN(因为CDN会根据你的网络状况,替你挑选最近的一个具有缓存内容的节点为你提供资源,因此可以减少加载时间) 2、对css进行压缩(可以用很多打包工具,比如webpack,gulp等,也可以通过开启gzip压缩) 3、合理的使用缓存(设置cache-control,expires,以及E-tag都是不错的,不过要注意一个问题,就是文件更新后,你要避免缓存而带来的影响。其中一个解决防范是在文件名字后面加一个版本号) 4、减少http请求数,将多个css文件合并,或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存) 关于DOMContentLoaded: 对于浏览器来说,页面加载主要有两个事件,一个是DOMContentLoaded,另一个是onLoad。而onLoad没什么好说的,就是等待页面的所有资源都加载完成才会触发,这些资源包括css、js、图片视频等。 1、如果页面中同时存在css和js,并且存在js在css后面,则DOMContentLoaded事件会在css加载完后才执行。 2、其他情况下,DOMContentLoaded都不会等待css加载,并且DOMContentLoaded事件也不会等待图片、视频等其他资源加载。 参考自:https://juejin.cn/post/6844903667733118983

如果要在HTML文件中应用CSS样式,最常用的有三种方法:

1.内部引用

所谓内部引用就是运用style标签引用在同HTML页内<HEAD></HEAD>部分的css定义。如:

<html>

<head>

<style type="text/css">

.cssstyle { font:12px

color:#339966

border:1px #e1763d solid

}

<style/>

</head>

<body>

<div class="cssstyle">THIS IS A PARTS OF TEXT WHICH LINK CSS STYLE IN HEAD PART</div>

</body>

</html>

2.外部引用

外部引用就是用<link>标签引用外部CSS文件中的样式。如欲实现上述效果,可将CSS做成单独文件。

文件CSSSTYLE.CSS

.cssstyle { font:12px

color:#339966

border:1px #e1763d solid

}

然后在HTML引用它:

<html>

<head>

<link rel="stylesheet" type="text/css" href="cssstyle.css">

</head>

<body>

<div class="cssstyle">THIS IS A PARTS OF TEXT WHICH LINK CSS STYLE IN HEAD PART</div>

</body>

</html>

使用这种方法引用要确保CSS文件和HTML文件的相对路径完整无误,要不然HTML文档是不会找到CSS样式的。

3.内联引用

内联引用其实就是在应用CSS样式的HTML部分直接在所做用的标签上定义CSS样式,这种方法最直接,但是缺点也最明显,最大的问题就是代码繁冗,作用域也仅仅在定义的标签的作用范围。如:

<p style="color:#ccc">THIS TEXT IS GREY</p>

<p>I AM NOT GREY, WHAT COLOR AM I? :)</p>

项目中出现一个兼容性问题,Oppo、Vivo手机Webview加载本地JS、CSS不执行

一、前提 OV手机低于android 7.0版本,

二、baseUrl是Https的

三、使用: webView.loadDataWithBaseURL(baseUrl, html, "text/htmlcharset=UTF-8", "utf-8", null) 方法加载

解决办法

还有一种不太好的解决办法: webView.loadDataWithBaseURL(null, html, "text/htmlcharset=UTF-8", "utf-8", null)

但是这样会导致页面内不是完整路径的图片找不到。