CSS 如何影响首次加载时的白屏时间的解决方法_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

提高网站页面的加载速度的方法其实有很多,那本文主要从下面四个角度进行讨论,分享常用的提高网页加载速度的技巧:一、网页压缩技术对于网页压缩而言,相信各位站长都比较熟悉,主要是启用服务器Gzip,对页面Gzip压缩,减少元素的体积,从而减少数据的传输,进而提高网页的加载速度。二、Css优化(1)css位置CSS说明如果出现在后,页面需要重新渲染,打开速度受到影响。所有css定义代码的位置要放到网站之前。(2)css sprite技术网站上的一些图片可以采用css sprite技术进行合并,减少加载请求次数,从而提高网页的加载速度。(3)css代码优化通过对css代码属性的简写、移除多余的结构(frameworks)和重设(resets)等一系列的方法和技巧来简化css代码,减小css文件的大小。三、JS优化(1)JS位置网页代码中对js进行优化的时候,建议将JS放在页面最后,这样可以加快页面打开速度。(2)合并JS合并相同域名下的js,通过减少网络连接次数从而提高网页的打开速度。(3)LazyLoad(延迟加载)技术Lazy Load是一个用JavaScript 编写的 jQuery 插件,它可以延迟加载长页面中的图片。在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置。四、缓存静态资源通过设置浏览器缓存,将css、js等不太经常更新的文件缓存在浏览器端,这样同一访客再次访问你的网站的时候,浏览器就可以从浏览器的缓存中获取css、js等,而不必每次都从服务器读取,这样在一定程度上加快了网站的打开速度,又可以节约服务器流量www.zgxue.com防采集请勿采集本网。

含有外部 css 文件的渲染流水线

这是一个ajax请求,几秒钟的延迟时间属于正常范围,它是异步运行的,对页面的加载速度不会造成直接影响。从图片中可看出,它的加载时间为138ms,不算长啊,知后面的4.84s是它等待服务器返回数据

 

资源现在包含在浏览器的缓存中,因此浏览器中请求的其他页面加载速度更快,从而提高了整体页 面速度和性能。多人团队:如果您有多个人同时在网站上工作,您可以使用允许文件签入和签出的系统,以确 保每个

上图中,请求 HTML 数据和构建 DOM 中间有一段空闲时间,这段时间可能成为页面渲染的瓶颈。DOM 构建结束后,css 文件还未下载完成这段时间内,渲染流水线一直在等待,因为下一步是合成布局树。合成布局树需要 CSSOM 和 DOM,所以需要等待 CSS 加载结束并解析为 CSSOM。这种情况下,CSS 没有阻塞 DOM 的生成。

2、UEFI启动模式用于操作系统自动从预启动的操作环境,加载到一种操作系统上,从而使开机程序化繁为简,节省时间。并且支持2T以上硬盘,加强对硬件的支持,Win8之所以启动速度快,和Win8原生支持UEFI模式

CSSOM 的作用 提供给 JS 操作样式表的能力 为布局树合成提供基础的样式信息

但xp开始集成TCP/IP协议,所以不能像98那样简单卸载后重装,可以使用 netsh 命令重置 TCP/IP协议,使其恢复到初次安装操作系统时的状态。具体操作如下: 点击“开始 运行”,在运行对话框中输入“CMD”

含有内联 JS 和 外部 CSS 页面的渲染流水线

步骤: 1.建筑物定位 房屋建筑工程开工后的第一次放线,建筑物定位参加的人员是:城市规划部门(下属的测量队)及施工单位的测量人员(专业的),根据建筑规划定7a64e59b9ee7ad9431333366303132

从上图中可以看到,构建 DOM 过程中遇到 JS 会停止构建,去解析执行 JS,因为 JS 可能会修改当前 DOM。

在执行 JS 脚本之前,若页面中包含外部 css 或内联的 css,渲染引擎需要将他们提前转为 CSSOM,因为 JS 有修改 CSSOM 的能力,所以在 JS 执行前,还要依赖 CSSOM。 这意味着 CSS 在部分情况下也会阻塞 DOM 生成。

含有外部 JS 和 CSS 页面的渲染流水线

请求到的 HTML 数据在预解析过程中,检测到有外部 JS、CSS 文件需要下载,同时发起两个文件的下载请求,下载时间不是重叠的,是按照最久的那个来算。

不管 CSS,JS 谁先到达,都要先等到 CSS 文件下载并生成 CSSOM,然后执行 JS 脚本,最后构建 DOM、布局树、绘制页面。

影响页面展示因素及优化策略

从输入 URL 到页面首次展示的三阶段:

    请求发出去后,到提交数据阶段,此时页面展示的还是之前页面的内容。 提交数据后,渲染进程会创建一个空白页面,这段时间称为 解析白屏 ,等待 CSS 和 JS 文件的加载完成,生成 CSSOM 和 DOM,然后合成布局树、XXX 等步骤准备首次渲染。 首次渲染完成后,就开始进入完整页面的生成阶段,页面会一点点被绘制出来。

