web性能优化指南

前端性能优化,是每个前端必备的技能,优化自己的代码,使自己的网址可以更加快速的访问打开,减少用户等待,今天就会从几个方面说起前端性能优化的方案,

看下面的一张图,经常会被面试官问,从输入URL到页面加载完成,发生了什么?

 

web性能优化指南_第1张图片

 

1.用户输入www.baidu.com
2.浏览器通过DNS。吧url解析ip
3.和ip地址建立TCP连接,发送HTTP请求
4.服务器接收请求,查库,读文件等,拼接好 返回的HTTP响应
5.浏览器收到首屏html,开始渲染,
6.解析html位dom
7.解析css为css-tree
8.dom+css生成render-tree绘图
9.加载script的js文件
10.执行js文件
 
DNS缓存
 DNS是“域名系统”的缩写,它的工作是将域名和主机名转化为服务器主机的 IP 地址;
  DNS查找流程:浏览器缓存 — 本地hosts文件 — 本地DNS解析器缓存 — 本地DNS服务器 — 本地DNS服务器设置(是否设置转发器)— 根DNS服务器

 浏览器缓存之客户端缓存

    无需请求的memory cache,disk cache;

    需要发请求验证的Etag、Last-Modified304;

    H5新增的 localStorage、sessionStorage;

  合理利用以上缓存,可以很大程度上提高前端性能。

  网站存在缓存怎么解决?
  1.文件加哈希
       1.上线之后,要求用户强刷新,这种问题,用文件名加指纹方式解决
       2. a.hash.js  hash是整个a.js文件的md5值,文件内容不变,hash不变,缓存生效
  2.缓存文件怎么解决
   1.加时间戳

你可能感兴趣的:(web性能优化指南)