什么群里面的前端宝典

什么群里面的前端宝典
  1. 前端需要注意哪些SEO
  • 合理的 title 、 description 、 keywords :搜索对着三项的权重逐个减小， title 值强调重点即可， 重要关键词出现不要超过2次， 而且要靠前，不同⻚面 title 要有所不同; description 把⻚面内容高度概括， 不可过分堆砌关键词，不同⻚面 description 有所不同; keywords 列举出重要关键词即可
  • 语义化的 HTML 代码

语义化HTML示例:

  • 使用<header>、<footer>标识页面的头部和尾部
  • 使用<nav>标识导航链接部分
  • 使用<section>和<article>标识内容的组织结构
  • 使用<aside>标识侧边栏
  • 使用<figure>和<figcaption>标识图片和图片说明
  • 使用<em>标识强调内容
  • 使用<strong>标识重要内容

相反,非语义化代码如:<div>和<span>过多地用于布局,缺乏语义。

  • 重要内容 HTML 代码放在最前: 搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取⻓度有限制
  • 重要内容不要用 js 输出:爬虫不会执行js获取内容
  • 少用 iframe :搜索引擎不会抓取 iframe 中的内容
  • 非装饰性图片加 alt
  • 提高网站速度: 网站速度是搜索引擎排序的一个重要指标
  1. <img>标签的title和alt属性都用于为图片添加额外文本信息,但有以下区别:

  • title文本会作为悬停提示出现,当鼠标悬停在图片上时会显示title的内容。

  • alt文本不会直接显示,但会在图片无法加载时代替图片显示。

  • title主要用于鼠标悬停时给用户提示或说明。

  • alt主要用于在图片加载失败时给搜索引擎读取,以知道图片内容,提高网站SEO。

  • title是可选的,不一定要添加。

  • alt是必需的,每个img都必须设置有意义的alt,利于搜索引擎爬虫理解图片内容。

  • title可以写较长的文本来详细描述图片。

  • alt应该简明扼要,通常不超过一两句话。

  1. PUT POST PUT和POST主要区别有:

功能上:

  • PUT用来更新资源,比如更新/替换目标资源的内容。
  • POST用来创建资源,比如向服务器提交要处理的数据。

幂等性:

  • PUT方法是幂等的,多次请求同一个资源应该与单次请求效果相同。
  • POST方法不是幂等的,多次执行会重复提交数据,可能会产生副作用。

安全性:

  • PUT方法是不安全的,因为会直接覆盖资源。
  • POST方法相对更安全,一般不会导致资源的直接覆盖。

可缓存:

  • PUT方法的结果可以被缓存,对同一个资源多次PUT会返回同样内容。
  • POST方法不能被缓存,每次POST会重新提交新的数据。

包含请求体:

  • PUT请求通常包含请求体,用于发送更新后的资源内容。
  • POST请求也常包含请求体,用来发送需要处理的数据。
  1. OPTIONS、TRACE 和 CONNECT
  • OPTIONS:

OPTIONS 方法用于获取目的资源所支持的通信选项。发送 OPTIONS 请求后,服务器会返回一个对该资源支持的所有 HTTP 方法的响应。

例如,可以先发送 OPTIONS 请求判断目标 URL 是否存在,服务器支持哪些方法,从而决定使用 GET 还是 POST 请求。

  • TRACE:

TRACE 方法会让 Web 服务器将收到的请求回送给客户端,主要用于测试或诊断。

它可以让客户端查看自己的请求都经过了哪些中介服务器,确认请求是否如愿发送。

  • CONNECT 方法:

CONNECT 方法是 HTTP/1.1 协议预留的,默认不开启。它允许客户端与服务器建立隧道,用于 SSL 加密通信。

CONNECT 请求一般用于代理服务器,请求它在客户端和目标服务器间建立隧道,实现数据转发。这样可以加密客户端和服务器之间的通信。

  1. 网站域名解析到多个服务器IP的负载均衡情况

