Web 性能优化

KavenFan 发布于2019-08-23 12:14 / 1386人阅读

摘要：然而脚本需要查询信息，所以脚本还必须等待树构建完才可以执行。这将相当于阻塞了脚本，脚本阻塞了树构建。是这样子的关联才对。

前记 好久都没有写博客了，罪过罪过，不能懒不能懒，这次记录一下web的性能优化方法，说到性能优化，就不得不从当你输入网址按下回车的那一刻说起 性能分治法 把大问题分成小问题分别处理 按下回车发生了什么

当然是先去缓存中看看啦

缓存没有，那就先DNS查询找IP地址

找到IP地址先建立TCP链接

建立后就可以发送HTTP请求了

后台处理，我们等待

接收HTML文件

DOCTYPE 确定解析的语法

逐行解析

有些标签在不同浏览器上显示

CSS同时下载，解析一个接一个（IE同时4个，谷歌同时6个）

JS并行下载，解析按顺序，但是JS执行一定阻塞HTMl渲染

之后就是构建DOM树，CSS和JS了

解决方法 1、缓存 DNS查询后会留下缓存，下次访问后就会无需查询，另外设置响应头Cache-Control，使文件缓存，这样只要网站文件不更改就可以使用缓存 2、DNS查询 DNS查询会耗费时间，所以，我们要优化就要减少DNS查询，尽量减少域名 3、建立TCP链接 每次发送HTTP请求都建立TCP连接的话就太耗费时间了，所以我们可以使用连接复用，只需要在HTTP请求头加上keep-alive，在HTTP/2.0 甚至可以使用多路复用 4、发送HTTP请求 我们都知道发送请求是会带上cookie的，所以减少cookie体积可以加快发送速度，另外，浏览器是可以同时发送多个请求，但是相同域名发送请求会有限制，所以我们可以增加域名，但是这样就和第一步的解决方法冲突了，于是我们需要自己来权衡利弊 5、接收响应 设置ETag，这样只要响应文件未更改，就可以返回一个304表示未更改，使用以前的文件，也可以使用Gzip压缩文件，降低文件大小，接收到后再解压文件，这样可以加快下载速度 6、DOCTYPE 不能写错，这是确定渲染语法的，必须要写 7、CDN加速 使用CDN可以增加同时请求数量，也可以减少cookie体积，因为没有cookie。使用CDN可以加速，内容缓存在就近的地方，动态DNS，IP就近返回，内容分布网络，请求快 8、CSS放在head，JS放在body最后 之所以把link标签放抬头而script放body尾部，是因为浏览器遇到script标签时，会去下载并执行js脚本，从而导致浏览器暂停构建DOM。然而JS脚本需要查询CSS信息，所以JS脚本还必须等待CSSOM树构建完才可以执行。这将相当于CSS阻塞了JS脚本，JS脚本阻塞了DOM树构建。是这样子的关联才对。

GPU云服务器云服务器 web性能优化性能优化优化系统性能网站性能优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98147.html

前端性能优化

摘要：端优谈谈关于前端的缓存的问题我们都知道对页面进行缓存能够有利于减少请求发送，从而达到对页面的优化。而作为一名有追求的前端，势必要力所能及地优化我们前端页面的性能。这种方式主要解决了浅谈前端中的过早优化问题过早优化是万恶之源。优化向：单页应用多路由预渲染指南 Ajax 技术的出现，让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用。在一个单页应用中，往往只有一...

Dean 2019-08-21 18:19 评论0 收藏0
Web 性能优化：理解及使用 JavaScript 缓存

摘要：想阅读更多优质文章请猛戳博客一年百来篇优质文章等着你这是性能优化的第篇，上一篇在下面看点击查看性能优化使用分离数据的正确方法性能优化图片优化让网站大小减少性能优化缓存事件来提高性能性能优化种优化和加快网站速度的方法随着我们的应用程序的不断增 showImg(https://segmentfault.com/img/bVbp4cY?w=947&h=424); 想阅读更多优质文章请猛戳Gi...

endiat 2019-08-23 16:09 评论0 收藏0
web性能优化

摘要：性能优化是一个比较大的一个问题，不是一天两天就能学会的，需要在日常中思考和学习。毫秒必争，前端网页性能最佳实践这是一篇讲关于性能优化的。和的压缩对页面引用的样式和文件进行压缩，合并一些和文件减少请求等，也是性能优化的一个方法。 web性能优化是一个比较大的一个问题，不是一天两天就能学会的，需要在日常中思考和学习。先收藏一篇文章，以后有时间在慢慢研究。毫秒必争，前端网页性能最佳实践这是一...

Brenner 2019-08-23 15:23 评论0 收藏0
web性能优化

摘要：性能优化是一个比较大的一个问题，不是一天两天就能学会的，需要在日常中思考和学习。毫秒必争，前端网页性能最佳实践这是一篇讲关于性能优化的。和的压缩对页面引用的样式和文件进行压缩，合并一些和文件减少请求等，也是性能优化的一个方法。 web性能优化是一个比较大的一个问题，不是一天两天就能学会的，需要在日常中思考和学习。先收藏一篇文章，以后有时间在慢慢研究。毫秒必争，前端网页性能最佳实践这是一...

iamyoung001 2019-08-02 14:17 评论0 收藏0
[译] 唯快不破：Web 应用的 13 个优化步骤

摘要：译文地址译唯快不破应用的个优化步骤前端的逆袭知乎专栏原文地址时过境迁，应用比以往任何时候都更具交互性。使用负载均衡方案我们在之前讨论缓存的时候简要提到了内容分发网络。换句话说，元素的串形访问会削弱负载均衡器以最佳形式欢迎关注知乎专栏 —— 前端的逆袭欢迎关注我的博客，知乎，GitHub。译文地址：【译】唯快不破：Web 应用的 13 个优化步骤 - 前端的逆袭 - 知乎专栏原文地...

haobowd 2019-08-19 18:37 评论0 收藏0