前端面试题 - 基础（HTML、HTTP、WEB）

1、前端 SEO 需要注意哪些

SEO 优化指的是搜索引擎优化，利用搜索规律可以提升你的网站在搜索引擎中的排名；
1、站内优化

1、meta 标签中的 name、description、keywords：这三个权重依次减小（title：强调重点，重要的关键词不要超过2个且尽量靠前；description：把页面内容高度概括，长度合适；keywords：列举出重要关键词即可）；
2、语义化 HTML 代码、符合 W3C 规范：可以让搜索引擎更容易理解页面；
3、重要 HTML 内容放前面：搜索引擎是从上到下抓取 HTML，有的引擎抓取长度有限，保证重要内容都被抓取到；
4、重要内容不要使用 js 输出：爬虫不会执行 js 里面的内容；
5、少用 iframe ：搜索引擎不会抓取 iframe 里面的内容；
6、非装饰图片必须加 alt；
7、提升网站速度：网站速度也是搜索引擎排序的重要指标；

2、站外优化
与一些和你网站相关性比较高，整体质量比较好的网站交换链接，巩固稳定关键词排名；

2、img 标签上的 title 和 alt 区别

title：鼠标移入元素的时候显示；
alt：是 img 的特有属性，是图片内容的等价描述；一般用于图片无法正常加载时显示的文字；可以提高图片的访问下，有利于 SEO 优化；

3、浏览器输入 url 到显示过程

• 向浏览器输入地址；
• 检查浏览器缓存，如果缓存中有并且缓存没过期，会直接从缓存中取资源；如果是缓存过期或者没有缓存则会发送请求；
• URL解析（判断是否合法，解析出协议、域名、端口、资源路径、参数等）；
• 浏览器根据DNS服务器解析得到域名下的IP地址；
• 建立tcp连接(三次握手)；
• 向这个IP地址对应的服务器发送HTTP请求；
• 服务器接收到，处理并返回HTTP请求（包括查看缓存是否可用，可以返回304，直接使用缓存资源）；
• 浏览器接收服务器返回内容并渲染；
• 关闭tcp连接(四次挥手)；
• 如果资源可以缓存则直接缓存；

三次握手：

1、客户端会向服务端发送一个SYN包；
2、服务端得到SYN包后会返回SYN加ACK包；
3、客户端收到SYN加ACK包后向服务端返回一个ACK包；通讯建立。

四次挥手：

1、客户端将发送一份FIN文件给服务端,表示自己将要进行断开连接并进入断开等待状态；
2、服务端接收到FIN文件后将发送一份ACK文件给客户端表示收到并进入最后的数据传输；
3、当数据传输完成服务端将FIN文件返回给客户端表示最后数据传输完成；
4、客户端收到后将ACK文件返回给服务端表示收到，客户端进入超时等待，服务端关闭连接，时间超过，客户端关闭连接.。

4、浏览器渲染过程

• HTML和CSS 解析：解析HTML生成DOM树，同时异步解析CSS生成CSSOM树（两者互不影响）；
• 生成 render 树：将DOM和CSSOM树结合，筛选出可见节点匹配其CSSOM树中的CSS规则，生成 render 树；
• 布局：遍历 render 树，得到节点的几何信息（盒子模型）进行布局，也叫回流 ；
• 绘制：将我们的 render 树转化为像素，并对所有的媒体文件进行解码；

注意

• 渲染过程（HTML、CSS）中遇到 js 会先暂停，等 js执行完毕才会恢复构建 ；
• 由于 js 可以改变HTML 和 CSS ,所以需要在 HTML 和 CSS 构建完毕之后加载 js；
• 如果CSS还没有构建完，js 想修改它，浏览器会延迟脚本执行和DOM 构建，直到完成 CSSOM的下载和构建在执行 js ；
• script标签加 async ：异步加载js ，加载完就执行； defer：异步加载 js，等文本渲染结束后执行；

5、常见请求方式

get：取服务器上的资源
post：想服务器提交资源
put：编辑服务器资源
detele：删除服务器资源
options：获取当前 URL 所支持的方法

get 和 post 的区别

1、传参方式：get 通过 url 传参；post 通过请求体；
2、安全性：post 更安全；get 请求参数暴露在 url 上，而且提交的数据还可能会造成XSS攻击；
3、缓存：get 请求静态资源时会有缓存，请求数据不会缓存；post没有缓存；
4、数据量：post 请求能发送的数据量大；get 由于 url 长度限制发送数据量很小；
5、语义差别：post 是想服务器提交数据的请求；get 是从服务器获取数据的请求；
6、数据类型：url 的编码格式采用的是ASCII编码，所以 get 只能发送ASCII字符；post 则没有限制；

6、常见的状态码

200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）

