web

YINXAOH
769 阅读18分钟

1. 响应式布局

  • 使同一页面在不同分辨率的设备下有相同的表现
  • 媒体查询：针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。通过 @media 和 min-width、max-width 实现
    • xs: <768
    • sm: >=768
    • md: >=992
    • lg: >=1200
  • 设置百分比： 元素宽和高随着浏览器的高度的变化而变化。子元素的height或width中使用百分比，是相对于子元素的直接父元素的height和width。子元素的top和bottom相对于直接非static定位(默认定位)的父元素的height，left和right相对于width。不管垂直还是水平方向，padding和margin相对于直接父元素的width。border-radius，backgroung-size相对于自身。
  • 设置rem：css3新特性。rem单位都是相对于根元素html的font-size来决定大小的,所以当前页面发生变化时，只需要改变根元素font-size大小即可。rem决定了 1rem=？px
  • css3引用视口单位。vw、vh、vmin、vmax。决定了 1vw = ？px
  • 图片自适应：图片随容器大小进行缩放 display: inline-block;max-width: 100%;height: auto;
    height为auto可以保证图片进行等比缩放而不至于失真。
  • flex布局和百分比设置

2. 跨域

  • jsonp跨域(只能解决get） 原理：动态创建一个script标签。利用script标签的src属性不受同源策略限制，因为所有的src属性和href属性都不受同源策略的限制，可以请求第三方服务器资源内容。步骤：
    • 1).去创建一个script标签
    • 2).script的src属性设置接口地址
    • 3).接口参数，必须要带一个自定义函数名，要不然后台无法返回数据
    • 4).通过定义函数名去接受返回的数据

3. HTTP几种请求（8种）

  • GET: 发送一个请求获取服务器上的某个资源。资源通过一组HTTP头和呈现数据返回给客户端。GET请求中，永远不会包含请求数据，不会影响资源的内容
  • POST: 向URL指定的资源提交数据进行处理请求（提交表单或上传文件）。数据包含在请求体中。POST请求可能会导致新的资源的建立或已有资源的修改
  • PUT: 向服务器发送请求，如果URI不存在，则要求服务器根据请求创建资源，如果存在，服务器就接受请求内容，并修改URI的原始版本。(PUT和POST极为相似，都是向服务器发送数据，但它们之间有一个重要区别，PUT通常指定了资源的存放位置，而POST则没有，POST的数据存放位置由服务器自己决定。)
  • HEAD: 和GET本质是一样的，区别在于HEAD不含有呈现数据，而仅仅是HTTP头信息。（比如判断某个资源是否存在时用到）
  • DELETE: 删除服务器上的某一资源
  • OPTIONS: 用于获取当前URL所支持的方法。若请求成功，则它会在HTTP头中包含一个名为“Allow”的头，值是所支持的方法，如“GET, POST”。
  • TRACE: 回显服务器收到的请求，主要用于测试或诊断。
  • CONNECT: HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器

4. 状态码

  • 1XX：信息状态码
    • 100 Continue： 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。（一般在发送post请求时，已经发送了http header之后，服务端将返回此消息表示确认）
    • 101 Switching Protocols： 请求者已要求服务器切换协议，服务器已确认并准备切换。
  • 2XX: 成功状态码
    • 200 OK: 服务器已经成功处理了请求。通常表示服务器提供了请求的网页
    • 201 Created: 请求成功并且服务器创建了新的资源
    • 202 Accepted: 服务器已经接受请求，但是未处理
    • 203 Non-Authoritative Information: 服务器已经成功处理了请求，但返回的信息可能来自于另一来源
    • 204 No Content: 服务器已经成功处理了请求，但是没有返回任何内容
    • 205 Reset Content: 表示没有新的资源，浏览器应显示原来的资源，但要重置资源的内容
    • 206 Partial Content: 服务器成功处理了部分请求
  • 3XX: 重定向
    • 301 Move Permanently: 请求的网页已经永久移动到新位置。服务器返回此响应(对 GET 或 HEAD 请求的响应)时，会自动将请求者转到新位置。
    • 302 Found: 临时性重定向。服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
    • 303 See Other: 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
    • 304 Not Modified: 自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容
  • 4XX: 客户端错误
    • 400 Bad Request: 服务器不理解请求的格式
    • 401 Unauthorized： 请求未授权，要求身份验证。对于需要登陆的网页，可能返回此状态码
    • 403 Forbindden: 禁止访问，服务器拒绝请求
    • 404 Not Found: 服务器找不到请求的页面
  • 5XX: 服务器错误
    • 500 Internel Server Error: 服务器内部错误，无法完成请求
    • 503 Service Unavailable: 服务器端暂时无法处理请求（可能是过载或维护）

