- 前端需要注意哪些SEO
- HTTP的几种请求方法用途
- 从浏览器地址栏输入url到显示页面的步骤
- 如何进行网站性能优化
- HTTP状态码及其含义
- TCP和UDP的区别
- 介绍一下你对浏览器内核的理解?
- 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
- WEB标准以及W3C标准是什么?
- 网页验证码是干嘛的,是为了解决什么安全问题
- 渲染优化
- 你能描述一下渐进增强和优雅降级之间的不同吗
- 为什么利用多个域名来存储网站资源会更有效
- 知道的网页制作会用到的图片格式有哪些?
- 在css/js代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次js请求一般情况下有哪些地方会有缓存处理?
- 一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验。
- web开发中会话跟踪的方法有哪些
- HTTP request报文结构是怎样的
- HTTP response报文结构是怎样的
- 请你谈谈Cookie的弊端
- http2.0 做了哪些改进 3.0 呢
- fetch 发送 2 次请求的原因
- 如何实现 token 加密
- http与https区别
- WebSocket的实现和应用
- CORS跨域
- git fetch和git pull的区别
- 常见排序算法的时间复杂度,空间复杂度
前端需要注意哪些SEO
SEO,意思是 搜索引擎优化。目的是让搜索引擎的爬虫更容易收集到你网站的内容,并把它们编写进自己的索引库中。
- 合理的
title
、description
、keywords
:搜索引擎对着这项的权重逐个减小,title
值强调重点即可,重要关键词出现不要超过2
次,而且要靠前,不同页面title
要有所不同;description
把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面description
有所不同;keywords
列举出重要关键词即可 - 语义化的
HTML
代码,符合W3C规范:语义化代码让搜索引擎容易理解网页 - 重要内容
HTML
代码放在最前:搜索引擎抓取HTML
顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容一定会被抓取 - 重要内容不要用
js
输出:爬虫不会执行js获取内容 - 少用
iframe
:搜索引擎不会抓取iframe
中的内容 - 非装饰性图片必须加
alt
- 提高网站速度:网站速度是搜索引擎排序的一个重要指标
HTTP的几种请求方法用途
git 和 post 请求的区别
GET
方法:发送一个请求来取得服务器上的某一资源
POST
方法:向URL指定的资源提交数据或附加新的数据
PUT
方法:跟POST方法很像,也是想服务器提交数据。但是,它们之间有不同。PUT指定了资源在服务器上的位置,而POST没有
HEAD
方法:只请求页面的首部
DELETE
方法:删除服务器上的某资源
OPTIONS
方法:它用于获取当前URL所支持的方法。如果请求成功,会有一个Allow的头包含类似“GET,POST”这样的信息
TRACE
方法:TRACE方法被用于激发一个远程的,应用层的请求消息回路
CONNECT
方法:把请求连接转换到透明的TCP/IP通道
从浏览器地址栏输入url到显示页面的步骤
基础版本
- 浏览器根据请求的
URL
交给DNS
域名解析,找到真实IP
,向服务器发起请求; - 服务器交给后台处理完成后返回数据,浏览器接收文件(
HTML
、JS
、CSS
、图象等); - 浏览器对加载到的资源(
HTML
、JS
、CSS
等)进行语法解析,建立相应的内部数据结构(如HTML
的DOM
); - 载入解析到的资源文件,渲染页面,完成。
详细版
- 在浏览器地址栏输入URL
- 浏览器查看
缓存
,如果请求资源在缓存中并且新鲜,跳转到转码步骤
- 如果资源未缓存,发起新请求
- 如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证。
- 检验新鲜通常有两个HTTP头进行控制
Expires
和Cache-Control
:- HTTP1.0提供Expires,值为一个绝对时间表示缓存新鲜日期
- HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
- 浏览器
解析URL
获取协议,主机,端口,path - 浏览器
组装一个HTTP(GET)请求报文
- 浏览器
获取主机ip地址
,过程如下:- 浏览器缓存
- 本机缓存
- hosts文件
- 路由器缓存
- ISP
DNS
缓存 - DNS递归查询(可能存在负载均衡导致每次IP不一样)
- 打开一个socket与目标IP地址,端口
建立TCP链接
,三次握手
如下:- 客户端发送一个TCP的SYN=1,Seq=X的包到服务器端口
- 服务器发回SYN=1, ACK=X+1, Seq=Y的响应包
- 客户端发送ACK=Y+1, Seq=Z
- TCP链接建立后
发送HTTP请求
- 服务器接受请求并解析,将请求转发到服务程序,如虚拟主机使用HTTP Host头部判断请求的服务程序
- 服务器检查
HTTP请求头是否包含缓存验证信息
,如果验证缓存新鲜,返回304
等对应状态码 - 处理程序读取完整请求并准备HTTP响应,可能需要查询数据库等操作
- 服务器将
响应报文
通过TCP连接发送回浏览器
- 浏览器接收HTTP响应,然后根据情况选择
关闭TCP连接
或者保留重用
,关闭TCP连接的四次握手
如下:- 主动方发送Fin=1, Ack=Z, Seq= X报文
- 被动方发送ACK=X+1, Seq=Z报文
- 被动方发送Fin=1, ACK=X, Seq=Y报文
- 主动方发送ACK=Y, Seq=X报文
- 浏览器检查响应状态吗:是否为1XX,3XX, 4XX, 5XX,这些情况处理与2XX不同
- 如果资源可缓存,
进行缓存
- 对响应进行
解码
(例如gzip压缩) - 根据资源类型决定如何处理(假设资源为HTML文档)
- 解析HTML文档,构件
DOM树
,下载资源,构造CSSOM树
,执行js脚本
,这些操作没有严格的先后顺序,以下分别解释 - 构建DOM树:
- Tokenizing:根据HTML规范将字符流解析为标记
- Lexing:词法分析将标记转换为对象并定义属性和规则
- DOM construction:根据HTML标记关系将对象组成DOM树
- 解析过程中遇到图片、样式表、js文件,
启动下载
- 构建CSSOM树:
- Tokenizing:字符流转换为标记流
- Node:根据标记创建节点
- CSSOM:节点创建CSSOM树
- 根据
DOM树和CSSOM树构建渲染树
(链接):- 从DOM树的根节点遍历所有
可见节点
,不可见节点包括:1)script
,meta
这样本身不可见的标签。2)被css隐藏的节点,如display: none
- 对每一个可见节点,找到恰当的CSSOM规则并应用
- 发布可视节点的内容和计算样式
- 从DOM树的根节点遍历所有
- js解析如下:
- 浏览器创建Document对象并解析HTML,将解析到的元素和文本节点添加到文档中,此时
document.readystate
为loading
- 浏览器创建Document对象并解析HTML,将解析到的元素和文本节点添加到文档中,此时
- HTML解析器遇到
没有async
和defer
的script标签时,将他们添加到文档中,然后执行行内或外部脚本。这些脚本会同步执行,并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本
经常简单定义函数
和注册事件
处理程序,他们可以遍历和操作script和他们之前的文档内容- 当解析器遇到设置了
async
属性的script时,开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行
,但是解析器不会停下来
等它下载。异步脚本禁止使用document.write()
,它们可以访问自己script和之前的文档元素 - 当文档完成解析,document.readState变成interactive
- 所有
defer
脚本会按照在文档出现的顺序
执行,异步脚本能访问完整文档树
,禁止使用document.write() - 浏览器在Document对象上触发
DOMContentLoaded
事件 - 此时文档完全解析完成,浏览器可能还在等待如图片等内容加载,等这些
- 当解析器遇到设置了