当前位置:首页 » 网页前端 » 前端浏览器优化
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端浏览器优化

发布时间: 2022-06-30 12:08:53

‘壹’ 如何进行前端优化

1.减少 HTTP 请求....

2.使用 HTTP2

3.使用服务端渲染

4.静态资源使用 CDN

5.将 CSS 放在文件头部,JavaScript 文件放 ...

6.使用字体图标 iconfont 代替图片图标

7.善用缓存,不重复加载相同的资源

8.压缩文件

9.图片优化

(1).图片延迟加载

(2). 响应式图片

(3). 调整图片大小

(4). 降低图片质量

(5). 尽可能利用 CSS3 效果代替图片

(6). 使用 webp 格式的图片

10. 通过 webpack 按需加载代码,提取第三库代码,减少 ES6 转为 ES5 的冗余代码

11. 减少重绘重排

12. 使用事件委托

13. 注意程序的局部性

14. if-else 对比 switch

15. 查找表

16. 避免页面卡顿

17. 使用 requestAnimationFrame 来实现视觉变化

18. 使用 Web Workers

19. 使用位操作

20. 不要覆盖原生方法

21. 降低 CSS 选择器的复杂性

(1). 浏览器读取选择器,遵循的原则是从选择器的右边到左边读取。

(2). CSS 选择器优先级

22. 使用 flexbox 而不是较早的布局模型

23. 使用 transform 和 opacity 属性更改来实现动画

24. 合理使用规则,避免过度优化

性能优化主要分为两类:

    • 加载时优化

    • 运行时优化

‘贰’ 前端面试时问到:怎么解决浏览器兼容性该怎么回答比较好

IE6/IE7对FE当然很不友好,但专业的FE决不应该因为这两个浏览器难处理就不处理了。假如用户需要,我的目标是在力所能及的情况下为用户提供最好的前端展现。兼容性的问题从来都不只是IE6/7的问题,各个手机、浏览器、版本的兼容性同样有各种各样的问题,比IE奇葩多了。我的经验是,每遇到一个坑爹问题,做这么几件事:确认触发场景,什么浏览器、版本、什么情况下会出现这个问题,做到稳定复现;找到问题原因,为什么会出现这样的问题(网上搜、自己琢磨甚至邮件问相应公司开发者等等都是可行的);确定解决法,有没有什么框架级的解决法,总之是定规范,避免类似问题;比如不使用某些属性;用某种布局方法规避一些问题等等;有没有什么临时的法可以快速绕过去?不是每次都有时间搞框架级的法来着。怎么hack过去把这些都积累起来,就会有用处。不要想着IE6、7没了就不用考虑浏览器兼容性问题,chrome/firefox、webkit的各种版本,手机的各种浏览器、各种终端都要处理浏览器兼容性问题,恩,对,偶尔还有flash来着。兼容各种终端、兼容各种分辨率、兼容浏览器都是兼容性问题,这是FE的命,得认。抱着让用户有最好体验的想法去做,收获更大。

‘叁’ 前端开发 怎么解决浏览器的兼容问题

一般兼容IE8和主流浏览器,IE8不支持css3新特性,主流浏览器你要了解它的DOM的差异