Web前端性能优化的实用技巧分享
|
Web前端的优化是非常重要的，也是每一位Web前端开发工程师所重视的，毕竟Web前端性能优化的好与否是直接影响到用户体验的。用户体验的好与否是直接影响用户对网站的满意度的。Web前端性能优化的好的网站才能达到理想中的效益。
那么在Web前端性能优化的时候怎么做才比较好呢?Web前端性能优化有没有什么技巧呢，以下为大家推荐三个Web前端性能优化的实用技巧。 1、减少HTTP请求数： (1)避免重定向：重定向就是说明需要客户端采取进一步操作才能完成请求，请求时间就会延长。所以输入URL时应使用最完整的、最直接的地址，比如输入www.baidu.com而不是baidu.com。 (2)使用缓存的机制：主要有数据库缓存、服务端缓存(反向代理和CDN缓存)、浏览器缓存。 2、图片懒加载 页面的图片非常的多，可以使用懒加载。只加载第一屏的图片，当用户通过滚动访问后面的内容时再加载相应图片。方法是先用一张极小的占位图代替图片，占位图只下载一次，将原本图片的src存储在另一个属性中，判断当图片快进入可视区域就将路径赋值给src并下载图片进行展示。 3、代码的优化 (1)页面的结构：CSS放在HTML内容上部，JavaScript放在HTML内容下部。可以使用preload提前解析资源的DNS。由于浏览器是自上而下读取内容的，因此放置资源的位置会影响网站的访问速度。比如，如果将script标签放在HTML内容的前边，浏览器就会先调用JavaScript解释器对JS进行解析，完成之后才会渲染其余的HTML内容，对用户来说，能看到的是HTML的内容，所以(1)这么做会导致页面可用性的延迟。另外，CSS是对页面节点进行修饰的，如果CSSOM未构建之前就进行了布局，等到CSSOM构建出来，如果CSS修改了节点的布局，就会发生重排，需要重新计算布局并绘制。 (2)JavaScript优化：比如减少对DOM的操作，减少重排和重绘，减少作用域链查找，慎用eval函数等等。JS代码和(下面的)CSS的优化主要要求前端开发人员对页面渲染原理有清晰的了解、对基础知识的掌握和良好的编程习惯。 (3)CSS优化：比如减少使用通配符‘*’，提取公用样式增强可复用性，选择器准确可减少匹配时间，适度使用内联样式。 【编辑推荐】
点赞 0 （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