对于这种情况,负载均衡确实是可以由DNS服务商提供的。工作原理如下:

  1. 网站运营方(客户)向DNS服务商注册域名,并提供自己的多个服务器IP。
  2. DNS服务商在自己的权威DNS服务器上,将网站域名配置多个A记录,分别指向网站提供的不同IP。
  3. 当用户递归查询网站域名时,权威DNS服务器会按照ROUND ROBIN(轮询)方式,每个查询返回一个不同的IP。
  4. 这样就实现了域名到网站多个服务器IP的负载均衡效果。
  5. 也可以通过DNS服务商提供的DNS面板,调整不同IP的权重比例,实现加权轮询效果。

所以对于多服务器架构的网站,通过DNS服务商提供的权威DNS解析,可以实现域名级别的负载均衡。这种均衡由DNS服务商控制,对网站运营方透明。

  1. CSSOM CSSOM(CSS Object Model)树描述了浏览器将CSS转换成的内部表示形式。

当浏览器加载CSS样式表时,会根据CSS语法构建一棵CSSOM树,表示样式数据的结构化信息。

  • 每个CSS规则会成为一个CSSStyleRule对象,包含选择器和声明块。
  • CSS选择器位于CSSStyleRule的selectorText属性中。
  • 声明块包含多个CSS样式声明,每个声明为一个CSSStyleDeclaration对象,有CSS样式属性名和值。
  • CSSOM树结构遵循CSS语法嵌套规则,子规则位于父规则下层。
body {
  background-color: white;
}
 
p {
  color: gray;
  width: 80%;
}

对应的CSSOM树结构为:

- body CSSStyleRule
  - background-color: white
- p CSSStyleRule
  - color: gray
  - width: 80%

CSSOM树创建后,会关联到DOM树对应的节点,计算样式并应用到页面呈现上。

简言之,CSSOM树表达CSS规则的结构化信息,是浏览器渲染引擎的一部分,用于从CSS代码计算元素最终样式。

  1. 关于js的解析
  • 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此 时document.readystate为loading
  • HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内 或外部脚本 。这些脚本会同步执行， 并且在脚本下载和执行时解析器会暂停 。这样就可 以用document.write()把文本插入到输入流中 。同步脚本经常简单定义函数和注册事件 处理程序，他们可以遍历和操作script和他们之前的文档内容
  • 当解析器遇到设置了async属性的script时， 开始下载脚本并继续解析文档 。脚本会在它 下载完成后尽快执行，但是解析器不会停下来等它下载 。异步脚本禁止使用 document.write()， 它们可以访问自己script和之前的文档元素
  • 当文档完成解析，document.readState变成interactive 5.所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树， 禁止使用 document.write()
  • 浏览器在Document对象上触发DOMContentLoaded事件
  • 此时文档完全解析完成， 浏览器可能还在等待如图片等内容加载， 等这些内容完成载入 并且所有异步脚本完成载入和执行，document.readState变为complete，window触发 load事件
  1. CSS Sprite CSS 精灵(CSS Sprites)是一种 CSS 技巧,它将多个小图像合并成一个大图像,然后利用 CSS 的背景定位来显示需要的小图片部分。这样可以减少下载的 HTTP 请求数,提高页面加载速度。

具体实现方式:

  • 将多个小图标图片合并到一张大图片中,位置需要按照使用时的背景定位进行合理规划。
  • 在 CSS 中,将这个大图标图片作为通用背景图片加载。
  • 对不同的元素,设置该大图片作为背景图片,然后通过 background-position 指定位置,只显示对应小图片部分。
  • 这样元素在使用这个大图片时,看起来仍然是在加载各自的小图片,但实际上都是从同一张大图标中只加载一次。

优点:

  • 减少 HTTP 请求数,提高页面性能。
  • 将多张小图片整合到一张图片直观管理维护。

