请求和响应
减少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。此法可以保证页面在脚本运行之前完成解析。
- 将脚本成组打包。页面的