web页面性能优化

请求和响应

减少http请求。

一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。
资源上由于每个请求都需要携带数据,因此每个请求都需要占用带宽。

使用CDN加速(缓存)。

CDN(内容发布网络)是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容。其本质上是一个缓存,而且将数据(js、css、image等静态资源)缓存在离用户最近的地方,使用户以最快速度获取数据,即所谓网络访问第一跳。

使用内容传递网络(CDN)提供 JavaScript 文件,CDN 不仅可以提高性能,它还可以为你管理压缩和缓存。

当用户发起访问时,他的访问请求被只能dns定位到最近的缓存服务器,当服务器中没有缓存时,就会去请求最近的服务器中的资源。

利用浏览器缓存

通过设置 HTTP 响应报文头使 JavaScript 文件可缓存,将网络资源存储到本地,下次请求资源时,如果命中可直接在本地获取,不需要重新向服务器请求资源

避免重定向。

当页面发生了重定向,就会延迟整个HTML文档的传输。在HTML文档到达之前,页面中不会呈现任何东西,也没有任何组件会被下载。

重定向和404将浪费加载请求。

HTML

合理使用内联。

脚本和样式,应按需选择内联或者外链。对于访问少、样式和脚本复用少的页面,可以考虑使用内联样式从而减少 HTTP 请求。

但如果页面访问频繁,样式脚本在多个页面经常复用,使用外链则是最优选择。

这样浏览器可以缓存它们,下次加载时可以直接从缓存加载。

减少dom

过多的DOM元素会影响渲染、加载、执行。除了精简页面结构外,还可以适时删除不必要的DOM元素(页面内已经不会再访问的元素),又或者可以懒加载(不一定会使用到的元素,如登录框)。

优化dom操作

  • 使用事件委托来减少事件处理器的数量
  • 减少重绘和回流

如果需要在 DOM操作时添加样式,尽量使用 增加 class 属性,而不是通过 style 一个一个地操作样式。

删除HTML的默认属性。

js

优化js。

  • 将所有script标签放置在页面的底部,紧靠 body 关闭标签的上方。因为页面解析生成dom树时遇到script标签会停下去加载执行js。此法可以保证页面在脚本运行之前完成解析。
  • 将脚本成组打包。页面的
-------------本文结束 感谢您的阅读-------------