文档章节

JS执行会阻塞DOM树的解析和渲染,那么CSS加载会阻塞DOM树的解析和渲染吗

JamesView
 JamesView
发布于 06/28 15:50
字数 416
阅读 18
收藏 0

结论: 
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文件合并,或者是干脆直接写成内联样式,内联样式(把css代码直接写在现有的HTML标签中)的一个缺点就是不能缓存。

本文转载自:https://blog.csdn.net/cristina_song/article/details/77512534

JamesView
粉丝 29
博文 123
码字总数 42574
作品 0
海淀
前端工程师
私信 提问
利用Resource Timing监控资源加载速度

Resource Timing API Resource Timing API提供了让用户查看一个资源从输入url到下载下来经历的各个过程所消耗的时间,借此可以来衡量网站的性能。 我们可以通过Resource Timing Api监控哪个阶...

viki_lee
2018/09/05
0
0
Web性能优化 – 关键渲染路径以及优化策略

我问你:“当你从搜索引擎的结果页面选择打开一条搜索结果时,你觉得多长时间之后,如果页面还处于白屏或者没有加载到关键信息,你会选择关掉这个窗口?” 《Designing for Performance》的作...

小铭星
2018/07/13
0
0
再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询、监听用户事件。 这些线程,根据浏览器自身特点以及web标准等等,有的会被浏览器特...

zhoulujun
2018/05/22
0
0
【译】浏览器如何呈现页面(二)

这篇文章是第二篇,第一篇在这里。 第一篇大致讲到了浏览器从获取原始数据开始,直到把内容画到屏幕上,但是还没有完。 渲染阻塞 当你听到“渲染阻塞”的时候,你会想到啥?我猜是,‘某些行...

ling20
08/21
0
0
前端性能优化之浏览器加载、解析、渲染的过程

最近在学习性能优化,学习了雅虎军规 ,可是觉着有点云里雾里的,因为里面有些东西虽然自己也一直在使用,但是感觉不太明白所以然,比如减少DNS查询,css和js文件的顺序。所以就花了时间去了...

幕后人
2017/11/07
15
0

没有更多内容

加载失败,请刷新页面

加载更多

TCP/IP学习——IP协议的辅助协议

在TCP/IP网络模型中,网络层仅凭借IP协议是无法实现通信功能,还需要其他技术或者协议辅助实现。比如在进行web页面访问时,不会直接输入IP地址进行通信,而是输入网址,那么就需要一种技术将...

江左煤郎
6分钟前
2
0
在Ignite中自定义身份认证安全插件

Ignite集群搭建完成之后,应用就可以接入集群进行各种操作了,但是默认的集群,没有安全保护机制,任何应用、支持JDBC的客户端,只要知道集群节点的IP地址,都可以接入集群,这造成了一定的安...

李玉珏
49分钟前
26
0
浅谈proxy代理模式

一、前言 代理是代替服务器去接受请求者的请求的中间人。我们也听说过代理服务器,它的作用的帮助客户端去请求客户端想要的资源,为什么要通过代理呢,那是因为客户端直接访问服务器会被拒绝...

青衣霓裳
50分钟前
5
0
Java多线程之原子操作类

在并发编程中很容易出现并发安全问题,最简单的例子就是多线程更新变量i=1,多个线程执行i++操作,就有可能获取不到正确的值,而这个问题,最常用的方法是通过Synchronized进行控制来达到线程...

全菜工程师小辉
今天
7
0
arcgis arcpy 克里金插值 掩膜 配置符号系统 自动生成图片

整体思路,最后要加载到mxd文件中,然后导出图片 首先加载mxd文件 mxd = mapping.MapDocument(r"./11.mxd") 然后读取数据 并加载到图层中 sr = arcpy.SpatialReference(4326) # 读取csv...

可达鸭Go
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部