前端的一些问题(1)

前端如何优化网站性能?

减少 HTTP 请求数量

在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信。
浏览器与服务器需要经过三次握手,每次握手需要花费大量时间。
而且不同浏览器对资源文件并发请求数量有限(不同浏览器允许的并发数不同),一旦 HTTP 请求数量达到一定数量,资源请求就存在等待状态

解决方法:

1.CSS Sprites:国内俗称 CSS 精灵,这是将多张图片合并成一张图片达到减少 HTTP 请求的一种解决方案,可以通过 CSS background 属性来访问图片内容。这种方案同时还可以减少图片总字节数。

2.合并 CSS 和 JS 文件:现在前端有很多工程化打包工具,如:grunt、gulp、webpack等。

3.采用 lazyLoad:俗称懒加载,可以控制网页上的内容在一开始无需加载,不需要发请求,等到用户操作真正需要的时候立即加载出内容。

控制资源文件加载优先级

浏览器在加载 HTML 内容时,是将 HTML 内容从上至下依次解析,解析到 link 或者 script 标签就会加载 href 或者 src 对应链接内容,为了第一时间展示页面给用户,就需要将 CSS 提前加载,不要受 JS 加载影响。
一般情况下都是 CSS 在头部,JS 在底部。
解决方法:

1.利用浏览器缓存

2.减少重排(Reflow):重排是 DOM 的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,浏览器会验证 DOM 树上的所有其它结点的 visibility 属性,这也是 Reflow 低效的原因。如果 Reflow 的过于频繁,CPU 使用率就会急剧上升。尽量使用 增加 class 属性,而不是通过 style 操作样式

3.图标使用 IconFont 替换

发布了19 篇原创文章 · 获赞 19 · 访问量 400

猜你喜欢

转载自blog.csdn.net/qq_41108972/article/details/104373000