7、网站性能优化

内容方面：减少http请求、减少DNS查询、减少DOM元素
服务方面：http缓存、CDN缓存、组件使用 gzip压缩
css方面：样式放在顶部、使用link引入、不使用css表达式、压缩
cookie方面：减小cookie大小
js方面：放在底部、压缩、减少dom操作、删除不需要的脚本
img方面：图片压缩、精灵图

常规优化方案：
1、减少 http 请求次数：合并 css 、js、图片（精灵图）、图标base64
2、合理设置 http 缓存：Expires 与 Cache-control
3、模块延迟(defer)加载/异步(async)加载
4、css 放在最顶部，js 放在最底部；保证样式是对的，防止 js 阻塞也能加载；
5、静态资源压缩：css、js、图片；
6、预加载：某个功能还没有显示时，在空余时间加载其资源；
7、使用离线缓存：把常用的变动少的 js 、css、图片缓存在本地，下次访问直接本地获取；常用在移动端；
8、使用 CDN 加速（访问最近服务器）；
9、cookie 隔离（节省请求流量）、减少 cookie 大小；
10、静态资源多域名：图片、CSS、JS，可使用几个域名，可以并发加载；
11、减少 iframe 使用；
12、剔除无用或者重复脚本；
13、减少对 dom 的操作：用innerHTML代替DOM操作；
14、不要在页面中缩放图片；
15、避免使用 css 表达式、避免使用滤镜（filter）

8、语义化理解

语义化：个人理解是见名知意；目的是让大家能够很直观的认识到标签、属性的用途和作用；

好处：便于阅读和维护；有利于 SEO 优化，让搜索引擎更容易理解页面；

9、浏览器内核理解

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

渲染引擎：获取网页内容（HTML、XML、图像等）、整理讯息（css）、计算网页的显示方式，然后输出到显示器；浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同；

js引擎：解析和执行javascript来实现网页的动态效果；

常见的浏览器内核：
IE：Trident
Chrome、Opera：以前是 Webkit，现在是 Blink
火狐：Gecko
Safari：Webkit
360、猎豹：IE+Chrome双内核
搜狗、遨游、QQ浏览器：Trident（兼容模式）+Webkit（高速模式）
百度、世界之窗：IE内核
2345浏览器：以前是IE内核，现在也是IE+Chrome双内核

10、H5的新特性

拖拽释放：drag、drop
媒体播放：video、audio
本地存储：localStorage 和 sessionStorage
离线应用：manifest
桌面通知：Notifications
语义化标签：article、footer、header、nav、section
地理位置：Geolocation
多任务：webworker
全双工通信协议： websocket
跨域资源共享(CORS)： Access-Control-Allow-Origin
绘画：canvas
跨窗口通信：PostMessage
新增选择器：document.querySelector、document.querySelectorAll
增强表单控件：calendar、date、time、email、url、search

11、离线存储使用，工作原理

用户没有联网时能够正常访问网站、联网之后用户机器上的缓存文件；可以通过 navigotar.online 判断当前是否是在线状态，通过 window.addEventListener(‘online/offline’) 来监听是否在线；

原理：离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的清单来离线存储资源，这些资源就会像cookie一样被存储下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示；

使用：
1、在 HTML 标签上添加 manifest 属性 为 cache.manifest
2、新建 cache.manifest文件，编写离线存储的资源
CACHE：下面是需要离线缓存的资源；
NETWORK ：下面列出来的资源只有在在线的情况下才能访问，不会离线缓存；
FALLBACK：在此标题下列出的文件规定当页面无法访问时候的回退页面比如(404页面)；
3、在离线状态时，操作 window.applicationCache 进行需求实现

12、浏览器是如何管理和加载离线资源

1、在线的情况下：浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

2、离线的情况下：浏览器就直接使用离线存储的资源。

13、缓存

1、HTTP缓存
主要是在 HTTP 请求传输时用到的缓存，主要在服务器代码上设置；分为：强缓存、协商缓存

强缓存：直接从浏览器缓存过的本地进行读取，不会去请求服务器；

• pragma：http1.0 使用，值为 no-chahe 时禁止缓存；
• Cache-control：缓存控制字段，可以说是控制http缓存的最高指令；
  max-age：这个用于设置一个滑动时间，例如设置 max-age=30 表示客户端时间向后滑动30秒，在这30秒内都是强缓存，不会去请求服务器
  s-maxage：这个和上面的一样，只不过这个设置的是代理服务器的缓存时间
  privte：这个表示缓存只能被客户端的浏览器缓存，不能被代理服务器缓存
  public：这个表示缓存既可以被浏览器缓存，也可以被代理服务器缓存
  no-store：这个属性表示不缓存，在任何情况下，都是与服务器进行最新的交互
  no-cache：这个并非不缓存的意思，这个表示强制进行协商缓存，会在下面描述
