web性能优化

1、浏览器请求并发限制:每个浏览器对同一域名下的资源的请求有并发限制,例如chrome就是最多为6条:
(1)搭建node服务器,接受图片请求服务:
web性能优化_第1张图片
(2)前端去node服务器那边同时请求8张图片:
web性能优化_第2张图片
(3)在chrome控制台network中查看,发现同一时间线下只能最多处理6个请求
web性能优化_第3张图片
优化:采用多域名访问的方式,因为浏览器对同一域名的并发请求有限制,那么可以将图片等静态资源放在另外不同域名的服务器中,那么这些请求就可以并发了。

2、HTML层级优化:
(1)减少HTML的层级嵌套:层级嵌套越多,浏览器遍历DOM所需的时间就越长,在Vue这种框架的组件中,组件也不应该嵌套过多,一个是遍历时间会变长,还有一个是父子组件间的通讯代价变大。
(2)减少空标签、无用标签的滥用:可以用after,before等伪元素代替
(3)避免在HTML标签中引用style属性, 浏览器解析HTML文件会增加压力。
(4)使用模板引擎,像是Vue等框架都自带模板语法。模板语法做的事情:给它一个模板和数据源,返回一个字符串,然后再把这个字符串写入页面(只触发一个回流,如果通过传统方法动态写入HTML,会触发多次回流)
(5)使用是异步加载,@import是同步加载):
prefetch可以利用浏览器空闲的时候,就预加载将来页面可能用到的资源,然后缓存起来。可以提高后续页面的首屏速度。
preload可以利用浏览器空闲的时间,就预加载当前页面需要的资源,可以提升当前页面的加载速度。
(6)标签: 给标签设置宽高100%,并给它外套一个

并设置固定宽高。可以避免图片替换时候的回流。给img添加alt属性,可以优化SEO,更容易被搜索引擎搜索。
(7)src属性:像是

你可能感兴趣的:(前端性能优化)