什么是302跳转

Http 302对应生活中的真实例子,可以类比手机所对应的呼叫转移功能,这样打进A手机的电 话,均转移到B手机接听。

Http协议常用状态码

http状态码 说明
202 服务器成功处理、请求并提供了请求了网页
204 服务器成功处理了请求,但没有返回任何内容
301 请求的网页已经永久的移动到新位置,URLs发生变化,就要由301重定向
302 请求的网页临时移动到新位置,搜索引擎索引中保留原来的URL
304 如果网页自请求着上次请求后没有更新,304代码会告诉搜索引擎
400 服务器不理解请求的语法
403 服务器拒绝请求
404 服务器找不到请求的网页
410 请求的资源永久删除后,服务器返回此响应
500 服务器遇到错误,无法完成请求
503 服务器目前无法使用

301和302表示重定向,301表示这个网⻚已经永久的由服务器的A路径下移动到路径B下,而 302表示临时移动到B路径下


网⻚与原生App如何交互

实现方式

以Android系统为例,Android手机上的App是使用Java语言编写的,而网⻚中则运行着一 些Html、Javascript编写的代码一个是编译型语言,一个是解释性语言。Android的App是通过WebView(请亲理解成一个组件,想象WebView就是一个没有任何操作按钮的浏览器,你输入baidu.com他就打开了百度的⻚面来展示一个网⻚的,同时WebView为网⻚和原生App建立一个桥梁,让网⻚和原生App能够看到 彼此暴露的一些方法,从而达到互相操作的目的。

网页&原生优劣分析

一个原生应用为网⻚开放的能力越多,网⻚对原生系统的操作能力就越强,就越能做出逼近原生应用的体验。这却是一把双刃剑,因为原生App开放的能力有可能会被恶意的⻚面利 用,对用户造成伤害,如何控制能力的开放,也是需要产品和开发一起思考的问题。
网⻚塑造的界面:非常灵活,可以随时更新
原生APP塑造的界面:提供更流畅的用户体验,但是却无法热更新,只能依靠发布版本来提供新功能。

例如在微信中购物 的展示是网⻚形式的,方便运营快速更新,通过Js接口调用起原生的支付界面,给用户更流畅 的支付体验,提高支付成功率。


关于推送

传统APP与推送架构

传统的app架构:通常是app主动向服务器请求数据,服务器被动的提供数据。
推送架构:服务器主动连接上所有的app,告诉他们我有新的新闻了,你们再来请求一次吧,于是收到推送的app(即使此时已经被用户关闭了)又去服务器请求最新的新闻,这样用户就能看到最新的新闻了。

app和后台的连接方式

  • 一种叫pull(轮询),就是定期的不断向后台请求,缺点是耗电,费流量,不环保。
  • 一种叫push,app和后台一直维持了一条通信通道,两端不定期的就会互相传递信息,缺点是要维持一条长连接通道,这条通道容易被其他程序杀死。

关于下载劫持

下载流程(一般是下订单的时候被劫持)

  1. 点击下载按钮
  2. 向服务器下一份『订单』

    • DNS被修改
    • 指向其他服务器导致下载的文件变化
  3. 服务器确认『订单』

  4. 通过网络传输到用户终端


Android的系统权限

常用权限

  • 网络访问权限:连接网络
  • 修改或删除外置存储中的内容:往用户的SDCard上随意读写文件的权限
  • 读取手机状态和身份:获取到手机的唯一识别码IMEI,很多应用用它来做为单一用户的标识
  • 查看WLAN连接:可以查看用户当前的WiFi接入点信息
  • 控制振动
  • 检索正在运行的应用:可以查看用户当前运行了哪些应用
  • 防止手机休眠:在锁屏后为了降低功耗系统会进入休眠状态,但是很多应用为了维持后台运行,就会申请这个权限(Android系统比较耗电的原因之一)
  • 大致位置(基于网络)
  • 开机启动
  • 相机
  • 在其他应用之上显示内容:可以理解为置顶应用
  • 精确位置:获取精确的GPS位置
  • 安装快捷方式:安装10个应用,桌面上会出现20个以上图标的,就是因为它
  • 录音
  • 卸载快捷方式:悄悄的将自(友)己(商)的图标删掉
  • 读取联系人信息:读取你的通讯录
  • 停用屏幕锁定
  • 发送短信
  • 读取短信

React Native-目前最火的前端技术

Facebook提供的一套方案,它利用JavaScript作为开 发语言,可以同时来编写前端,移动终端,后台应用程序。

  • Learn Once,Write AnyWhere

React Native优势

  1. app将来都是可像网⻚一样热更新,随时发布。
  2. 对于一名开发人员,将再也没有前端,终端,后台的区分,他所关注的就是做一整套应用程序,人力将得到最大幅度的整合与释放。
  3. 代码复用将会是主旋律,因为是一种语言,大家重复造轮子的成本会越来越节省。

前端和后台的数据交互与协议

客户端和服务器之间传输数据的格式

  • 一种是类似于PB(Protocol Buffer,Google定义的一个数据传输 协议,以简洁,省流,易用出名)的二进制数据传输,这种格式的好处是包小,重复的字段会被节省
  • 一种是JSON(JavaScriptObject Notation),这也是一 种轻量级的数据传输格式,就是用一堆中括号把数据组织起来,不像二进制,这种格式是人可读的,并且比较轻巧,所以也有大量的应用场景。

存储设备简介

硬盘:硬盘是用来存储数据的仓库。

  • 机械硬盘(HDD):量价比(存储容量/价格)最大。
  • 固态硬盘(SSD):固态硬盘的随机存取速度 (读取大量小文件)比HDD快几十倍甚至上百倍,持续存取速度(一次读取一个大文件)也比HDD快一倍以上,价格高。

内存:内存即内部存储器(这类存储器与HDD、SSD和U盘的最大不同点是它们存储的数据不是直接给 人类使用的,而是为CPU的运算提供服务)。

  • 只读存储器(ROM):ROM的特点是读取速度快、写入速度慢并且数据可持久存储(主要用户 保存一些固化(不会被修改)的数据)

  • 随机存储器(RAM):读写速度非常快,但是断电后数据会全部丢失(要用来存取 CPU最近一段时间将要用到的数据)


代理服务器

代理服务器架在客户端和真正服务器中间,干的是替客户端访问真正服务器的工作。

需要代理服务器的原因

  1. 真正的服务 器藏于千里之外,我们连接不上
  2. 我们访问真正的服务器的速度太慢,比不上我们访问代理服务器+代理 服务器访问真正服务器的速度。
  3. 通过代理服务器访问真正服务器可以隐藏访问者的身份,保护访问者。

Web语言的浅显理解

HTML、CSS、JavaScript共同构建了你看到的任何一个网页展示和交互。

  • HTML(HyperTextMarkup Language) 超文本标记语言(HTML就是用来布局网页中的每一个元素的)
  • CSS(Cascading Style Sheets)级联样式表(CSS是起装饰作用的,必须要和HTML一起配合使用)
  • JavaScript 一种脚本语言,主要用于前端页面的DOM处理(在网页中使用的主要场景是控制HTML中的每一个元素,有时候 可以把有些元素删除,有时候要添加新元素)

进程、线程

进程:启动XX应用”,这时系统的应用加载器就会找到应用程序的安装目录,并为应用 程序创建一个“进程”
线程:进程中会包含若干“线程”,这些“线程”共享进程的资源,并且按照应用程序中指定 的“逻辑”完成既定的任务(如启动闪屏,播放视频,响应用户的交互操作等)


同步、异步和回调

同步:下达了执行任务的命令后,马上得到结果
异步:下达了执行任务的命令后,等到执行完成之后得到结果
回调:把自己信息给别人的过程叫做注册,别人找到你给你通知的过程就叫做回调。


渲染

渲染是通过一些列计算并呈现的过程,其中包括测量、排版、绘制。你在任何屏幕上看到的任何一个图形,无一例外,都经过了这三个过程。


动画

一般来说当帧率达到30帧每秒的时候,人们就会觉得这个动 画很连贯了,当帧率达到60帧每秒的时候,这个动画就会非常流畅了。(要达到每秒钟60帧的帧率流畅运行,每一帧要花16毫秒左右)


缓存

缓存就是临时存储的意思

缓存系统

一级缓存

一级缓存也叫内存缓存,一级缓存存取速度更快,程序退出数据就消失,不可一直保留,且多占了一些内存,容易被人叨逼叨的说程序占内存大,把系统拖慢了,其实这是非常合理的一种以空间换取时间的程序设计。

二级缓存

二级缓存也叫硬盘缓存(手机App中,在Sd卡上)二级缓存容量可以更大,速度要慢一些,程序下次启动时候,依然可以使用。

朋友圈缓存方式

优先存储至一级缓存,一级缓存达到上限后,一般会采用LRU(Least Recently Used)算法进行淘汰,也就是最近最少被使用的图片被淘汰,第一张图片被淘汰出了一级缓存,它会被安放到二级缓存,也即存储到了硬盘上,当需要调用该图时,级缓 存又按照刚才的算法,淘汰一些其他最近最少被使用的图片出去,保证第一张图片能够在内存 中,然后我们有又看到了第一张图片。


下载技术方式

中心化服务

从某一个网站上下载一部电影,这部电影的所有数据均在这个网站的服务器上,下载速度经常不是很理想(大部分是服务器带宽的影响)。

中心化服务通常是Http或Ftp协议。

去中心化服务

这种下载模式中没有中心的主机服务器,每片数据都可能来自不同的用户,这是一种共享的思维模式,只要提供极少的带宽成本就好了,这种分布式、去中心化的拓扑结构被成为P2P, 也叫对等网络。

因为用户量足够大,所以用户之间互相共享的数据非常丰富,缓冲速度快,可以边下边播,这个基础上诞生了很多下载协议,比如BT,eMule,xunlei。


动态注入

如果你的手机可以获得Root权限,并且手机上安装了某个具有“动态注入”能力的“其他应用”A那么,当你使用应用程序时,应用程序的启动和运行可能会经历下面的过程:

  1. 应用程序启动后,A会使用“动态注入”技术,将自己的“窥视”代码注入到应用程序的进程中。
  2. “窥视”代码被注入后,会针对性的拦截应用程序到系统的“通道”。
  3. 当应用程序使用“通道”时,数据会先被A应用“窥视”后,才会交给操作系统。

    “动态注入”如果能够合理利用,可以通过获取用户 的使用习惯来做一些针对性的体验优化,还可以控制一些软件的自启动和流量使用。


公共WiFi

无密码的WiFi

这种WiFi最是方便,连上便可以直接使用,也是最不安全的。当连接上这个无密码 的WiFi的时候,连接者和WiFi热点之间的通信是没有任何加密保护的。

WEP加密的WiFi

连接者和WiFi热点之间的通信是有一层加密保护的,但是在公共场所第三者也可以向获得密码,再以逆向的方式,同样可以把加密的对话解密开来。

WPA加密的WiFi

WPA加密的WiFI,每次都会和WiFi热点协商一个不同的密钥来加密,这样加大了窃听的困难程度,但是也不能确保完全安全。

钓⻥WiFi

在公共场合,有的WiFi是可以随便连接上的,同时也可以正常的上网。但是它的后面却坐着一个监听者,这就是钓⻥WiFi。在这种情况下,每次你的访问都会先经过监听者,再由监听者为你访问。

蜜罐WiFi

移动设备如果成功的连上过某个WiFi,在下次遇到这个 WiFi时就会自动连接上。有这样一种WiFi热点,它就是我们曾经连接过的一个正常WiFi的克隆,名称和密码与正常WiFi一模一样,唯一不同的就是,它后面坐着的还是监听者。

公共WiFi安全问题

  1. 窃听重要信息:你发出的所有的数据,包括小金库的账号密码都有可能被窃听
  2. 篡改信息,本来你是要帮你老婆清理购物⻋,结果却是帮助老王清理了他的购物⻋。

使用公共WiFi的正确姿势

  1. 能不用公共WiFi就不要用,出⻔在外尽量使用3G/4G上网
  2. 使用公共WiFi尽量使用WPA加密的热点,而不是WEP或者没有密码的热点
  3. 使用公共WiFi时,尽量少进行帐号登录等操作,尽可能访问https加密的网站
  4. 为了保证传输过程中的数据安全,尽可能在连接上免费WiFi后,再连接一个可信任的VPN连接,加密所有流量
  5. 当你不使用WiFi时,记得把设备上WiFi的开关关闭,避免自动连接上蜜罐WiFi

Android应用的续命大法

监听系统事件

Android系统有一套广播机制,当系统发生了某件事的时候,它会通知给需要知道这件事情的所有应用。

这套机制对于良心应用来说,就是可以根据系统 当前的状态,给用户带来更好体验。但是,应用也可以通过这个机制唤醒自己,停留在后台。

守护进程唤醒

很多应用在启动后,还会创建一个守护进程, 守护进程跑在后台不断的检查应用进程还在不在,一旦应用进程被杀死了,它就会唤醒应用。

守护进程的局限,首先得通过其它方式启动一次

全家桶系列

在安装了同一公司的多个应用,不同应用之间相互唤醒,当应用A被杀死后,同⻔兄弟B就会将它唤醒复活,还有的情况是只要你启动了A,它就会把它的同⻔兄弟ABCD都唤醒了。


数据库

数据库简单的可以理解为一个大文件,这个大文件 当中有若干个excel表格,每张表格里面存储了若干条记录就。

数据库的特点

  1. 索引,数据库经常有上亿条记录,查询会很慢很慢的,数据库会提供一个功能,像字典一 样编制一个”索引“,就是新华字典的前几⻚一样,靠拼音或偏旁来查询的功能,这个就是 索引,这个经常能大幅度提高查询速度。
  2. 事务,数据库提供了一种机制,就是一件事,必须做完,如果中间出了差错,他会清理掉 一切痕迹,回到最初状态,这对于保持数据的一致性和完整性有功不可没的作用。
  3. 联合查询,经常一张表格解决不了你的问题,比如有两张表,一张表是员工基本信息,另 一张表是工资表,这个时候,要查询某某员工的工资,就要两张表一起来“联合查询”

应用程序使用数据库的步骤

  1. 首先建立和数据库的连接
  2. 利用这个连接,来进行数据库的建表,删表,以及对表的增删改查操作
  3. 关闭数据库连接(这一步是最容易犯错误的,不关闭数据库连接,经常会产生内存泄漏,以及各种异常)

    数据库的直观表现就可以看成一个excel表格

Chrome DevTools的使用

修改页面的内容

选择Elements这个Tab,点击左边小箭头,移动箭头到你要更改的地方点击,对应⻚面元素你就找到了,修改里面的内容会立刻显示到⻚面上。

查看手机版网⻚

点击左边的手机图标,选择你想要的机型,输入网址,手机版⻚面就会展现在你面前。

下载图片、视频、音频

选择Resources这个Tab,如何找到Images目录,下面是这个⻚面中用到的全部图片,只需要找到你想要的图片,就可以右键保存了。

模拟低网速用户

选择Network这个Tab,右上方可以选择一个想要模拟的网络环境,然后输入网 址,所有网络请求耗时和流量都展现下方列表里了

程序员的分类

前端开发

Web前端开发

工作:网页
代码:HTML+CSS+JavaScript

Android终端开发

工作:Android页面
代码:Java

iOS终端开发

工作:iOS页面
工具:XCode


DDoS攻击

DDoS的基本原理

通过对服务器发送大量无用的请求,耗尽服务器资源(CPU、内存等)导致
服务无法正常运行,正常请求无法得到响应

实现DDoS攻击的条件

需要攻击者比被攻击者需要更多的硬件资源(更好的Cpu和更大的带宽)

DDoS攻击方式

  1. 通过向流量平台租赁流量实现流量攻击。
  2. 另是通过种植“肉鸡”,构建僵尸网络,利用云控指令对被攻击者发起攻击。

DDoS的可怕之处

被攻击者无法正确的区分哪些是攻击者发来的请求(被谣言欺骗的小⻘年),哪些又是正常的请求(没听过谣言的其他顾客)


Ajax技术

解释:异步JS和 XML。
功能:主要解决的就是不用刷新网⻚,来和后台交互获取数据,并应用于当前网⻚。

Ajax的功能是如何实现的

  1. 发起网络请求:这个发起网络请求的能力由浏览器的内置能力提供,所有的浏览器都提供了 XmlHttpRequest这个对象,这个对象可以由网⻚调用,用来连接一个特定的地址。
  2. 不用刷新,动态操作网⻚:JavaScript可以动态的操作整 个网⻚。

HTTPS技术

解释:安全超文本传输协议

传统HTTP协议

应用层的HTTP协议将应用程序提供的数据封装后,明文交给位于运输层的TCP协议发送到网络上。由于是明文传输,发送的信息可以在传输过程中被任意篡改,甚至被完全替换。HTTP协议的主要缺点就是明文传输

HTTPS协议

HTTPS协议在HTTP和TCP之间添加了一层SSL协议。SSL是用来保障网络上数据传输安全的一套协议,它在传输层对HTTP进行封装加密,然后将数据交由TCP协议发送到网络上。

使用HTTPS的服务器,需要在受信任公司申请一套数字证书,也就是密码学中的公钥和私钥, 用于进行非对称加密。公钥加密的数据需要用私钥解密,私钥加密的数据需要用公钥解密。

HTTPS协议建立连接流程

  1. 客户端发起https请求。
  2. 服务器将公钥发送给客户端,客户端可以根据公钥验证服务器的身份。
  3. 客户端生成一个加密密钥,公钥加密后,将密钥传输给服务器,服务器用私钥解密报文获得客户端密钥。
  4. 服务器和客户端的数据传输都通过客户端密钥进行加解密。

    HTTPS协议可以保证信息在网络中传输的可靠性,主要用于对传输安全敏感的场景,另外HTTPS也可以有效的防止⻚面被网络中的三方(比如运营商)篡改。


数据问题

埋点数据从上报到生成报表大体分为五个关键环节:
埋点->上报->后台记录日志->计算&入库->展示

常见的统计数据问题

报表数据为0

数据有上报而报表数据为0,这种问题一般会出现在『计算&入库』和『展示』环节。先找技术确认功能正常后,再联系后台负责数据统计的同学跟进,一般情况下,异常的数据都是可以恢复的。

报表数据大面积突降

如果已经稳定很久的报表,突然出现大范围的数据突降,先找找运维同学吧,看看最近日志分析系统有做策略调整或者日志迁移,导致报表中只收录了部分日志的数据。如果是的话,不用担心,即便你不找上⻔,运维同学也会主动跟进,把数据恢复的。

报表数据突增

线上的单个数据或者相关的几个数据突然出现异常增⻓,很有可能是被人恶意刷量。要确定这 种问题,直接找数据组的同学查下原始日志,确认下是不是有个别IP或者用户ID对应的PV数量 明显异常。

历史数据出现问题

要确认问题的原因,上报数据的原始日志是十分重要的线索。报表中的数据,可以追溯到几年前,但是原始日志由于数据量太大,可能只会在服务器存储几个月甚至几天。所以,对于这种要求,程序猿也是无法实现的。

报表数据明显低于预期

找负责埋点同学准没错,肯定是遗漏了重要的用户路径,重新埋点吧。

业务流复杂的漏斗统计数据异常

从push下发banner数据到用户成功安装应用,中间需要经过多个业务能力的配合,如果漏斗中 的数据出现异常,只需要逐级找相关负责人确认数据即可。实在不了解整个流程的话,找个负责任的开发协助你一下吧。


重构

重构就是在保留现有功能的基础上,重新梳理软件中的代码结构,让原本杂乱无章的代码重新具有可读性、结构性和可扩展性,增加软件的开发效率,优化程序的性能。

在软件开发过程中,每一款软件一开始都是经过精心设计,具有良好的结构。但随着需求的不断变更,之前的结构开始慢慢变得不适应。
为了快速的完成需求,开发者可能会使用一些违背当前软件架构的方式实现功能。

增量更新

1.生成差异包
首先要做的就是将App的最新安装包(V5)与历史发布版本的安装包(V3)进行差分对比,得到一个差异包(V5-V3)。如果有多个历史版本,那么就要用最新包与多个历史包分别对比并生成相应的差异包。这些操作都可以在服务器上用脚本来批量完成,不需要自己动手一个个的来生成。
2.下发差异包
当某个老版本(V3)的App开始检查更新的时候,需要将自己当前的版本信息发送给服务端, 然后服务端判断后,选择对应的差异包(V5-V3)下发。
3.合成新包
当App收到差异包后,就要开始合成新包了,首先就是想法取出当前历史版本的安装 包(V3),然后使用与生成差异包相反的办法,将历史包与差异包合成一个新的安装包。
4.校验完整性
得到的新安装包你敢直接拿来用吗?反正我是不敢的,因为我并不能确认,这个合成的新包 就是我想要的最新安装包(V5),在拉取差异包、获取当前历史包、合成新包这些过程中,都 是有可能出篓子的,导致最终合成的新包并不完整。所以,在合成新包前,我们需要校验当 前历史包的Hash值以及差异包的Hash值,合成新包后,也要校验新包的Hash值,只有这三 个Hash值都与预期匹配,我才能确认新包是完整的,并用来进行升级操作。

大部分应用的增量更新包只有完整包的25%大,可以为用户节约四分之三的升级流量

开发模式

瀑布模式

优点:如果需求足够明确,中途也不会产生任何变化,整个开发过程犹如在一⻢平川的没有红绿灯。
缺点:开始开发后不到后期是看不到产品交付的样子的,如果中间有问题,也只能认命。

敏捷开发(新时代产物)

优点:能够拥抱变化,快速响应。

软件开发需要做的就是快速成型,让客户短时间内看到产品的样子,然后通过不断的迭代来逐渐贴近客户的需求,适应客户需求的变化。

响应式设计

响应式设计的优点

  • 不必单独维护移动和PC两套站点,降低人力成本
  • 可以复用设计元素,内容资源
  • 同一网址自适应不同设备,利于不同设备的用户相互分享网址
  • SEO优化,搜索引擎更愿意收录同时适配移动设备和PC设备的网⻚

如何构建响应式设计网站

  1. 设计师需要将网⻚中的元素分模块设计,针对不同的屏幕,调整出不同的布局。 > 现在流行一种「移动优先」的策略,也就是说先行设计移动端的样式,然后再扩展成为 PC端样式,因为移动端的样式相对简单,渐进增强为PC端样式,更为平滑。
  2. 前端程序员将设计师设计的不同布局,写成CSS文件,适配到不同的分辨率下。同时还要使用资源查询 (Media Queries)根据不同的分辨率,拉取不同尺寸的资源,以加快⻚面的加载速度,并且减少流量的消耗。

软件架构模式MVC

Model(数据层)

模型,它主要是用来表示一些数据结构以及数据的存取,也可以认为是数据层。比如说要存储一个用户信息,那么就可以定义一个Model,包含的字段有用户的昵称、ID、密码、性别等等,然后将数据填充后,存储在数据库中。

View(展示层)

视图,它就是我们肉眼所见到的那些UI样式,程序猿负责将Model中的数据按照UI设计师的要求,把各项字段展示在用户界面上。

Controller(控制层)

控制器,它是Model与View之间的桥梁,负责处理数据与视图之间的一些逻辑关系,从数据层来的数据,并不是直接扔在UI界面上,有的还需要经过一些包装;同样的,用户从View界面上提交的一些数据,也不能立即存放在数据库中,中间需要Controller来做一些例如校验、筛选的处理,最后将我们认为合理的数据存储起来。


抽象、封装、类、实例、对象

一句话联系:“对事物进行「抽象」,从而「封装」为「类」,由「类」可以 生成「实例」或「对象」”。
抽象:抽象是对一系列拥有共同属性或行为的描述。
抽象是面向对象思维方式的最基础逻辑和思维
:类可以定义实例或称为对象。
「类」可以理解成对属性和功能集合的静态描述
实例:是属性真正的载体和功能的执行者。


继承

在代码里,「被继承者」用一万行代码描述自己的功能特性,而「继承者」只需再额外用二十行代码声明自己独有的特性,就可以拥有这一万零二十行代码对应的功能。


网页加载速度优化

网⻚的加载流程

打开一个网⻚,会先拉取一个html⻚面,然后浏览器解析了这个html⻚面后,会根据⻚面的内容,去拉取javascript、css和图片文件,最终根据这些文件,将⻚面渲染出来。如果优化了这些资源的加载速度,那么网⻚展示的速度也就上去了。

网页加载速度优化的方式

1.优化图片资源的格式和大小

一个网⻚中,图片资源的大小占比是最多的,而且单个的文件的大小也很可观。因此,在保证图片质量不变的情况下,尽可能的使用高压缩率的图片格式,图片格式可以按照这个优先级选择webp>jpeg>png> bmp。同时也要根据图片展示尺寸来拉取大小最为匹配的图片 资源,不要没事就把原图拉下来使用。以前我就遇到过这种情况,一个196x196大小区域展示的图片,它的文件竟然达到了几兆,最后才发现把1960x1960分辨率的原图拉下来了。

2.开启网络压缩

大部分浏览器在发出请求时,会带上这个标记「Accept-Encoding: gzip, deflate」,表示这 个浏览器可以接受以gzip压缩方式传输数据,如果你的网⻚服务器也支持gzip压缩数据,那 么数据以gzip方式传输时,会减少70~80%的流量。

3.使用浏览器缓存

同一个站点下面的不同⻚面,往往都会复用一部分资源文件,如果把这些资源文件设置为可 缓存的,那么在刷新或者跳转到另一个⻚面时,都无须再从网络拉取相关资源,这样就大大 加快了网⻚的加载速度。

4.减少重定向请求

有的网站对于不同的终端制作了不同的⻚面,比如说在手机上访问微博,会从weibo.com重 定向至weibo.cn,每一次重定向都会导致浏览器重新发起请求,延⻓加载时间。对于这种 情况,应该尽可能使用响应式设计,一个weibo.com站点覆盖至所有终端。

5.使用CDN存储静态资源

CDN是一种静态内容分发网络,它在每个省,甚至每个城市都部署有自己的服务器,用于 分发这些静态内容,那么当某个城市的用户要拉取某个资源时,他会首选从本地的CDN服务器上拉取,这样可以保证他最快速的获得该资源。据砖家统计,网络资源中有70%的是 静态资源。这就意味着,有70%的内容产生后是不会变化,那么将它们全部放在CDN上 面,可以提升这70%的资源的下载速度。

6.减少DNS查询次数

很多人喜欢把不同的图片挂在不同当域名下,比如说图片A挂在a.pm-teacher.com,图片B挂在b.pm-teacher.com。当一个网⻚同时使用图片A和图片B时,浏览器需要查询两个域 名,要知道,每次解析域名都是会浪费时间的,所以尽可能的将全部图片放在一个域名下。

7.压缩css和js内容

这里说的压缩和第2点并不重复,上面提到的压缩是不改变文件内容的压缩。而css和js中有 大量的空格和变量命名(如hello="hello word";),如果将这些空格去除,并用简单的字母 来代换变量名(如a="hello word";),那么这些css和js原文件的大小也会缩小,这样也对 加快拉取速度是有帮助的。

优化方案的核心

优化方案的核心就3点:减少请求数、减少资源大小、找最快的服务器。