天津web前端培训,我转的锦鲤有点肥?
今天少吃一粒米,明天就能瘦半斤?今天转发大锦鲤,明天幸运找到你?
盆友,别想那些有的没的了,来看一道web前端面试中的题——性能优化的方法。
1. 优化 CSS 性能
CSS,即级联样式表,能从 HTML 描述的内容生成专业而又整洁的文件。很多 CSS 需要通过 HTTP 请求来引入(除非使用内联 CSS),所以你要努力去除累赘的 CSS 文件,但要注意保留其重要特征。
如果你的 Banner、插件和布局样式是使用 CSS 保存在不同的文件内,那么,访问者的浏览器每次访问都会加载很多文件。虽然现在HTTP/2 的存在,减少了这种问题的发生,但是在外部资源加载的情况下,仍会花费较长时间。要了解如何减少HTTP 请求以大幅度缩减加载时间,请阅读WordPress 性能。
此外,不少网站管理员在网页中错误的使用 @import 指令 来引入外部样式表。这是一个过时的方法,它会阻止浏览并行下载。应该选用link 标签,它也能提高网站的前端性能。通过 link 标签请求加载的外部样式表不会阻止并行下载。
2.减少外部HTTP请求
在很多情况下,网站的大部分加载时间来自于外部的 Http 请求。外部资源的加载速度随着主机提供商的服务器架构、地点等不同而不同。减少外部请求要做的就是简略地检查网站, 影响访问者体验的成分。比如不必要的图片、没用的 JavaScript代码、过多的 css
以及多余的插件。去掉这些多余的成分之后,再对剩下的内容进行整理,如,压缩工具、CDN 服务和预获取(prefetching)等。
3.使用预先获取
在真正需要之前,通过取得必需的资源和相关数据来改善访问用户的浏览体验,主要有3类预先获取:链接预先获取、DNS 预先获取、预先渲染。
在你离开当前 web 页面之前,使用预先获取方式,对应每个链接的 URL 地址,CSS,图片和脚本都会被预先获取。这使访问者能在短时间内使用链接在画面间切换。
幸运的是,预先获取很容易实现。根据你想要使用的预先获取形式,你只需在网站 HTML 中的链接属性上增加rel="prefetch",rel="dns-prefetch",或者 rel="prerender" 标记。
4. 使用轻量级框架
可以尝试使用一个好的前端框架来避免许多不必要的优化错误。它要在提供所需功能的同时保持轻量。以下是几项可以加快读取的轻量级框架:Pure,Skeleton,Milligram。
框架并不能代替网页设计,编程和维护。当你使用了一个框架,要确保它不会被冗余的代码、大图片和过多的 HTTP 请求破坏。
大家注意,这不是去幼儿园的车,老司机带你去诚筑说。Web前端教学精心打磨不断升级,车上的小盆友安全舒适,一起向着理想的工作前进着。快来!认真学前端,让代码为你铺开通往成功的路!