• Expires：服务器提供，代表资源过期时间；本地时间与这个时间对比，超时了则重新从服务器获取资源，否则在本地读取；

协商缓存：与服务器协商当前浏览器的缓存是否已经过期了，如果没过期，那么就使用本地的资源，如果过期了就去请求最新资源；协商缓存主要是解决强缓存资源不能及时更新的问题

• last-modified 配合 If-Modified-Since：服务器提供，浏览器访问是带上这个时间，对比时间，不一致则服务器返回；
• Etag 配合 If-None-Match：服务器提供 Etag 浏览器带上这个指纹标识给服务器，判断两个是否一致，不一致则重新请求；

2、浏览器缓存

• cookie：4k，请求时主动发送给服务器；信息存储于用户硬盘，可以跨域；安全性不高；可被禁用和删除；
• localStorage：5M，永久存储；无法被网络爬虫捕捉；
• sessionStorage：5M，页面标签关闭时清除；无法被网络爬虫捕捉；
• indexDB：50M；
• PWA：渐进式网络应用，主要目标是实现web网站的APP式功能和展示；
• 往返缓存：浏览器在前进、后退按钮上为了提升历史页面的渲染速度的一种策略；

14、iframe 优缺点

1、优点：

能够原封不动的把嵌入的网页展现出来
可实现复用：多个页面都需要使用时只需要修改 iframe 的内容

2、缺点：

1、会阻塞主页面的 onload 事件
2、搜索引擎无法读取页面，不利于SEO 优化
3、会增加服务器的http请求，对于大型网站不可取
4、iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
5、兼容性差

如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值；

15、WEB标准和 W3C标准是什么

标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离

16、XHTML、HTML5和HTML区别

XHTML 和 HTML
1、语法不同
html：不区分大小写，属性值可不加引号，有空标签，语法比较松散，对于开发者来说比较方便。
xhtml：区分大小写，属性值必须加引号，标签必须闭合，语法严格，可以被所有浏览器支持。
2、扩展名不同
html：扩展名包含 .html .htm
xhtml：文件扩展名包含 .xhtml .xht .xml .html .htm
3、语言不同
html：是超文本标记语言。
xhtml：是可扩展超文本标记语言。
4、混合不同
html：不能混合其他xml应用。
xhtml：可以混合各种xml应用。

HTML5

1、文档类型简写
2、字符编码简写
3、标签不在区分大小写
4、允许属性值不加引号
5、允许部分属性值的属性值省略

HTML指的是HTML4.01，XHTML是HTML的过渡版，HTML5是HTML的升级版；

17、Doctype作用? 严格模式与混杂模式如何区分？

Doctype 在文档的最前面，告知浏览器的解析器， 用什么文档类型规范来解析这个文档；

严格模式：排版和 JS 运作模式是 以该浏览器支持的最高标准运行；
混杂模式：页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作；DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现；

18、页面渲染优化

1、不使用 iframe ，iframe 可以阻断页面的 onload ，不利于 SEO；
2、禁止使用 gif 图片实现 loading 效果（降低 CPU 消耗，提升渲染性能）
3、使用CSS3代码代替JS动画（尽可能避免重绘重排以及回流）
4、对于一些小图标，可以使用base64位编码，以减少网络请求。但不建议大图使用，比较耗费CPU；
5、页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程)；
6、js 放到页面最下面，css 放在页面最顶部；
7、网页gzip，CDN托管，data缓存 ，图片服务器；
8、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能；

19、图片优化

1、图片懒加载
2、图片预加载：将当前展示图片的前一张和后一张优先下载
3、一些小图使用 精灵图、iconfont、base64
4、图片过大，先加载一张缩小版的图片，提高用户体验
5、不要在页面上放大压缩图片

20、web开发中会话跟踪的方法有哪些

因为 HTTP 请求是无状态的；只有当用户发出请求时，服务器才会做出响应，客户端与服务端之间的联系是离散的、非连续的；如果用户想在同一个网站的多个页面之间转换时，无法确定是否是同一个用户；对会话进行跟踪就是为了解决这样的问题。

token
cookie
session
url 重写
隐藏表单
ip地址

21、Cookie的弊端

1、每个特定的域名下最多生成20个cookie
IE6或更低版本最多20个cookie
IE7和之后的版本最后可以有50个cookie
Firefox最多50个cookie
chrome和Safari没有做硬性限制
2、IE 和 Opera 会清理近期最少使用的 cookie，Firefox 会随机清理 cookie
3、cookie 的最大大约为 4096 字节，为了兼容性，一般设置不超过 4095 字节
4、如果 cookie 被人拦截了，就可以取得所有的 session 信息

22、