起航学习网

WEBWeb前端开发性能优化一直是WEBWeb前端开发工程师们所追求的，做一个好的作品出来，优化是必不可少的，今天我们就来聊聊，2021年Web前端开发优化的相关内容。

一、Web前端开发优化最佳实践之内容

1.尽量减少HTTP请求;

合并文件，比如把多个css文件合成一个;

CSSSprites利用CSSbackground相关元素进行背景图绝对定位;

图像地图(在一个图像上划分不同区域映射不同的链接);

内联图像(使用data：URLscheme在实际的页面嵌入图像数据);

2.减少DNS查找：

DNS查询完成之前浏览器不能从这个主机下载任何任何文件。

方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询;

3.避免重定向：多余的中间访问(不是绝对的避免，尽量减少)

定义：重定向用于将用户从一个url重新路由到另一个url;

损伤：重定向的延迟也很严重，因为它延迟了整个html文档的传输，在html文档到达之前，页面中不会呈现出任何东西，也没有任何组件会被下载，在用户与html文档之间插入重定向延迟了页面中的所有东西;

WEBWeb前端开发

4.使Ajax可缓存

Ajax页面缓存是ajax处理数据时对一些重复相同数据进行一个缓存操作，这种设计使客户端对一些静态页面内容的请求，比如图片，css文件，js脚本等，变得更加快捷，提高了页面的响应速度，也节省了网络通信资源;

5.非必须组件延迟加载，未来所需组件预加载(异步);

6.减少DOM元素数量;

7.切分组件到多个域;

主要的目的是提高页面组件并行下载能力，但不要跨太多域;

8.最小化iframe的数量

iframes提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括script和css的DOM元素的创建慢了1-2个数量级;

使用iframe的页面一般不会包含太多iframe，所以创建DOM节点所花费的时间不会占很大的比重。但带来一些其它的问题：onload事件以及连接池(connectionpool)。

Iframes阻塞页面加载

及时触发window的onload事件是非常重要的。onload事件触发使浏览器的“忙”指示器停止，告诉用户当前网页已经加载完毕。当onload事件加载延迟后，它给用户的感觉就是这个网页非常慢。

window的onload事件需要在所有iframe加载完毕后(包含里面的元素)才会触发。在Safari和Chrome里，通过Java开发Script动态设置iframe的src可以避免这种阻塞情况。

文章出自：http://qh.itpxw.cn/peixun/web/202185148.html

文章标题：盘点Web前端开发性能优化内容

免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