客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
当谈到Web的“高性能”时，很多人想到的是页面加载时间，但其实性能不仅仅是指加载时间，还包括浏览器性能、网络性能、开发效率。在Web前端开发中，性能是一个非常重要的需要考虑的点。本文将介绍一些开发原则和性能准则，这些都是提高Web前端性能的基础。 1. 开发原则 1.1 编写符合当代浏览器性能的代码 为什么浏览器要在第一时间下载页面的HTML内容？首先HTML被解析成一棵DOM树，其次HTML包含了展示页面的其他所有资源文件（样式、脚本、图片）。然后DOM树和CSS样式表（包括自定义的和浏览器默认的）合起来构成渲染树，浏览器开始根据这棵渲染树“画”到屏幕上。 1.2 用CSS来布局并处理边界 使用CSS写样式时，还应该多考虑模块化和可复用性。如果你写的代码是独立于内容的，它就是可复用的。另外从CSS类的命名上也经常可以看出问题，我的经验是尽量以元素的样式，而不是元素的功能去命名，例如给一个发送邮件按钮添加样式CSS类时，.btn-confirm就比.btn-send-mail好一些，前者可以复用到任何确认操作的按钮上（当然.btn-send-mail这个类也可以用于做js事件绑定用，只要它不绑定任何样式）。 1.3 渐进式增强 2. 性能准则 2.1 减少HTTP请求：HTTP请求数量是影响前端性能最明显的一个方面。现代很多浏览器支持4个并行连接，理解浏览器的并行连接机制，把资源文件分发到不同的域名下利用浏览器并发，可以提高加载效率。加载少量的大文件优于加载大量的小文件，因此线上的网站应尽可能合并CSS和JS文件。另外，使用图片精灵（CSS Sprite，俗称雪碧图）把许多图标之类的小图片合到一个大图片，可以减少大量的图片HTTP请求。 2.2 使用CDN加速：如果有能力的话，把静态资源文件如图片、字体、JS库等放到CDN可以大幅提高访问速度。使用CDN应该给每个文件引用加一个时间戳，这样就不用担心缓存在CDN服务器上过期对用户产生影响。 2.3 避免空的src和href属性值：空src的img元素会被JS动态赋值，导致浏览器会发起一个无用的HTTP请求。同样，点击空href的a标签也会导致浏览器发起HTTP请求，通常是重新加载当前页面，这也是许多初学者难以发掘出的bug的原因所在。 2.4 增加过期头：应该给静态资源文件都加上过期头，过期的日期要定得很遥远，基本上可以认为永不过期，这样浏览器就会缓存静态文件。但为了避免用户更新不到最新的文件，最好在文件名上加上版本控制。 2.5 启用gzip压缩：服务器开启gzip压缩可以将文本文件传输流量平均减少70%左右。 2.6 把CSS放在<head>内，把Javascript放在<body>尾部：浏览器会同时解析HTML和渲染元素，把CSS放到前面可以保证先渲染的一部分元素样式是正确的，而把CSS放到后面会引起大量的浏览器重绘。要把script标签放到尾部，因为浏览器会预处理js文件，把js文件放到头部会延迟页面元素的渲染，让用户觉得页面打开变慢了。 2.7 避免使用CSS表达式：CSS表达式只在IE5、IE6、IE7被支持，使用CSS表达式不仅比正常的写法要长得多，还会严重影响页面渲染效率——只要页面一滚动，甚至移动鼠标时，表达式就会进行计算，这是完全没有必要的。 2.8 移除不使用的CSS语句：实际项目中可能会有一个common.css来让每个页面都引用，表示那些公共样式，应该尽量让这种公共文件的利用率达到最大。 2.9 对Javascript和CSS进行代码压缩：压缩代码可以显著节省带宽并提高加载速度。最好在部署到线上的时候利用工具对代码进行压缩。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论