资讯专栏INFORMATION COLUMN

【前端优化】常见前端性能优化

malakashi / 1003人阅读

摘要:引擎执行完毕,控制权交还渲染引擎,恢复解析网页。对于内联脚本无作用即没有属性的脚本。协商缓存步骤总结请求资源时,把用户本地该资源的同时带到服务端,服务端和最新资源做对比。

资源压缩 减少HTTP请求 静态资源压缩

html:压缩空格、换行、注释等字符 Webapack — html-webpack-plugin

css:无效代码删除,语义合并(相同样式代码) Webpack css-loader

js:无效字符删除、剔除注释代码语义的缩减和优化 Webpack — UglifyJSPlugin

图片优化方案:

雪碧图

小文件 使用base64 webpack base64-inline-loader

图片压缩网站

svg

资源合并

弊端:

首屏渲染问题,合并文件太大,造成慢。

缓存失效问题 标记 md5戳 只要有一个变动 则失效 a,b,c三个js合并

规则:公共库合并,不同页面的各自合并。异步加载组件,不同页面多带带打包,监听路由变化,自动下载

实现:gulp插件梳理工作流/webpack配置loader和plugin

非核心代码异步加载

正常网页的加载流程:

浏览器一边下载 HTML 网页,一边开始解析。也就是说,不等到下载完,就开始解析。

解析过程中,浏览器发现

网络请求的过程走最近的网络环境,解决网络拥堵。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110055.html

相关文章

  • WEB前端性能优化常见方法

    摘要:前端是应用服务器处理之前的部分,前端主要包括等各种资源,针对不同的资源有不同的优化方式。常见方法合并多个文件和文件,利用整合图像,使用在实际的页面嵌入图像数据,合理设置缓存等。 web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式。 内容优化 (1)减少HTTP请求数:这条策略是最重要最有效...

    miracledan 评论0 收藏0
  • 参加第二届前端开发者年度大会总结

    摘要:代表公司去参加今年的第二届前端开发者年度大会,散会的时候,技术老大问我,今天感觉怎么样,有什么收获,当时就零零碎碎的回答了一些,不算完美趁着还记得点什么,在这里做个自我回顾总结,谨代表个人见解,有不当之处,或若涉及图片隐私或者其它问题,烦请 代表公司去参加今年的 第二届前端开发者年度大会,散会的时候,Team 技术老大问我,今天感觉怎么样,有什么收获,当时就零零碎碎的回答了一些,不算完...

    solocoder 评论0 收藏0
  • 大型网站性能监测、分析与优化常见问题Q&A

    摘要:后端和移动性能优化需要的时间较长,出成果较慢。大型网站上,一般通过什么方式监控性能的用户端主要是真机监测监测,都属于真实用户监测。目前主要有以下两种类型,,最终用户性能监测。,,真实用户性能监测。 showImg(https://segmentfault.com/img/bVAbWm);@tanwen110 (唐文),曾负责腾讯四大平台之一网络媒体平台的整体运维、运营规划工作;曾任百度...

    Lavender 评论0 收藏0
  • 前端资源系列(4)-前端学习资源分享&前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0

发表评论

0条评论

malakashi

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<