5. SEO

  • 设置合理的 title、description、keywords。搜索引擎对这三项的权重逐个减小。title强调重点，description要高度概括，不要过分堆砌关键词。keywords列出重要关键词
  • 语义化HTML代码。语义化代码让搜索引擎更容易理解网页
  • 少用iframe。搜索引擎不会抓取iframe里面的内容
  • 重要内容不要用js输出
  • 重要内容HTML代码放在前面

6. cookies, sessionStoreage, localStorage区别

  • 都保存在浏览器端，且同源
  • cookies: cookies数据始终在同源的http请求中携带（即使不需要），即cookies在浏览器和服务器间来回传递。cookies数据还有路径的概念，可以限制cookies只属于某个路径下。存储大小不能超过4k。cookies在设置的过期时间之前一直有效，即使窗口或浏览器关闭。在所有同源窗口中共享。
  • sessionStorage: 不会主动把数据发给服务器，数据仅在本地保存。存储大小可以达到5M甚至更大。数据在当前浏览器窗口关闭后自动删除，不能在不同浏览器窗口中共享，即使是同一页面
  • localStorage: 不会主动把数据发给服务器，数据仅在本地保存。存储大小可以达到5M甚至更大。数据始终有效，浏览器或窗口关闭也一直保存，除非主动删除数据。用作存储持久数据。数据在所有同源窗口中共享

7. 浏览器地址栏输入url后显示页面的原理

  • 浏览器查找当前URL是否存在缓存，并检查缓存是否过期。
  • 浏览器将URL交给DNS进行解析，获得真实的IP
  • 根据IP建立TCP链接（三次握手）
  • 浏览器向服务器发起请求
  • 服务器处理请求并向浏览器返回数据，浏览器接受响应，接受文件（html，css，js等）
  • 浏览器对接受到的资源进行分析，渲染页面，构建DOM树
  • 关闭TCP连接（四次挥手）

8. 语义化

  • 使用恰当的html标签，class类名等，是页面具有良好的结构和含义，让人和机器都能更好的理解内容
  • html语义化是让页面的内容结构化，使用html定义好的语义化标签，尽量避免大量无语义化标签的使用。在没有css的情况下也可以理解，有利于SEO。使阅读源码的人易于理解
  • css语义化是使类名和id名易于理解

9. 浏览器内核

  • 主要分为两部分：渲染引擎、js引擎
  • 渲染引擎负责取得网页的内容（html、图片等）、整理讯息（加入css等）、计算网页的显示方式。然后输出到屏幕或者打印机等。不同的浏览器内核对不同网页的语法解释不同，所有渲染效果也会有所不同。大部分应用都需要内核
  • js引擎负责解析和执行js代码以实现网页的动态效果
  • 现在的浏览器内核倾向于指渲染引擎
  • Trident内核：IE6及以上、360、搜狗、百度等
  • Gecko内核：火狐等
  • Webkit内核： Safari 浏览器、iPhone 和 iPad 等苹果 iOS 平台
  • Chromium/Blink内核：Chrome浏览器
  • Presto内核：Opera 浏览器

10. web标准和w3c标准

  • web标准简单来说可以分为结构、样式和行为并将该三部分独立分开，使其更具有模块化。HTML标签构成页面的结构框架。css完成美化html标签构成的页面。js可以完成页面和用户的交互。
  • W3C对web标准提出了规范化的要求
    • 对结构要求：标签字母小写，标签要闭合，标签不允许随意嵌套
    • 对css和js要求：尽量使用外链css和js，行为和结构分离，尽量少用行内样式表

11. link 和 @import 的区别

  • link 属于html标签，不仅可以加载CSS文件，还可以定义rel等属性；@import是css提供的，只能导入样式表。
  • 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
  • link最大限度的支持并行下载，@import过多嵌套导致串行下载，出现FOUC
  • @import只有IE5以上才能识别，而link是html标签，无兼容问题
  • link方式的样式的权重 高于@import的权重

