好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

  • 客服QQ
  • 官方微信

    好程序员

    专注高端IT职业培训

[HTML5] 好程序员web前端培训分享Web前端性能优化

[复制链接]
34 0
叶子老师 发表于 昨天 14:14 | 只看该作者 |阅读模式 打印 上一主题 下一主题
  好程序员web前端培训分享Web前端性能优化Web前端性能优化的结果直接影响到用户体验,而用户体验则与网站的满意度息息相关,所以,Web前端的优化非常重要。虽然Web前端工程师也把这项工作当做重中之重,但是令他们感到棘手的是不知道从哪些方面去着手优化。其实Web前端优化并不难,只需要掌握一些实用的技巧,就可以轻松应对。接下来,为大家提供一些优化的方法。
  一、减少HTTP请求数
  (1)避免重定向:重定向说明需要客户端采取进一步操作才能完成请求,请求时间会延长。所以输入URL时应使用最完整的、最直接的地址。
  (2)使用缓存的机制:主要有数据库缓存、服务端缓存(反向代理和CDN缓存)、浏览器缓存。
  二、图片懒加载
  在页面图片非常多的情况下,可以使用懒加载。只加载第一屏的图片,当用户通过滚动访问后面的内容时再加载相应图片。方法是先用一张极小的占位图代替图片,占位图只需下载一次,将原本图片的src存储在另一个属性中,判断当图片快进入可视区域就将路径赋值给src并下载图片进行展示。
  三、代码的优化
  (1)页面的结构:CSS放在HTML内容上部,JavaScript放在HTML内容下部。可以使用preload提前解析资源的DNS。由于浏览器是自上而下读取内容的,因此放置资源的位置会影响网站的访问速度。比如,如果将script标签放在HTML内容的前边,浏览器就会先调用JavaScript解释器对JS进行解析,完成之后才会渲染其余的HTML内容。对用户而言,能看到的是HTML的内容,所以这么做会导致页面可用性的延迟。
  (2)JavaScript优化:比如减少对DOM的操作,减少重排和重绘,减少作用域链查找,慎用eval函数等。JS代码和CSS的优化要求前端开发人员对页面渲染原理清晰了解以及对基础知识掌握扎实。
  (3)CSS优化:减少使用通配符,提取公用样式增强可复用性,选择器准确可减少匹配时间,适度使用内联样式。
其实更多情况下,Web前端优化的难易程度取决于你的熟练程度以及实操经验。而好程序员Web前端课程更注重实战项目的开发,带领学员深入学习Web前端,为他们传授更多有用的技术点,同时也为他们未来职场的发展带来更多机遇与可能。
好程序员web前端培训官网:http://wzpajs.com/html5_class.shtml

精彩内容,一键分享给更多人!
收藏
收藏0
转播
转播
分享
淘帖0
支持
支持0
反对
反对0
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启