前端性能

作者: 阿凯_8b27 | 来源:发表于2020-08-12 10:32 被阅读0次

1.采用goole的插件分析，解决性能

2.前端输入url做的事

url统一资源定位符，唯一标识，确认唯一个存在的事务，可能是方法

将一个文档从后台下载到本地，浏览器进行解析

域名解析是从右往左解析，最后面有个. 执行公网,找到dns，匹配ip，

webserver

301和302的区别
01 Moved Permanently 被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一。如果可能，拥有链接编辑功能的客户端应当自动把请求的地址修改为从服务器反馈回来的地址。除非额外指定，否则这个响应也是可缓存的。

302 Found 请求的资源现在临时从不同的URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的。

解决浏览器缓存图片，js问题,在请求后面加上？时间戳，每次请求路径变化，浏览器就会重新去下载

keep-alive，多路由复用，tcp三次握手

GZIP压缩

图片压缩
cdn

js 复用：提取共同的js，工具箱方法
css复用：定义基础样式，制定换肤css，制定各个浏览器之间的交互rest.css 不同样式表整合
html复用：404页面。浏览器不安全页面，共同html
媒体文件：一个媒体文件复用多次
模块复用：引入js，模块不与其他外部资源有关系，自己能独立渲染一个画面
ifame：坏处二次请求，好处不影响当前父页面

同步加载：从第一次请求带过来的html，

facebook的优化 bigpipe
占位空的，根据id请求资源加载
quickling

前端通常性能解决方案，雅虎军规

1.尽量减少http请求

2.使用cdn （内容分发网络）

3.添加Expire/Cache-Control头

4.Gzip压缩
5.将css放在页面最上面避免重画
6.将script放在页面最下面
html
head
title
style
link
script
div
img
完毕
7.避免css中使用expressions
动态计算css的宽高
8.吧javascript和css放在外部文件中
9.减少dns查询 dns寻址缓存