美文网首页
前端性能

前端性能

作者: 阿凯_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寻址 缓存

10 最小化javascript 和css

11.避免重定向

 301 被移动了   永久重定向  seo智能
 302  被找到了 临时重定向


12.移除重复的脚步
13.配置实体标签ETag  版本号

14.使用ajax缓存

图片可以 尽量用 css替换

不同的图片类型 加载效果不一样

css-sprites
  将多个图片放在一张图上,采用background-position去控制定位来显示

引入picture 像素 响应式图片
视频

查看重绘

查看

借鉴慕课网

相关文章

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • 前端性能优化(一)

    前言 最近跟同事一直忙于关于前端项目的性能分析以及性能优化,前端性能直接影响了用户的体验,针对于前端性能问题,一直...

  • 2020-04-11

    前端工程化相关 前端动画相关 优化前端性能

  • 关于前端性能优化问题详解

    关于前端性能优化问题详解 出处:http://segmentfault.com/blogs 前端性能优化指南 AJ...

  • Chrome 性能监控 性能分析

    Chrome开发者工具之JavaScript内存分析 前端性能优化 —— 前端性能分析 Chrome DevToo...

  • 前端面试必问及加分点---性能优化篇

    如何进行网站性能优化 你有用过哪些前端性能优化的方法? 谈谈性能优化问题 代码层面的优化 前端性能优化最佳实践

  • 前言

    这几年,前端的发展越来越快。前端三大主流框架React,vue,ng中,从性能上vue的性能最好,React性能略...

  • 2019-10-22

    2018 前端性能优化清单

网友评论

      本文标题:前端性能

      本文链接:https://www.haomeiwen.com/subject/lstewctx.html