zoukankan      html  css  js  c++  java
  • 前端性能优化

    当浏览器向服务器发送一个 http 请求获取数据会经历如下过程:DNS域名解析 –> 开启一个链接(tcp/ip 三次握手) –> 建立TCP连接后发起http请求 –> 等待(网络延迟 && 服务器的处理时间) –> 下载
    大部分 http 请求花费时间是在建立与等待。http 协议建立 TCP/IP 协议之上。

    • css sprites: 将多张图片合成一副单独的图片,使用css的background-position属性辅助放到合适的位置上。降低了下载量,合并的图片比分离的图片小,降低了图片自身的开销(颜色表、格式信息等),现逐渐被 iconfont 和 SVG Sprite 代替。
    • 内联图片: 通过使用 data:URL 模式可以在页面中包含图片而无需额外的请求。也可将图片放到css中作为背景使用,意味着数据可缓存在样式表内部。另base64有损压缩!
    • iconfont: 可以适应任何分辨率,具有比图片更小的容量,更高的灵活性,

    页面内部优化

    • 样式表放在顶部: 减少页面呈现时间,样式表放在底部会阻塞页面的逐步呈现。
    • 脚本文件放在底部: 因为 script 中可以通过 document.write 修改页面,所以 script 文件放在顶部也会阻塞页面的逐步呈现。
    • 避免css表达式:
    • 把脚本的样式表放在外部:
    • 移除重复脚本: 如果开发中有依赖管理的方法 AMD、CMD,基本不会出现这种状况

    启用缓存

    • expires/If-Modified-Since: http1.0
    • Cache-Control/Etag: http1.1 优先级更高

    减少下载量

    开启 gzip 压缩,需要在 CPU 的消耗和数据块的大小之a间进行取舍。

    网络连接上的优化

    • 使用 CDN 加速: 地理上分布的web sever 集合,用于更高效的发布内容。基于网络远近来选择给具体用户服务的 web server,缩短了资源传输响应时间。
    • 减少DNS查找: 用于映射主机名和 IP 地址,一般一次解析需要20~120毫秒。
      域名解析 –> 等待ISP返回结果,减少DNS能够减少等待时间,最好将主机名控制在2~4个之间。

    • 避免重定向:

    将一个URL重新路由到另一个URL,重定向功能通过301和302两个状态码完成。

    减少 DNS 查询

    用户输入 URL 以后,浏览器首先要查询域名(hostname)对应服务器的 IP 地址,一般需要耗费 20-120 毫秒 时间。

    基于性能考虑,ISP、局域网、操作系统、浏览器都会有相应的 DNS 缓存机制。

    首次访问、没有相应的 DNS 缓存时,域名越多,查询时间越长。所以应尽量减少域名数量。但基于并行下载考虑,把资源分布到 2 个域名上(最多不超过 4 个)。这是减少 DNS 查询同时保证并行下载的折衷方案。--域名发散?

    域名收敛

    www.hello.com.
    二级域名.一级域名.顶级域名(根节点)

    DNS 迭代解析

    基于UDP的
    跟节点 –> 顶级域名 –> 一级域名 –> …

    • 拿到URL,浏览器寻找本地 DNS 缓存,查看有无对于的 IP 地址,如果没有则向 DNS Server 发送请求,找到对于 IP 地址。
    • 向你 ISP(互联网服务提供商) 的 DNS servers 发送 DNS query,递归查询,直接返回对应的IP地址。

    域名发散

    域名发散: PC 时代为突破浏览器的域名并发限制,遵循:http 静态资源采用多个子域名。目的是充分利用现代浏览器的多线程并发下载能力。每个浏览器允许每个域名的并行连接数是有限制的。

    并发限制原因:

    • 根本原因是以前服务器负载能力差,浏览器对max connections(最大并发数)进行限制。
    • 防止 DDOS 攻击。

    域名收敛

    域名收敛的意思就是建议将静态资源只放在一个域名下面。因地制宜,移动互联网时代通过无线设备访问网站,这种情况下提出域名收敛。
    发送http请求,DNS 解析在移动端占据大部分时间。

  • 相关阅读:
    Android | 教你如何开发一键银行卡绑定功能
    Android | 教你如何开发一个拍照翻译小程序
    Android | 教你如何开发一个证件照DIY小程序
    Android | 教你如何用三十分钟在安卓上开发一个微笑抓拍神器
    设计之禅——备忘录模式
    设计之禅——中介者模式
    设计之禅——解释器模式(译文)
    设计之禅——享元模式
    设计之禅——责任链模式
    设计之禅——桥接模式
  • 原文地址:https://www.cnblogs.com/lixuekui/p/8670167.html
Copyright © 2011-2022 走看看