2020-12-14

web前端基础面试题（一）

一、HTML、HTTP、web综合问题
1.前端需要注意哪些SEO（搜索引擎优化）

1. 合理的 title 、description、keywords:搜索对这三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可。
2. 语义化的html代码，符合W3C规范：语义化代码让搜索引擎容易理解网页。
3. 重要内容html代码放在前面：搜索引擎抓取html顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取。
4. 重要内容不要用js输出：爬虫不会执行js获取内容。
5. 少用iframe:搜索引擎不会抓取iframe中的内容，
6. 非装饰性图片必须加alt.
7. 提高网站速度：网站速度是搜索引擎排序的一个重要指标。

2.<img>的title和alt有什么区别

1. 通常当鼠标滑动到元素上的时候显示
2. alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提高图片可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

3.HTTP的几种请求方法用途

1. GET方法
   发送一个请求来取得服务器上的某一资源

2. POST方法
   向url指定的资源提交数据或复加薪的数据

3. PUT方法
   跟post方法很像，也是向服务器提交数据，但是，他们之间有不同。PUT指定了资源在服务器上的位置，而post没有

4. HEAD方法
   只请求页面的首部

5. DELETE方法
   删除服务器上的某资源

6. OPTIONS方法
   他用于获取当前url所支持的方法。如果请求成功，会有一个Allow的头包含类似“get,post”这样的信息

7. TRACE方法
   trace方法会被用于激发一个远程的，应用层的请求消息回路

8. CONNECT方法
   把请求连接转换到透明的TCP/IP通道

4.从浏览器地址栏输入url到显示页面的步骤
基础版本

• 浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ，向服务器发起请求；
• 服务器交给后台处理完成后返回数据，浏览器接收⽂件（ HTML、JS、CSS 、图象等）；
• 浏览器对加载到的资源（ HTML、JS、CSS 等）进⾏语法解析，建⽴相应的内部数据结构（如 HTML 的 DOM ）；
• 载⼊解析到的资源⽂件，渲染⻚⾯，完成。

5 如何进⾏⽹站性能优化

• content ⽅⾯

   减少 HTTP 请求：合并⽂件、 CSS 精灵、 inline Image
   减少 DNS 查询： DNS 缓存、将资源分布到恰当数量的主机名
   减少 DOM 元素数量
  

• Server ⽅⾯

   使⽤ CDN
   配置 ETag
   对组件使⽤ Gzip 压缩
  

• Cookie ⽅⾯

   减⼩ cookie ⼤⼩
  

• css ⽅⾯

   将样式表放到⻚⾯顶部
   不使⽤ CSS 表达式
   使⽤ `<link>` 不使⽤ @import
  

• Javascript ⽅⾯

   将脚本放到⻚⾯底部
   将 javascript 和 css 从外部引⼊
   压缩 javascript 和 css
   删除不需要的脚本
   2019/9/5 第⼀部分：基础篇 | FE-Interview
   blog.poetries.top/FE-Interview-Questions/base/#_3-内存泄漏 6/115
   减少 DOM 访问
  

• 图⽚⽅⾯

   优化图⽚：根据实际颜⾊需要选择⾊深、压缩
   优化 css 精灵
   不要在 HTML 中拉伸图⽚