关于前端优化

一.尽量减少HTTP的请求数
  1)将css文件和js文件合并,但由于css结构和共用等方面的考虑
    阿里的解决方案是,开发时,css和js依然分开开发,在后台部署进服务器时,对其进行合并
    但在访问量过大情况下:则建议将css和js直接写在页面文件html中,而不是外部引用
  2)将一些图标,则可采用为字体图标
  3)背景图片啥的,则可用一些工具css sprites将其背景图片合并为一张(用的时候在进行截取)

二.使用CDN(内容分发网络)
  通过中心平台的负载均衡、内容分发、调度等功能模块,使用户访问就近的边缘服务器
  DNS负载均衡:在DNS服务器中为同一主机名配置多个ip地址,DNS服务器对具体的url进行负载均衡,使请求发送到不同的主机服务器上.

三.添加Expire/Cache-Control头:
  通过设置Expires header头来缓存这些文件,Expire就是通过header报文来指定特定类型的文件在浏览器中的缓存时间
  其中通过服务器端脚本设置Cache-Control和Expires可以完成。

  如,在php中设置30天后过期:
    pHeader("Cache-Control: must-revalidate"); $offset = 60 * 60 * 24 * 30; $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT"; Header($ExpStr);
    但注意,需要判断清楚哪些需要缓存,哪些不需要缓存,如果服务器经常性更改的则不需缓存,因为客户端需很久才能感觉到服务器端的变化

四.启用Gzip压缩:
  首先,一些需传输的文件先在服务器中进行Gzip压缩,因为很多浏览器都支持Gzip解压缩,

五.将css文件放在页面的最上面
  1.因为在css中,高优先级的css样式可以替换掉低优先级的css,然后在ie中,css不加载完全,会阻止页面的显示,但火狐中,不会,但最后的css可能会导致页面重画

六.将javaScript放在页面的最下面:
  防止script的阻塞导致页面下载的阻塞

七.尽量不在css中使用表达式样式

八.把js文件和css文件都写在外部,也有内联(直接写在标签中的)

九.减少DNS查询:
  在域名和ip地址之间的转换工作称为域名解析,也称为DNS查询(一个域名可能代表着多个ip地址,多台主机),DNS通过负载均衡找到具体的主机
  雅虎的建议是一个页面的域名数量尽量控制在2-4个.

十.避免重定向:
十一.移除重复的脚本
十二.配置实体标签ETag,全称为:Entity Tag,意思是实体标签
  用于判断客户端所用的内容版本与服务器端的版本是否一致.
十三.使 AJAX 缓存:ajax在处理数据时对一些重复相同的数据会进行一个缓存的操作
  解决当服务器端已更改,但ajax还从缓存中读取数据的问题:
  1.在进行缓存时,保存文件最后一次修改时间,根据服务器端的文件最后一次修改时间判断是否读取缓存
  2.直接禁用缓存:
    > 客户端设置: 在ajax发送请求前加上xmlHttpRequest.setRequestHeader(“Cache-Control”,”no-cache”);
    > 服务器端设置:在服务端加上header(“Cache-Control: no-cache, must-revalidate”);

 

posted @ 2020-03-17 12:15  whhhd  阅读(92)  评论(0编辑  收藏  举报