2025前端面试-性能优化(HTML与CSS)---003

1.什么是SEO

  • 定义 :Serach Engine Optimization
  • 涉及到的使用: 门户网站或者功能网站(搜索引擎展示的先后顺序,推广 如搜索pdf转化器搜索之后,同质化显示出来的内容先后会决定网站的点击量)

2. SEO有哪些关键点

(从重要到次要依次回答)

1.SSR服务端渲染

2.TDK描述 (title description keywords 标题,描述,关键词)

3.语义化的HTML元素(Header,Nav,Aside,Ariticle,Footer),图片alt,h1,h2的合理使用,

4.编写合理的robots.txt文件

  • 是一个存放在网页根目录中的文本文件(告诉搜索引擎爬虫哪些部分的网页可以被抓取以及哪些不可以

  • 通过指示搜索引擎忽略掉不重要的文件或目录,可以让搜索引擎专注于重要内容的抓取和索引

  • 可以避免一些敏感私有信息不会被无意中索引

  • 如果没有这个文件,可能会降低网站的SEO效率,会让搜索引擎花费更多时间在不重要页面上

5.HTTPS (Google自2014年以来已将HTTPS作为其搜索排名的信号之一,另一个方面更安全

6.内部链接(同一个网站下不同页面)和外部链接(不同网站)

7.sitmap文件,网站导航,响应式处理,都在某种程度上提高网站的权限

8.SEO专员

3. defer和async属性在script标签中分别有什么作用

这两个属性都是用来控制外部脚本文件加载和执行方式的 可以帮助改善页面加载速度

两者之间机制不同,并且应用场景页不同

async通常用于独立的脚本,对于其他脚本甚至DOM没有依赖的脚本(因为这个async属性控制的脚本执行会涉及到影响DOM树的构建)

defert通常用于需要在文档解析之后操作DOM的JS代码,并且会对多个sript文件有顺序要求

现代框架中webpac或者vite会帮助配置 不需要手动配置

  • 浏览器 解析页面时,遇到script元素停止DOM树的构建,首先把js代码下载并执行,这个过程中会阻塞DOM树的渲染

  • 只有等到JS脚本执 行结束之后才会继续解析执行HTML构建DOM树

    • 为什么?
      1. JS本身可以操作DOM树 ,如果是等到DOM树构建完成并且渲染完成之后操作DOM会出现重绘回流,对于性能消耗会很大
    • 问题:
      1. 现代框架开发中 生成的脚本文件会很大
  • defer 属性告诉浏览器先继续解析HTML,构建DOM Tree 不要等待脚本下载

    • 脚本会由浏览器来进行下载,不会阻塞DOM Tree的构建过程
    • 当脚本提前下载好之后,会等待DOM Tree构建完成,在DOMContentLoaded事件之前先执行defer中的代码
    • (并且多个defer可以保证先后顺序 ,推荐放到head中去
  • Async 属性

    • 下载完成之后就马上执行脚本,不会等待是否已经构建好DOMTree (执行时会阻塞DOM Tree的构建)
    • 并且async脚本是独立的 不会等待其他的脚本执行

4.CSS3 引入的一些主要新特性

5.为什么在移动端使用@2x,@3x的图片(移动端适配

  1. 在移动端设备中,有非常多高分辨率的设备,为了适应不同的像素密度,UI通常会给开发者提供多个版本的图像资源
    1. @1@2 @3 (低中高分辨率)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/884249.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自监督强化学习:对比预测编码(CPC)算法深度解析

自监督强化学习:对比预测编码(CPC)算法深度解析 引言 在人工智能领域,强化学习(Reinforcement Learning, RL)与自监督学习(Self-Supervised Learning, SSL)的结合正在引领一场革命…

opencv学习笔记(6):图像预处理(直方图、图像去噪)

3.直方图 直方图是用来表现图像中亮度分布的,给出的是图像中某个亮度或者某个范围亮度下共有几个像素,即统计一幅图某个亮度像素的数量。 直方图不能反映某一灰度值像素在图像中的位置,失去了图像的空间信息。图像直方图由于其计算代价较小&a…

C# 中 发送HTTP请求 实现Ajax功能

Ajax技术的核心及其在jQuery中的使用,包括GET和POST请求的实现,以及Ajax轮询请求的工作原理。通过实例展示了如何使用jQuery.Ajax进行HTTP请求,与后端接口交互,以及处理JSON数据。同时还提到了跨域问题和轮询请求中停止条件的设定…

使用socket库创建简单的客户端和服务器

以下是使用Python的socket库创建简单的客户端和服务器的示例。这个示例将展示如何建立一个基本的TCP连接,服务器接收数据并发送响应,客户端发送数据并接收响应。 服务器端代码 首先,我们编写服务器端代码,它将监听来自客户端的连…

《双指针篇》---移动零

题目传送门 这道题可以归类为 数组划分/数组分块 。 题目制定了一个规则,我们可以在这个规则下,将数组划分为若干个区间。 这道题让我们把所有非零元素移动到左边。所有零元素移动到右边。 将数组划分为: 左区间非0; 右区间&…

写一个小日历

以下是一个示例&#xff0c;展示了如何创建一个基本的日历 日历 1. HTML 结构 首先&#xff0c;创建一个基本的 HTML 结构&#xff0c;用于展示日历。 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta na…

springboot项目中引入配置文件数据的方式

yml中引用变量 1. 直接在当前文件中定义然后使用格式 ${} 引用 2. 如果使用\t 转义不成功可以添加双引号 读取yml单个属性数据 使用Value注解获取单个属性值&#xff0c;格式${一级属性名.二级属性名} Value("${country}") private String country; Value(&…

OpenHarmony、HarmonyOS、HarmonyNext互相兼容吗?

1&#xff0c;三者之间的关系 OpenHarmony&#xff1a;开源底层。HarmonyOS&#xff1a;闭源手机系统&#xff0c;兼容安卓生态。HarmonyOS NEXT&#xff1a;纯血鸿蒙&#xff0c;不兼容安卓。 上一篇文章简单介绍过&#xff0c;就不再多说了&#xff0c;这里说一下HarmonyOS …

Camera学习笔记(202410)

课程&#xff1a;CameraX&#xff1a;面向开发者的摄像头支持库 链接&#xff1a;CameraX&#xff1a;面向开发者的摄像头支持库_哔哩哔哩_bilibili 课程时长&#xff1a;28:00 学习时间&#xff1a;2024-10-29 概述&#xff1a;2019年Android CameraX的发布会 个人感觉&a…

Android 同花顺面经

Android 同花顺面经 文章目录 Android 同花顺面经一面 一面 Android组件化搭建使用接口层路由有什么缺点&#xff1f; 如果更改接口的话&#xff0c;其他的依赖的moudle都得改 说说kotlin和java的区别&#xff1f; Java是支持面向对象的编程&#xff0c;Kotlin是支持面向对象支…

Flutter报错信息Unhandled Exception: Binding has not yet been initialized.

错误信息如下&#xff1a; Typically, this is done by calling "WidgetsFlutterBinding.ensureInitialized()" or "runApp()" (the latter calls the former). Typically this call is done in the "void main()" method. The "ensureIni…

Django入门教程——用户管理实现

第六章 用户管理实现 教学目的 复习数据的增删改查的实现。了解数据MD5加密算法以及实现模型表单中&#xff0c;自定义控件的使用中间件的原理和使用 需求分析 系统问题 员工档案涉及到员工的秘密&#xff0c;不能让任何人都可以看到&#xff0c;主要是人事部门进行数据的…

算法笔记()

文章目录 什么是算法算法的分类算法的意义 其他比较好的算法网站比较知名的算法博主 算法这个课题有点太大了&#xff0c;穷尽一生也难以望其涯岸那是肯定的&#xff0c;甚至几代人无数精英也做不到完全掌握&#xff0c;我们普通人就更不要想了&#xff0c;能理解多少算多少吧。…

BugKu练习记录:矛盾

题目&#xff1a; $num$_GET[num]; if(!is_numeric($num)) { echo $num; if($num1) echo flag{**********}; }关键在于绕过is_numeric&#xff0c;PHP中字符串与数字弱比较&#xff0c;会将字符串转换为数字&#xff0c;截至到非数字字符&#xff0c;如果第一个字符就是非数字…

【Nas】X-DOC:在Mac OS X 中使用 WOL 命令唤醒局域网内 PVE 主机

【Nas】X-DOC&#xff1a;在Mac OS X 中使用 WOL 命令唤醒局域网内 PVE 主机 1、Mac OS X 端2、PVE 端&#xff08;Debian Linux&#xff09; 1、Mac OS X 端 &#xff08;1&#xff09;安装 wakeonlan 工具 brew install wakeonlan&#xff08;2&#xff09;唤醒 PVE 命令 …

8.3.2 前向分步算法与 AdaBoost

由前向分步算法可以推导出 AdaBoost&#xff0c;用定理叙述这一关系。   定理 8.3  AdaBoost 算法是前向分步加法算法的特例。 这时&#xff0c;模型是由基本分类器组成的加法模型&#xff0c;损失函数是指数函数。   证明 前向分步算法学习的正加法模型&#xff0c;当基…

batc和mini-batch

一、概念介绍 batch 批处理&#xff0c;在机器学习中&#xff0c;batch 是指一次处理整个训练数据集的方式。例如&#xff0c;如果有 1000 个训练样本&#xff0c;使用 batch 训练时&#xff0c;模型会同时使用这 1000 个样本进行一次参数更新。也就是说&#xff0c;计算损失…

Java学习教程,从入门到精通,Java for循环知识点(15)

1、Java for循环 在Java中&#xff0c;for循环是一种基本的循环控制结构&#xff0c;它允许你重复执行一段代码固定次数。for循环的语法如下&#xff1a; for (初始化表达式; 循环条件; 迭代表达式) {// 循环体&#xff1a;要重复执行的代码块 }这里是每个部分的详细解释&…

安宝特分享 | AR技术引领:跨国工业远程协作创新模式

在当今高度互联的工业环境中&#xff0c;跨国合作与沟通变得日益重要。然而&#xff0c;语言障碍常常成为高效协作的绊脚石。安宝特AR眼镜凭借其强大的多语言自动翻译和播报功能&#xff0c;正在改变这一局面&#xff0c;让远程协作变得更加顺畅。 01 多语言翻译优势 安宝特A…

生物信息与机器学习6 - 有监督学习算法和无监督学习算法

1.有监督学习算法 有监督学习算法推荐&#xff1a; 决策树分类器 - 适合处理分类问题&#xff0c;容易理解和可视化&#xff1b; KNN分类器 - 对于简单的单特征分类也很有效&#xff1b; 逻辑回归 (多分类) - 使用one-vs-all策略处理多类别。 有监督学习的选择&#xff1a; 如…