澳门百家乐官方网站

设为首页 - 加入收藏
您的当前位置:澳门百家乐官方网站 > 澳门百家乐开户 > 效果代码 > 正文

避免CSS或JS代码内联代码的陷阱

来源:未知 编辑:澳门百家乐官方网站 时间:2019-08-10

  澳门百家乐官方网站过度使用内联CSS或JS代码,而不是通过静态资源提供代码,可能会损害网站的性能,我们将学习如何通过静态文件加载动态代码,避免内联代码过多的缺点。

  内联是直接在HTML文档中包含文件内容的过程:CSS文件可以在style元素内部内联,JavaScript文件可以内联在script元素中:

  通过打印HTML输出中已有的代码,内联可避免渲染阻塞请求,并在呈现页面之前执行代码。因此,它有助于提高站点的感知性能(即页面变得可用的时间。)例如,我们可以使用在加载站点(大约14kb)时立即传送的数据缓冲区来内联在关键的风格,以及字体大小和布局的宽度和高度,以避免跳跃的布局重新绘制时数据的其余部分被输送。

  但是,当过度使用时,内联代码也会对站点的性能产生负面影响:由于代码不可缓存,因此会反复向客户端发送相同的内容,并且无法通过Service Workers预缓存,或者从内容交付网络缓存和访问。此外,在实施内容安全策略(CSP)时,内联脚本被认为是不安全的,然而,它是一个明智的策略,内联CSS和JS的关键部分,使网站加载更快,但尽可能避免。

  我们一般都认为内联JS和CSS代码并不总是理想的,因为必须将代码重复发送到客户端,如果代码量很大,则可能会对性能产生影响。

  因此,我们可以设计了一种通过将动态JS和CSS内联代码转换为静态资源来加快网站速度的方法,这可以增强多个级别的缓存(在客户端,服务工作者,CDN中),允许进一步将所有文件捆绑在一起成只有一个JS / CSS资源,以压缩所述输出(如通过GZip压缩)时改善的比率和避免同时处理多个资源(例如,在浏览器)浏览器中的开销,并且还允许添加属性async或defer到

网友评论:

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片

联系QQ:2718181068 邮箱:2718181068@qq.com

Copyright © 2002-2011 澳门百家乐官方网站_欢迎您 版权所有 网站地图

Top