link和@import的区别,性能优化

这篇具有很好参考价值的文章主要介绍了link和@import的区别,性能优化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

link和@import的区别
两者都是外部引用CSS的方式,它们的区别如下:

link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式;而@import不支持。

transition和animation的区别

transition是过度属性,强调过度,它的实现需要触发一个事件(比如鼠标移动上去,焦点,点击等)才执行动画。它类似于flash的补间动画,设置一个开始关键帧,一个结束关键帧。
animation是动画属性,它的实现不需要触发事件,设定好时间之后可以自己执行,且可以循环一个动画。它也类似于flash的补间动画,但是它可以设置多个关键帧(用@keyframe定义)完成动画。

为什么有时候⽤translate来改变位置⽽不是定位?
translate 是 transform 属性的⼀个值。改变transform或opacity不会触发浏览器重新布局(reflow)或重绘(repaint),只会触发复合(compositions)。⽽改变绝对定位会触发重新布局,进⽽触发重绘和复合。transform使浏览器为元素创建⼀个 GPU 图层,但改变绝对定位会使⽤到 CPU。 因此translate()更⾼效,可以缩短平滑动画的绘制时间。 ⽽translate改变位置时,元素依然会占据其原始空间,绝对定位就不会发⽣这种情况。

(1)css压缩:将写好的css进行打包压缩,可以减小文件体积。
(2)css单一样式:当需要下边距和左边距的时候,很多时候会选择使用 margin:top 0 bottom 0;但margin-bottom:bottom;margin-left:left;执行效率会更高。
(3)减少使用@import,建议使用link,因为后者在页面加载时一起加载,前者是等待页面加载完成之后再进行加载。

css雪碧图,同一页面相近部分的小图标,方便使用,减少页面的请求次数,但是同时图片本身会变大,使用时,优劣考虑清楚,再使用。

字体样式可以font-family如果需要手动添加字体类型,在条件允许的情况下,压缩字体文件只挑取需要显示的文字

单行、多行文本溢出隐藏

单行文本溢出

css复制代码overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行

多行文本溢出

css复制代码overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式:从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数

注意:由于上面的三个属性都是 CSS3 的属性,没有浏览器可以兼容,所以要在前面加一个-webkit- 来兼容一部分浏览器。】

  1. HTTP和HTTPS协议的区别
    HTTP和HTTPS协议的主要区别如下:

HTTPS协议需要CA证书,费用较高;而HTTP协议不需要;
HTTP协议是超文本传输协议,信息是明文传输的,HTTPS则是具有安全性的SSL加密传输协议;
使用不同的连接方式,端口也不同,HTTP协议端口是80,HTTPS协议端口是443;
HTTP协议连接很简单,是无状态的;HTTPS协议是有SSL和HTTP协议构建的可进行加密传输、身份认证的网络协议,比HTTP更加安全。文章来源地址https://www.toymoban.com/news/detail-580766.html

到了这里,关于link和@import的区别,性能优化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • import时加{}与不加的区别

    在JavaScript中,使用 import 语句导入模块时,加上花括号 {} 与不加的区别在于: 不加花括号:导入整个模块对象。例如, import axios from \\\'axios\\\' 会导入整个 axios 模块,可以通过 axios.get() 等方法来使用它。 加上花括号:只导入模块中的指定变量或函数。例如, import { get, post }

    2024年02月16日
    浏览(38)
  • import后加不加{}的区别(es6引用)

    目录 背景: 1.不加{} 2.加{} 总结: ES6使用import引入定义模块时加不加花括号: export及export default的区别: 背景: 当需要在main.js中引入A.js 1.不加{} 这种引入方法,A.js文件中需要提供默认的 export defulat导出 ( 必须是默认导出 ), 这样在main.js文件中才可以使用A 2.加{} 这种引

    2024年02月04日
    浏览(38)
  • Docker学习(十八)load 和 import 命令的区别

    Docker 中有两个命令可以将本地文件系统中的 tar 文件导入到 Docker 中: docker load 和 docker import 。尽管它们的作用类似,但它们之间有一些重要的区别。 docker load 的使用示例: docker import 的使用示例: 在使用 docker import 命令时,需要指定新的镜像名称和标签,因为容器文件系

    2024年02月08日
    浏览(35)
  • 一篇文章说透require和import的区别

    require/exports 和 import/exoprt 属于两种不同的 模块化规范 . require/exports 遵循 CommonJS 模块规范, 而 import/exoprt 遵循 ES6 模块规范. 那么怎么理解模块化规范? 模块化规范: 即为javascript提供模块编写 模块依赖 模块运行的方案 CommonJS模块规范 出现的时间在2010年左右, 属于是野生规范

    2024年02月04日
    浏览(25)
  • 【云原生】深入理解 Docker Load 和 Docker Import 的区别

    深入理解 Docker Load 和 Docker Import 的区别 Docker 是一个流行的容器化平台,提供了丰富的命令和功能,其中 docker load 和 docker import 是两个常用的命令,用于加载 Docker 镜像,但它们在实现和使用上存在着显著的区别。 Docker Load 1. 命令格式 2. 目标对象 docker load 的目标对象是 Do

    2024年01月23日
    浏览(40)
  • 开发经验分享之:import引入包和@Autowired注入类有什么区别

    大家好,我是三叔,很高兴这期又和大家见面了,一个奋斗在互联网的打工人。 import 和 @Autowired 想必大家在 Java 开发中使用频率最多的之一了把,这篇博客将解释这两个概念的区别和作用,帮助你更好地理解它们在Java开发中的应用。 import引入包 在 Java 中,import 关键

    2024年02月14日
    浏览(43)
  • JTAG、SWD、JLINK、ST-LINK、ULINK的区别

    什么是下载调试器? 简单来说,下载调试器是将PC(例如通过USB协议)发送的命令转换为 MCU(负责MCU内部外围设备)理解的语言(例如SWD或JTAG协议)的设备,加载代码并精确控制执行。 什么是标准? 简单来说,标准是一组规则和协议,特定行业中的每个参与者都同意遵循并

    2023年04月10日
    浏览(38)
  • (区别、详解、使用)module.exports与exports,export与export default,import 与require

    目录 导出简介(里面有小细节请仔细阅读)  module.exports与exports 1.该js文件要导出的值即为test  2.该js文件要导出的值即为test1和test2 3. 注意这里我是先给module.exports.test2赋值,然后给module.exports赋值,因此{test1}覆盖了原来的test2,因此module.exports中只有test1  4. 该js文件要导出

    2024年02月08日
    浏览(45)
  • 【性能优化】性能优化

    ❤️ Author: 老九 ☕️ 个人博客:老九的CSDN博客 🙏 个人名言:不可控之事 乐观面对 😍 系列专栏: 性能优化分为运行效率和加载效率 减少HTTP请求数量 1.合并文件:精灵图,字体图标 使用CDN 一般都分发静态内容 缓存 压缩文件、混淆 js,css,html等都压缩,gzip minify:去掉

    2024年02月09日
    浏览(45)
  • 前端面试:【性能优化】页面加载性能、渲染性能、资源优化

    嗨,亲爱的前端开发者!在今天的Web世界中,用户期望页面加载速度快、交互流畅。因此,前端性能优化成为了至关重要的任务。本文将探讨三个关键方面的性能优化:页面加载性能、渲染性能以及资源优化,以帮助你构建更快速、响应更快的Web应用程序。 1. 页面加载性能:

    2024年02月11日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包