12. 优雅降级 和 渐进增强

  • 优雅降级： 一开始就构建完整的功能，然后针对低版本的浏览器进行修改使其兼容。比如css3中使用hack（向下兼容）
  • 渐进增强： 一开始就针对低版本浏览器进行构建，完成基本功能后，再针对高级浏览器追加效果达到更好体验（向上兼容）
  • 两者只是看待事物的两种观点。优雅降级关注点在于针对高版本，完善的浏览器来设计网站，低版本的浏览器中只要实现基本功能就好，除了修复比较大的错误外，其他的差异可能被忽略掉。渐进增强的关注点在于网站的内容。这种设计理念比较合理，也应用的比较广泛

13. HTTP无状态，登录有状态，怎么保持，cookie，session

  • HTTP 是无状态协议，它不能以状态来区分和管理请求和响应。也就是说，服务器单从网络连接上无从知道客户身份。
  • Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息。是服务器在本地机器上存储的一小段文本，并随着每次请求发送到服务器。服务器收到保存请求后，通知客户端保存cookies。然后客户端保存cookies，并且客服端再次发起请求时，会自动在请求报文中携带cookies。服务器收到后，会检查是哪个客户端发送的请求，然后获取之前的状态信息。
  • session 默认被存在在服务器的一个文件里（不是内存）。session 的运行依赖 session id，而 session id 是存在 cookie 中的，也就是说，如果浏览器禁用了 cookie ，同时 session 也会失效（但是可以通过其它方式实现，比如在 url 中传递 session_id）。用户验证这种场合一般会用 session

14. 前端页面优化

  • 尽量减少 http 请求的次数
  • 在js中尽量减少闭包的使用
  • 减少对 DOM 的操作
  • 尽量使用事件委托来处理和绑定事件
  • 合理设计http缓存
  • 合并CSS图片，用css精灵
  • 将外部脚本置底
  1. 框架的配置（webpack，脚手架）

16. TCP三次握手

  • 第一次握手：客户端发送一个 SYN 码和序列号 seq=x（随机）给服务器，请求建立连接
  • 第二次握手：服务器发送一个确认包和自己的 SYN 给客户端，即 SYN+ACK，并将序列号设置为 seq=y，确认号设置为 ack=x+1 ， 表示可以建立连接
  • 第三次握手：客户端再发送一个 ACK 给服务器，并将序列号设置为 seq=x+1， 确认号 ack=y+1。服务器验证ACK没有问题，建立起连接

17. TCP四次挥手（客服端和服务器均可发起）

  • 第一次挥手：主动方发送 FIN 报文和随即序列号 seq=u 给被动方，通知被动方数据已经发送完毕，但还可以接收（主动方进入FIN_WAIT_1 状态）
  • 第二次挥手：服务器接收到后，发送一个确认包 ACK。表示已经接收到了主动方的请求，但还没有准备好关闭连接。并且将序列号设置为 seq=v，确认号ack=u+1 （被动方端进入 CLOSE_WAIT 状态，主动方接收到这个确认包之后，进入 FIN_WAIT_2 状态）
  • 第三次挥手：被动方准备好关闭连接时，向主动方发送结束请求，FIN置为1，序列号设置为 seq=w, ACK仍置为1，确认号仍为 ack=u+1 （被动方端进入 LAST_ACK 状态，等待来自客户端的最后一个ACK。）
  • 第四次挥手：主动方接收到被动方的关闭请求，发送一个确认包，即ACK，并将序列号设置为 seq=u+1，确认号设置为 ack=w+1 （主动方进入TIME_WAIT状态，被动方收到这个确认包之后，关闭连接，进入 CLOSED 状态。）

18. 为什么建立连接时是三次不是两次？

  • 如果只有两次握手，客户端发送请求后，服务器回复一个确认包，请求就能建立。但是客户端不一定会收到确认包，如果确认包丢失，服务器的资源会一直被占用。客户端没有收到确认包还会再次发起请求，这时之前建立的请求会浪费。还有一种情况，客户端再次发起请求后，又收到了上一次的确认包，这时之前的请求还是会浪费

19. 为什么断开连接时是四次

  • 因为数据是双向传递的，断开连接时需要确保双方的数据都传输完毕

20.TCP和UDP区别

  • tcp发送数据前要建立连接，udp不需要
  • tcp保证数据的可靠传输，数据包无差错，按次序到达。udp尽最大努力交付，不保证可靠传输
  • udp有较好的实时性，工作效率比tcp高
  • tcp对系统资源要求比udp高

