1. 输入url到页面加载全过程(必考)
- DNS解析域名找到对应IP
- 通过IP找到对应服务器进行三次握手
- 服务器接收到信息返回对应文件
- 浏览器判断状态码开始处理
- 判断是否是压缩文件
- 解析html构建DOM树、CSSOM树、执行js文件
- 生成 Render 树,GPU 绘制,合成图层,将内容显示在屏幕上
2. HTTP报文的请求和返回会有几个部分(请求行、请求头、请求体);每部分具体都有什么(常见的请求头)
- 请求行
- 由请求方法 url 协议版本组成 (GET/images/logo.gif HTTP/1.1)
- 首部
-
通用首部
- Catch-Control-控制缓存的行为
- Connection 浏览器想要优先使用的链接类型,比如keep-alive
- Date 创建报文的时间
- Via - 代理服务器的时间
-
请求首部
- User-Agent 客户端信息
- Accept 能正确接受的媒体类型
- Accept-Charset 能正确接受的字符集
- Accept-Encoding 能正确接受的编码格式列表
- Accept-Language 能正确接受的语言列表
- Host 服务器域名
- If-Match 两端资源标记比较
- if-Modified-Since 本地资源未修改返回304(比较时间)
- if-None-Match 本地资源未修改返回304(比较标记)
- Referer 表示浏览器所访问的前一个页面
-
响应首部
- Server 服务器名字
- ETag 资源表示
- Location 客户端重定向到某个URL
- Proxy-Authenticate 向代理服务器发送验证信息
- WWW-Authenticate 获取资源需要的验证信息
- Age 资源在代理缓存中存在的时间
-
实体首部
- Allow 资源的正确请求方式
- Content-Encoding 内容的编码方式
- Content-Type 内容的媒体类型
- Expires 内容过期时间
- Las_modified 内容的最后修改时间
-
- 实体
3. 常用的HTTP方法有哪些?
- GET: 用于请求访问已经被URI(统一资源标识符)识别的资源,可以通过URL传参给服务器
- POST:用于传输信息给服务器,主要功能与GET方法类似,但一般推荐使用POST方式。
- PUT: 传输文件,报文主体中包含文件内容,保存到对应URI位置。
- HEAD: 获得报文首部,与GET方法类似,只是不返回报文主体,一般用于验证URI是否有效。
- DELETE:删除文件,与PUT方法相反,删除对应URI位置的文件。
- OPTIONS:查询相应URI支持的HTTP方法。
状态码
- 2xx 成功
- 200
- 204 请求成功,但响应报文不含实体的主体部分
- 205 请求成功,但是响应报文不含实体的主体部分,与204的区别是要求请求方重置内容
- 206 进行范围请求
- 3xx 重定向
- 301 永久重定向
- 302 临时重定向
- 303 表示资源存在着另一个URL,应使用GET方法获取资源
- 304 表示服务器允许访问资源,但因发生请求未满足条件的情况
- 307 临时重定向 但是期望客户端保持请求方法不变向新的地址发出请求
- 4xx 客户端错误
- 400 请求报文存在语法错误
- 401 表示发送的请求需要有通过HTTP认证的认证信息
- 403 表示对请求资源的访问被服务器拒绝
- 404 表示在服务器上没有找到请求资源
- 5xx 服务端错误
- 500 表示服务器在执行请求是发生了错误
- 501 表示服务器不支持当前请求所需要的某个功能
- 503 表明服务器暂时处于超负载或正在停机维护,无法处理请求
4. GET和POST的区别
- get通过地址栏传递参数,post通过body来传输
- post相对来说更安全
- URL有长度限制,会影响 Get 请求,浏览器会保存个请求记录
- GET多用于搜索,post多用于注册
5. URI和URL的区别
Web上可用的每种资源如HTML文档、图像、视频片段、程序等都是一个来URI来定位的
URI一般由三部组成:
①访问资源的命名机制
②存放资源的主机名
③资源自身的名称,由路径表示,着重强调于资源。
URL是uniform resource locator统一资源定位器,它是一种具体的URI,即URL可以用来标识一个资源,而且还指明了如何locate这个资源。
URL是Internet上用来描述信息资源的字符串,主要用在各种WWW客户程序和服务器程序上,特别是著名的Mosaic。
采用URL可以用一种统一的格式来描述各种信息资源,包括文件、服务器的地址和目录等。URL一般由三部组成:
①协议(或称为服务方式)
②存有该资源的主机IP地址(有时也包括端口号)
③主机资源的具体地址。如目录和文件名等
6. 强缓存和协商缓存的区别?控制协商缓存的字段(必考)
强缓存的状态码是200,判断缓存的字段有Expires(通过对比时间 优先级最低)、Cache-Control和Pragma
- Expries的值是一个HTTP日期,浏览器通过对比系统时间来判断缓存是否失效
- Cache-Control常用属性值
- max-age:单位是秒,缓存时间计算的方式是距离发起时间的秒数,超过间隔缓存失效
- no-cache:不使用强缓存,需要与服务器验证缓存是否新鲜
- no-store:不使用缓存,每次都向服务器请求资源
- privite:专用于个人的缓存,中间代理、CDN等不能缓存词响应
- public:响应可以被中间代理、CDN等缓存
- must-revalidate:在缓存过期前可以使用,过期后必须向服务器验证
需要注意no-cache不是不缓存数据,只是浏览器在使用缓存数据时,需要先确认一下数据是否还跟服务器保持一致,也就是协商缓存。而no-store才表示不会被缓存,及不使用强制缓存,也不使用协商缓存
- Pragma
- Pragma只有一个属性值,就是no-cache,效果和Cache-Ctrol中的no-cache一致,不使用强缓存,优先级最高
强缓存如何设置
强缓存需要服务端设置expires和cache-control
location ~ .*.(ico|svg|ttf|eot|woff)(.*) {
proxy_cache pnc;
proxy_cache_valid 200 304 1y;
proxy_cache_valid any 1m;
proxy_cache_lock on;
proxy_cache_lock_timeout 5s;
proxy_cache_use_stale updating error timeout invalid_header http_500 http_502;
expires 1y;
}
7. 对跨域的了解,跨域怎么解决(必考)
- webpack dev
- jsonp
- Nginx
- 利用node请求
- 服务端设置请求头
8. 什么时候会触发cors(跨域资源共享)预请求?cors的请求头和响应头有哪些?(必考)
满足下面的所有条件就不会产生预检请求:
- 请求方式是GET/POST/HEAD其中的任意一个
- 必须是下面定义对CORS安全的首部字段集合,不能是集合之外的其他首部字段
- Content-Type的值必须是text/plain、multipart/form-data、application/x-www-form-urlencode中任意一个值
请求头
- Orign:当前请求源,和响应头里的Access-Control-Allow-Orign对标,是否允许当前源访问
- Access-Control-Request-Headers:本次真实请求的额外请求头和响应头里的Access-Control-Allow-Headers对标,是否允许真实请求的请求头
- Access-Control-Request-Method:本次真实请求的额外方法,和响应头里的Access-Control-Allow-Methods对标,是否允许真是请求使用的请求方法
响应头
- Access-Control-Allow-Credentials:凭证-这里的包括证书、cookie
- Access-Control-Allow-Headers
- Access-Control-Allow-Methods
- Access-Control-Allow-Origin
- Access-Control-Expose-Headers
在CORS中,默认的,只允许客户端读取下面六个响应头
- Cache-Control
- Content-Language
- Content-Type
- Expires
- Last-Modified
- Pragma
- Access-Control-Max-Age:设置预检请求的有效时长,就是服务器允许的请求方法和请求头做个缓存
9. 前端网络与安全了解多少?如何预防脚本攻击xss csrf
- xss攻击如何防御
- 通过把尖角号进行转义
- 如果是富文本的方式就可以通过建立白名单的方式
- csrf-跨站请求伪造
- GET请求不对数据进行修改
- 不让第三方网站访问到用户Cookie
- 组织第三方网站请求接口
- 请求时附带验证信息,比如验证码或者Token
- 点击劫持-利用iframe嵌套的方式嵌入自己的页面中,并把iframe设置成透明
- 设置HTTP响应头X-FRAME-OPTIONS为DENY。表示页面不允许通过iframe的方式展示
10. 前端性能优化(必考)
- 图片压缩处理
- 懒加载
- 骨架屏
- cdn应用
- 动态加载组件
- 服务端渲染
- 预渲染
- 按需加载
- 开启gzip