web性能优化（理论）

什么是性能优化？

就是让用户感觉你的网站加载速度很快。。。哈哈哈。

分析

让我们来分析一下从用户按下回车键到网站呈现出来经历了哪些和前端相关的过程。

缓存首先看本地是否有缓存，如果有符合使用条件的缓存则不需要向服务器发送请求了。
DNS查询
建立TCP链接
发送HTTP请求
****** 后台进行相关处理，前端等待 ******
接收缓存
接受完成，浏览器开始解析HTML
- 浏览器按行解析HTML，首先解析DOCTYPE，看是HTML还是XML。。。
- 不同的浏览器解析完一行，做出的响应不一样，有的会直接渲染有的则等到完全解析完（包括css）再进行渲染。
- CSS在渲染的时候Chrome会阻塞HTML渲染，IE不会。JS则一定会阻塞HTML的解析。注意有最大同时下载数量。

对策

对DNS ---- 减少DNS查询次数（尽量少的域名）

对TCP链接

连接复用 ---- 在请求头中设置 xhr.setRequestHeader("Connection", "keep-alive");

大量的连接每次连接关闭都要三次握手四次分手的很显然会造成性能低下，因此http有一种叫做keepalive connections的机制，它可以在传输数据后仍然保持连接，当客户端需要再次获取数据时，直接使用刚刚空闲下来的连接而不需要再次握手。

因为发送请求时会带上cookie，所以可以减小其体积来优化速度，再就是用没有cook ie的域名（比如CDN）
服务器端设置cache-control，在设置的时间内可以直接不发请求。
同时发送多个请求，请求的数量限制是对于一个域名来说，因此可以适当的增加请求的域名来减少下载的排队时间。

对接收响应

使用Etag，服务器将接收到的Etag值与服务器存储的值做对比，如果相同则返回304，可以尽量少的减少传输的体积。
在请求头中设置Accept-Encoding: gzip, deflate,这样服务器传送给客户端的就是gzip编码的response（文件后缀是.gz）。

其他优化方法

将CSS放到 <head>,将js文件放到 <body>的最后面。CSS放前面是因为可以让页面一加载出来就可以有样式，而且有的浏览器即使放在最后他也要等到css加载完才显示页面。而js放在最后是因为他会阻塞HTMl的渲染。在HTML渲染之前准备好js，我们的js也获取不到DOM节点，而且没有js我们的页面一般也不会有碍观瞻。
懒加载
预加载
避免空src的图片

接下来说一下CDN

CDN即Content Delivery Network(内容分发网络)。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

web性能优化（理论）相关推荐

web性能优化---图片优化
先来看一道易错题 ``` let a = {a: 1} let b = a // 相当于把b的地址指向a的内容 a.x = a = {n: 2} //由于a.x = a把a的地址指向了a.x 然而 ...
Apache的压力测试以及web性能优化的常用知识总结
这篇文章主要介绍了Apache的压力测试以及web性能优化的常用知识总结,笔记由<构建高性能web站点>这本高人气书籍整理而来,需要的朋友可以参考下什么是带宽? 误解:"数据 ...
[译]Web 性能优化：图片优化让网站大小减少 62%
这是 Web 性能优化的第二篇,上一篇在下面看点击查看: Web 性能优化: 使用 Webpack 分离数据的正确方法图像是web上提供的最基本的内容类型之一.他们说一张图片胜过千言万语.但是如果你 ...
移动web性能优化笔记
移动web性能优化最近看了一些文章,对移动web性能优化方法,做一个简单笔记笔记内容主要出自移动H5前端性能优化指南和移动前端系列--移动页面性能优化转载于:https://www.cnblo ...
前端小白浅谈seo优化以及web性能优化方案
写在前面这是好久之前的工作了,之前还没用vue spa 做项目的时候,都是用的原生js写项目,纯html,css,js写项目,真的是每个页面引用css,js各种文件写到头痛, 那个时候做一个大型网站 ...
web性能优化以及SEO
web性能优化 1.尽量减少HTTP请求次数终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数 ...
前端利器，6 款开源 Web 性能优化辅助工具推荐
转自:原文链接 Web 性能优化是一个老生常谈的话题,也是前端页面开发十分重要的部分.当页面加载速度越慢,用户流失的概率就越大,性能和交互直接影响用户体验. 下面推荐几款 Web 性能优化辅助工具推荐 ...
前端开发：Web性能优化有哪些方法？
Web性能优化,主要分为前端和后台两个部分性能优化,后台性能优化决定了Web能不能用,前端优化决定了其好不好用,也就是牵涉到前端用户体验和Web易用性等情况,所以前端性能与用户体验是有着极大的关联的. ...
Web性能优化方法总结
web性能优化一.页面优化 1.减少HTTP请求数量 1.从设计实现层面简化页面:尽量将页面设置成百度首页那样,保持页面简洁.减少资源的使用. 2.合理设置HTTP缓存:合理设置缓存可以大大地减少H ...
Web性能优化：基本思路和常见工具
Web性能优化听了荣华的演讲之后,我对性能优化有了更深层次的认识. 性能优化的重要性性能优化是为了赢得用户,为了降低成本. 性能优化思路 Web常见优化点 Java常见排查工具

web性能优化（理论）

什么是性能优化？

分析

对策

对DNS ---- 减少DNS查询次数（尽量少的域名）

对TCP链接

对接收响应

其他优化方法

接下来说一下CDN

web性能优化（理论）相关推荐

最新文章

热门文章