摘要: 响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下,img 会自动加载不同的图片。 <img src="image-128.png" srcset="image-256.png 2x" /> 使用上面的代码,就能实现在 阅读全文
posted @ 2022-05-30 18:34 yeqi7 阅读(197) 评论(0) 推荐(0)
摘要: 语义化标签 header、nav、article、section、aside、footer 媒体标签 audio <audio src='' controls autoplay loop='true'></audio> video <video src='' poster='imgs/aa.jpg' 阅读全文
posted @ 2022-05-30 18:14 yeqi7 阅读(47) 评论(0) 推荐(0)
摘要: meta 标签由 name 和 content 属性定义,用来描述网页文档的属性,比如网页的作者,网页描述,关键词等 常用的meta标签: (1)charset,用来描述HTML文档的编码类型:<meta charset="UTF-8" > (2) keywords,页面关键词: <meta nam 阅读全文
posted @ 2022-05-30 17:41 yeqi7 阅读(31) 评论(0) 推荐(0)
摘要: 如果没有defer或async属性,浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素,读取到就会开始加载和执行,这样就阻塞了后续文档的加载。 使用defer和async都会使得解析HTML的同时进行js脚本的异步下载,不会阻碍文档的解析, 区别是, async在下载完js脚本之后立即执 阅读全文
posted @ 2022-05-30 17:33 yeqi7 阅读(114) 评论(0) 推荐(0)
摘要: 概念 语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化)。通俗来讲就是用正确的标签做正确的事情。 使用语义化的优点 代码结构清晰,方便阅读,有利于团队合作开发。 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。 有利于搜索引擎优化(SEO)。 常见的 阅读全文
posted @ 2022-05-30 16:34 yeqi7 阅读(106) 评论(0) 推荐(0)
摘要: src 用于替换当前元素,href 用于在当前文档和引用资源之间确立联系。 (1)src src 是 source 的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置; 在请求 src 资源时会将其指向的资源下载并应用到文档内,例如 js 脚本,img 图片和frame 等元素。 阅读全文
posted @ 2022-05-30 15:59 yeqi7 阅读(154) 评论(0) 推荐(0)
摘要: 概念 是一个基于Chrome V8引擎的JavaScript运行环境,让JavaScript 运行在服务端的开发平台。Node. js是一个事件驱动、非阻塞式I/O的模型,轻量而又高效。浏览器是js的前端运行环境 node.js是js的后端运行环境。 优缺点 优点 处理高并发场景性能更佳 适合I/O 阅读全文
posted @ 2022-05-29 21:34 yeqi7 阅读(249) 评论(0) 推荐(0)
摘要: 如何对项目中的图片进行优化? 不用图片:很多时候会使用到很多修饰类图片,其实这类修饰图片完全可以用 CSS 去代替。 对于移动端来说,屏幕宽度就那么点,完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载,可以计算出适配屏幕的宽度,然后去请求相应裁剪好的图片。 小图使用 base64 格式 将 阅读全文
posted @ 2022-05-29 20:37 yeqi7 阅读(84) 评论(0) 推荐(0)
摘要: 回流与重绘的概念及触发条件 回流/重排 概念 当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时,浏览器会重新渲染部分或者全部文档的过程就称为回流。 触发条件 ● 页面的首次渲染 ● 浏览器的窗口大小发生变化 ● 元素的内容发生变化 ● 元素的尺寸或者位置发生变化 ● 元素的字体大小发生变化 阅读全文
posted @ 2022-05-29 20:30 yeqi7 阅读(35) 评论(0) 推荐(0)
摘要: 懒加载的概念 懒加载也叫做延迟加载、按需加载,指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。 在比较长的网页或应用中,如果图片很多,所有的图片都被加载出来,而用户只能看到可视窗口的那一部分图片数据,这样就浪费了性能。如果使用图片的懒加载就可以解决以上问 题。在滚动屏幕之前,可视化 阅读全文
posted @ 2022-05-29 17:35 yeqi7 阅读(76) 评论(0) 推荐(0)