当前位置：文江博客话题详情

前端优化的手段都有哪些？

发布于 2022-09-01 16:32:58 字数 48 浏览 19 评论 0

如题，前端的具体优化手段都有哪些？国内是否能像Google一样，优化到那么快。

需要登录才能够评论，你可以免费注册一个本站的账号。

就是爱搞怪 2022-09-08 16:32:58

优化方向	优化手段
请求数量	合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
请求带宽	开启GZip，精简JavaScript，移除重复脚本，图像优化
缓存利用	使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存
页面结构	将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
代码校验	避免CSS表达式，避免重定向

冰魂雪魄 2022-09-08 16:32:58

1、使用CDN，使用CDN域名来加载图片、CSS、JS等静态资源

2、CSS压缩、JS压缩，合并，减少文件体积

3、dns-prefetch

4、减少http请求数，比如使用图片CSS_Sprite

5、缓存

6、script async 属性

CDN起了主导作用

残花月 2022-09-08 16:32:58

前面的答案都是从网络入手的。说几个对浏览器加载优化的：

玩世 2022-09-08 16:32:58

再怎么优化也比不上少放东西东西放多了一定会卡就算延迟加载也会卡一些东西何况一个首页也不是单页面app
google界面上除了一个搜索框没别的了
你要跟几大门户比光翻页就好几页翻不完外加一堆乱七八糟的广告这数据都不是一个量级的怎么比
图片描述

这是网易的首页你感受一下 343个请求我猜一大半用于广告和统计还有新闻的略缩图之类

我乃一代侩神 2022-09-08 16:32:58

提供一些浏览器加载部分的可能的优化选择：

可以用CSS3的transform/translate来替代margin实现布局。margin要求浏览器重新计算元素布局，而translate只是单个元素的render过程。
减少CSS选择符的层级。比如在写Less文件时，一个错误的习惯是嵌套写选择符，这样虽然在less组织代码的角度来看非常整洁层次化，然而生成出来的css文件内含有大量的多层次选择符，会影响前端效率。事实上建议减少css选择符层级。
而对于JavaScript的优化，重点是保证程序的逻辑代码是优化的，这完全取决于对业务逻辑的理解。除此之外，从技术角度来讲，模块化的JavaScript可以减少不必要的JavaScript加载，可以延迟JavaScript文件的加载。例如采取CommonJS的方式。
另外html模板在前端的使用非常普遍，可以把它放到js文件中预加载到客户端，减少了多次的请求。这个可以参考html2js:https://www.npmjs.com/package/html2js
最后，如果浏览器和Web服务器支持，可以尝试HTTP2协议，能合并减少大量的web请求。