ITPub博客

首页 > > > 分享Web前端性能优化

分享Web前端性能优化

作者:else 时间:2019-10-08 09:58:28 0 删除 编辑

分享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 前端优化的难易程度取决于你的熟练程度以及实操经验。

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/2318/viewspace-3154304/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-07-17

  • 博文量
    271
  • 访问量
    19562