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

使用.htaccsee来强制浏览器缓存，主要使用ExpiresActive系列指令。 这套指令包括以下三个指令：ExpiresActive：模块开关 ExpiresByType：按类型缓存 ExpiresDefault：默认缓存 其中，ExpiresActive是必须开启的，然后选择第二或第三个指令来决定如何缓存。我推荐使用的是ExpiresByType，即按文件的不同类型来设置缓存。如我这次优化后的论坛，其缓存部分是这么写的：ExpiresActive on

ExpiresByType text/css M78844000

ExpiresByType text/javascript M78844000

ExpiresByType image/gif M78844000

ExpiresByType image/jpeg M78844000

ExpiresByType image/png M78844000

ExpiresByType application/x-javascript M78844000ExpiresDefault的作用就是设置默认缓存值，无论什么类型的文件，都会先按照ExpiresDefault的设置进行缓存，之后如果有ExpiresByType设置，则按照ExpiresByType进行缓存。通常html/text类型是不需要缓存的，因此ExpiresDefault使用的比较少，但也有部分网站将ExpiresDefault设置成较小的值，如1分钟、30秒之类的来提升网站的速度。

适合缓存的内容

1. 不变的图像，如logo，图标等

2. js、css静态文件

3. 可下载的内容，媒体文件

适合协商缓存

1. HTML文件

2. 经常替换的图片

3. 经常修改的js、css文件，js、css文件的加载可以加入文件的签名来拒绝缓存，如‘index.css?签名’，‘index.签名.js’

不建议缓存的内容

1. 用户隐私等敏感数据

2. 经常改变的API数据接口

NGINX配置缓存策略

本地缓存配置

1. add_header指令：添加状态码为2XX和3XX的响应头信息，设置代码add_header name value [always]，可以设置Pragma、Expires、Cache-Control，可以继承

2. expires指令：通知浏览器过期时长，设置代码expires time

3. Etag指令：指定签名，设置代码etag on|off，默认on

前端代码和资源压缩

优势

1. 让资源文件更小，加快文件在网络中的传输，让网页更快的展现，降低带宽和流量的开销

压缩方式

1. js、css、图片、html代码的压缩

2. gzip压缩

gzip配置

gzip on|off#是否开启gzipgzip_buffers 32 4K|16 8K#缓冲（在内存中缓存几块？每块多大）gzip_comp_level [1-9] #推荐6，压缩级别（级别越高，压得越小，越浪费CPU计算资源）

gzip_disable #正则匹配UA，什么样的Uri不进行gzip

gzip_min_length 200 #开始压缩的最小长度

gzip_http_version 1.0|1.1 #开始压缩的http协议版本

gzip_proxied #设置请求者代理服务器，该如何缓存内容

gzip_types text/plain application/xml image/png #对哪些类型的文件压缩，如txt、xml、css

gzip_vary on|off #是否传输gzip压缩标志

CDN加速

定义

1. CDN的全称content delivery network，内容分发网络

2. 尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定

3. 在网络各处放置节点服务器所构成的有的互联网基础之上的一层智能虚拟网络

4. CDN系统能够实现地根据网络流量和各节点的连接、负载状况以及到用户距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上

优势

1. 本地cache加速，提高了企业站点（尤其含有大量图片和静态页面站点）的访问速度

2. 跨运营商的网络加速，保证不同网络的用户都能得到良好的访问质量

3. 远程访问用户根据DNS负载均衡技术只能选择cache服务器

4. 自动生成服务器的远程Mirror（镜像）cache服务器，远程用户访问时从cache服务器上读取数据，减少远程访问的带宽、分担网络流量、减轻原站点web服务器负载等功能

5. 广泛分布的cdn节点加上节点之间的智能冗余机制，可以有效地预防黑客入侵

工作原理

1. 用户发起请求

2. 智能DNS的解析（根据IP判断地理位置、接入网类型、选择路由最短和负载最轻的服务器）

3. 取得缓存服务器ip

4. 把内容返回给用户（如果缓存中有，没有就执行5、6、7）

5. 向源站发起请求

6. 将结果返回给用户

7. 将结果存入缓存服务器

适用场景

1. 站点或者应用中大量静态资源的加速分发，例如css、js、图片和HTML

2. 大文件下载

3. 直播网站

独立图片服务器

必要性

1. 分担web服务器的I/O负载，将耗费资源的图片服务器分离出来，提高服务器的性能和稳定性

2. 能够专门对图片服务器进行优化，为图片服务器设置针对性的缓存方案，减少带宽成本，提高访问速度

3. 提高网站的可扩展性，通过增加图片服务器，提高图片吞吐能力

采用独立域名

原因：

1. 同一域名下浏览器的并发连接数有限制，突破浏览器连接数的限制

2. 由于cookie的原因，对缓存不利，大部分web cache都只缓存不带cookie的请求，导致每次的图片请求都不能命中cache

如何图片上传和同步

1. NFS共享方式

2. 利用FTP同步

动态语言静态化

将现有的PHP等动态语言的逻辑代码生成为静态的HTML文件，用户访问动态脚本重定向到静态HTML文件的过程。对实时性要求不高

原因：

1. 动态脚本通过会做逻辑计算和数据查询，访问量越大，服务器压力越大

2. 访问量大时可能会造成CPU负载过高，数据库服务器压力过大

3. 静态化可以减低逻辑处理压力，降低数据库服务器查询压力

实现方法

1. 使用模板引擎

2. 利用ob系列函数

需要获取swoole、workerman、TP、laravel、vue、Linux、redis以及性能优化，并发项目实战，微服务 架构方面的资料，可以私信我哦