21.HTTP1.0， 1.1，2.0主要特性特性

  • HTTP1.0: 无状态，无连接的协议。每次请求都要简历tcp连接，传输完之后断开连接（无连接）。服务器不跟踪也不记录过去的请求（无状态）；存在队头阻塞，下一个请求必须在前一个请求响应到达之后才能发出
  • HTTP1.1：新增了长连接。通过设置Connection为keep-alive保证http连接不断开；新增了管道化。可以“并行”发送多个请求，但是响应的返回严格按照请求的顺序。也不能解决队头阻塞；还加入了缓存处理
  • HTTP2.0： 多路复用。数据流以消息的形式发送，消息由很多帧组成，可以混合在一起发送，接收到后会根据帧头的标识符（标识属于哪个数据流）组合

22.浏览器缓存策略

  • 浏览器每次发起请求，都会先在浏览器缓存里查到该请求的结果和缓存标识。浏览器每次拿到请求的结果后，都会根据缓存标识对结果进行缓存。
  • 强制缓存：向浏览器缓存查找缓存结果，并根据缓存标识决定是否使用该缓存结果
    • 如果浏览器缓存中不存在该缓存结果和缓存标识，直接向服务器发起请求
    • 如果存在缓存结果和缓存标识，但是已过期，强制缓存失效，进行协商缓存
    • 如果存在缓存结果和缓存标识，并且未过期，强制缓存生效
  • 协商缓存：强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程
    • 协商缓存生效，返回304。使用缓存结果
    • 协商缓存失效，返回200和新结果
  • 强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓存

23.http请求头和响应头

请求头

  • Accept: 告诉服务端，客户端接受什么类型的响应 (text/html, */*所有类型)
  • Accept-Encoding: 可接受的编码方式，通常指压缩方式(gzip，deflate)
  • Accept-Language: 申明接受的语言(zh-CN,zh;q=0.9)
  • Connection: 一个Request传输完成后，建立的tcp连接会不会关闭 (keep-alive不会关闭;close关闭)
  • Host: 指定被请求资源的主机和端口号
  • Referer：告诉服务器该请求是从哪个页面链接过来的
  • User-Agent：告诉服务器客户端使用的os和浏览器的名称及版本
  • Cookies: 储存用户信息使服务器辨别用户身份。sessionid就存储在其中
  • Cache-control: 对缓存就行控制
    • private: 响应只有作为私有缓存，用户间不能共享
    • public: 响应会缓存，用户间可以共享
    • no-cache: 不会缓存，实时请求资源
    • max-age=xx: 定义缓存最大有效时间，单位s
    • must-revalidate：使用前必须先验证，若缓存不是最新的 不用，没过期 用
  • Range:bytes=0-5 用于断点续传。指定需要截取的第一个字节和最后一个字节的位置
    响应头
  • Cache-control: 对缓存就行控制
    • private: 响应只有作为私有缓存，用户间不能共享
    • public: 响应会缓存，用户间可以共享
    • no-cache: 客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
    • no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
    • max-age=xx: 定义缓存最大有效时间，单位s。优先级比Expires高
    • must-revalidate：使用前必须先验证，若缓存不是最新的 不用，没过期 用
  • Content-Type：告诉客户端，资源文件的类型
  • Content-Encoding：告诉客户端，服务器传来的资源的编码方式
  • Date：服务器发送资源时的服务器时间
  • Server：服务器及相应的版本
  • Connection：回应客户端的相应字段，告诉客户端是否可以继续使用这个tcp链接
  • Expires： 告诉客户端，在过期时间前，可以直接使用缓存
  • Last-Modified：请求的资源最后一次修改的时间
  • Etag： 一个对象的标志值。如果一个html被修改，Etag也会被改变。供服务器判断文件是否改变
  • Transfer-Encoding：chunked 这个响应头告诉客户端，服务器发送的资源的方式是分块发送的
  • Refresh: 5; url=http://baidu.com 用于重定向，或者当一个新的资源被创建时。默认会在5秒后刷新重定向。

24.cookies的expires

如果没有过失效期，关闭电脑也不会失效。如果没有设置失效期，关闭浏览器即失效

25.web woker

  • 本质是线程
  • 进程是os分配内存的基本单位，线程是cpu执行代码的基本单位
  • Chrome中一个进程最多可以使用6个并发线程
  • web worker是浏览器后台运行js，不占用自身线程，不影响页面性能
  • 缺点：浏览器禁止worker线程操作dom和bom对象

26. ajax

avatar
文章
阅读
粉丝