缺点:

  • 图片合并需要使用图像编辑软件,增加工作量。
  • 如果一个图片位置变化,整张大图片需要重新制作发布。

  1. 减少DNS查询,提高网页性能:

  2. DNS缓存 DNS解析是需要时间的。所以可以启用DNS的缓存机制,将已解析的域名IP对应关系缓存一段时间,在缓存期内直接返回缓存结果,避免重复解析域名。

常用的DNS缓存包括本地系统缓存、浏览器缓存、ISP缓存等。合理利用DNS缓存可以减少DNS查询次数。

  1. 将资源分布到恰当数量的主机名 每个新主机名都需要额外的DNS查询。如果页面资源都集中在一个域名下,可以最小化主机名数量,这样就可以减少DNS查询次数。

但有时需要使用多个域名主机,比如分布式部署,这时可以根据实际需要采用合适数量的主机名,不要过多地引入不必要的DNS查询。

  1. ETag

ETag(Entity Tag)是HTTP协议中的一个响应头,它是资源的唯一标识符,可以用来判断缓存资源是否改变。

工作方式是:

  • 服务器在响应中添加一个ETag头,包含一个运算出的HASH值。
  • 当客户端要求重新验证缓存资源时,会提供缓存的ETag值。
  • 服务器对比新旧ETag,如果一致,返回304未修改。如果不一致,返回完整资源。

这样可以减少重复下载未修改的资源,节约宽带资源。

  1. CDN

CDN(Content Delivery Network)即内容分发网络,是构建在网络之上的内容分发网络。

CDN通过在全球部署节点服务器,使得用户就近取得所需内容,极大地提高访问速度。

常见的CDN服务包括:

  • 缓存静态资源,加速资源访问。
  • 分散应用服务器流量,防止单点故障。
  • DDoS攻击保护。
  • 动态资源加速。
  1. css 性能优化
  • 把CSS样式表放在页面头部,可以让页面内容加载时立即开始渲染,优化网页速度感知。如果放 Body 底部,内容会无样式地先加载再闪烁渲染。
  • CSS表达式会运行多次造成性能负担。建议改为优先使用CSS3新特性或者JS直接操作样式。
  • 使用<link>不使用@import。link是并行下载,import需等待标签解析后串行下载,会延迟样式加载。建议改用link方式引入CSS。
  • 不使用通用选择器。选择器从右到左匹配,简单选择器匹配更快。避免通用选择器*和复杂选择器,采用类选择器、后代选择器提高效率。
  1. 浏览器内核

主要分成两部分: 渲染引擎( layout engineer 或 Rendering Engine )和 JS 引擎

  • 渲染引擎: 负责取得网页的内容 ( HTML 、 XML 、图像等等) 、整理讯息 (例如加入CSS 等)， 以及计算网页的显示方式，然后会输出至显示器或打印机 。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核
  • JS引擎: 解析和执行 javascript 来实现网页的动态效果

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

  1. HTML5新特性 HTML5 现在已经不是 SGML 的子集， 主要是关于图像，位置，存储， 多任务等功能的增加
  • 绘画 canvas
  • 用于媒介回放的 video 和 audio 元素
  • 本地离线存储 localStorage 长期存储数据， 浏览器关闭后数据不丢失 sessionStorage 的数据在浏览器关闭后自动删除
  • 语意化更好的内容元素， 比如 article 、 footer 、 header 、 nav 、 section 表单控件， calendar 、 date 、 time 、 email 、 url 、 search
  • 新的技术 webworker 、 websocket 、 Geolocation
  1. HTML5 离线储存 HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)， 通过这个文件上的解析清单离线存储资源， 这些资源就会像 cookie 一样被存储了下 来。之后当网络在处于离线状态下时， 浏览器会通过被离线存储的数据进行页面展示
  • 页面头部像下面一样加入一个 manifest 的属性;
  • 在 cache.manifest 文件的编写离线存储的资源
  • 在离线状态时， 操作 window.applicationCache 进行需求实现
see all posts

Success!

Your comments has sent successfully(or not), reload this page to see it