最影响用户体验的就是第二阶段,包括解析 HTML、下载 CSS、下载 JavaScript、生成布局树、绘制页面等操作。

优化策略

    内联 CSS、JS,等到 HTML 下载好后便可直接开始渲染。 尽量减少文件大小,webpack 移除注释、压缩文件。 将一些不需要在解析 HTML 阶段使用的 JS 标上 async 或 defer。 对于大的 CSS 文件,可以通过媒体查询,将其拆分为不同用途的 CSS 文件,只在特定场景下加载。

HTML页面加载和解析流程:1.用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件。2.浏览器开始载入html代码,发现标签内有一个标签引用外部CSS文件。3.浏览器又发出CSS文件的请求,服务器返回这个CSS文件。4.浏览器继续载入html中部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了。5.浏览器在代码中发现一个标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码。6.服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码。7.浏览器发现了一个包含一行Javascript代码的标签,赶快运行它。8.Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个(style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码。9.终于等到了</html>的到来,浏览器泪流满面…10.等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下标签的CSS路径。11.浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过…”,浏览器向服务器请求了新的CSS文件,重新渲染页面。相关:一、浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。3.如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。4.样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。5.JS、CSS中如有重定义,后定义函数将覆盖前定义函数。二、JS的加载1.不能并行下载和解析(阻塞下载)。2.当引用了JS的时候,浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以 就会阻塞其他的下载和呈现。三、如何加快HTML页面加载速度1.页面减肥:a.页面的肥瘦是影响加载速度最重要的因素。b.删除不必要的空格、注释。c.将inline的script和css移到外部文件。d.可以使用HTML Tidy来给HTML减肥,还可以使用一些压缩工具来给JavaScript减肥。2.减少文件数量:a.减少页面上引用的文件数量可以减少HTTP连接数。b.许多JavaScript、CSS文件可以合并最好合并。3.减少域名查询:a.DNS查询和解析域名也是消耗时间的,所以要减少对外部JavaScript、CSS、图片等资源的引用,不同域名的使用越少越好。4.缓存重用数据:a.对重复使用的数据进行缓存。5.优化页面元素加载顺序:a.首先加载页面最初显示的内容和与之相关的JavaScript和CSS,然后加载HTML相关的东西,像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载。6.减少inline JavaScript的数量:a.浏览器parser会假设inline JavaScript会改变页面结构,所以使用inline JavaScript开销较大。b.不要使用document.write()这种输出内容的方法,使用现代W3C DOM方法来为现代浏览器处理页面内容。7.使用现代CSS和合法的标签:a.使用现代CSS来减少标签和图像,例如使用现代CSS+文字完全可以替代一些只有文字的图片。b.使用合法的标签避免浏览器解析HTML时做“error correction”等操作,还可以被HTML Tidy来给HTML减肥。8.Chunk your content:a.不要使用嵌套table,而使用非嵌套table或者div。将基于大块嵌套的table的layout分解成多个小table,这样就不需要等到整个页面(或大table)内容全部加载完才显示。9.指定图像和table的大小:a.如果浏览器可以立即决定图像或table的大小,那么它就可以马上显示页面而不要重新做一些布局安排的工作。b.这不仅加快了页面的显示,也预防了页面完成加载后布局的一些不当的改变。c.image使用height和width内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • css 实现渐变效果小结( linear-gradient线性渐变 和 radial-gradient径
  • 解决type=file 文件修改表单 名称不能正常回显的问题
  • 移动端前端适配方案(总结)
  • css 横向进度条和竖向进度条实现代码
  • css运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)
  • 详解盒模型大小取决于它的padding,margin,border数值
  • css+svg实现b站充电效果的示例代码
  • css动画实现领积分效果的思路详解
  • html/css中的空格处理及如何保留页面中的空格
  • css 实现小尖角聊天对话框带尖角的说话泡泡效果
  • 打开一个网站,加载顺序是什么?先加载HTML然后JS然后CSS?还是什么?
  • css样式加载慢,怎么解决。求大神帮忙!
  • 如何在没有的代码中加入css文件,而不影响网站打开速度
  • 如何在用js处理页面首次加载的问题
  • 如何处理前端页面首次加载慢的问题
  • 前端页面有哪三层构成,分别是什么?作用是什么
  • uefi启动和传统启动有什么区别
  • 为什么网页启动百度云总是打不开
  • 基础放线的步骤
  • 苹果手机相册照片右下角又一个小圆圈 一直在加载 是怎么回事?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程css首次加载移动端前端适配方案(总结)css运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)css动画实现领积分效果的思路详解css 实现小尖角聊天对话框带尖角的说话泡泡效果css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字css 实现渐变效果小结( linear-gradient线性渐变 和 r解决type=file 文件修改表单 名称不能正常回显的问题移动端前端适配方案(总结)css 横向进度条和竖向进度条实现代码css运用阿里巴巴矢量库快速在对应位置加上好看的图标详解盒模型大小取决于它的padding,margin,border数css+svg实现b站充电效果的示例代码css动画实现领积分效果的思路详解html/css中的空格处理及如何保留页面中的空格css实现气泡的小尖角效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved