web常用性能优化

1. 浏览器对同一个协议+域名组合都有并发请求数的限制, 大概8个左右, 可以申请多个域名增加并发请求数

2. 跨域有时会发生预检查的请求,也就是说发两次清求, 一次为OPTIONS不带请求体的请求, 一次真实请求,下面的情况不会发生预检查:使用GET、POST、HEAD,请求头限制为Accept、Accept-Language、Content-Language、Content-Type (需要注意额外的限制)、DPR、Downlink、Save-Data、Viewport-Width、Width, 并且Content-Type限制为text/plain、multipart/form-data、application/x-www-form-urlencoded

3.禁用所有的同步请求, 否则页面会卡顿, 严重影响用户体验, 如果多个请求有依赖可以参考Promise.all

4.小图片尽量合并成一个图片, CSS、JS脚本尽量合并压缩,减少请求数

5.缓存非常重要, 也是投入最少成效最大的一个优化方案, 所有静态资源URL不要带随机数, 服务端或客户端开启缓存, 缓存一般有两种200 form cache 取内存不发请求, 304 服务器响应资源没有改变, 发请求但不下载资源。

6.cookie只存储必要的数据,也就是说每个请求都会传的数据, 比如服务端token。 浏览器每次请求都会带上cookie, 如果cookie过大会严重影响性能以及服务器的压力

7.事件委托, 利用DOM事件冒泡原理, 绑定父节点或祖先节点统一处理事件。 DOM绑定事件虽然不会损耗太多的性能, 但是过多的DOM节点绑定就不一样了, 比如表格的每个单元格都绑定单击、双击、获取焦点等等, 数据量一大肯定会非常卡顿

8.虚拟DOM, 对比改变后的DOM树结构, 并对DOM树结构进行局部更新或增加。 DOM树的修改和增加代价非常大, 最好把更新操作限制在最小范围。 通俗的讲就是只替换innerText,attrValue,不替换element和innerHtml, 这个只是说渲染简单数据大的页面, 如果复杂可以参考Virtual DOM, 最简单的方法就是换成MVVM框架

9.大量下载资源的时候(首页)尽量开启长连接(h5默认开启),长连接与服务器握手确认连接之后可同时下载不同资源, 好处是只需握手一次就可以下载多个资源,如果不开启每个资源都会重新握手, 三次握手连接四次挥手关闭、传输数据与下载数据客户端与服务器一共九次来回,加上浏览器并发请求数限制, 如果没有做CDN加速客户端离服务器较远的地方会非常慢, 可以访问一些老版外国网站观察

10.服务端开启GZIP压缩, GZIP压缩对文本压缩率可以高达80%, 比如HTML、CSS、JS文件

11.对于一些不是立即使用的JS文件, 可以使用懒加载, 原理是把<script>标签追加到document里。如果直接把<script>标签写上会推迟了 DOMLoaded和window.onload 事件的触发时机,可以参考百度统计的一段代码:


image.png

12.图片像素分割, 16、32、64、128根据业务需求进行分割, 能使用最小的绝不用大的。一般网站快慢很大因素都是图片过大过多。

13.在高并发的时候, 对于一些不太重要的动态资源来说设置非常短的缓存也是解决服务器性能的办法,比如每秒请求数达到上百或上千, 设置1~2秒的缓存可以大量缓解服务器和数据库的压力, 其次要考虑缓存穿透后网络波动带来的影响

14.如果你能提前预知用户将到去某个页面, 你可以简单的发个异步请求拉取某个页面的数据, 最简单的方法是什么也不用做, 别看小一个请求,它会把资源的域名解析到的IP缓存起来, 把静态资源缓存起来,等用户进到下一个页面只会下载动态的资源

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266