前端优化清单（一）：之首屏优化

Nosee 发布于2019-08-26 11:50 / 513人阅读

摘要：前端性能优化清单前端优化项优化内容备注首屏首屏优化到，前端优化首选。首屏最小化首屏尽量小，控制节点数请求数外链数，可视区域尽快显示。首屏广告优化重点减少广告的下载次数，减少状态上报次数，避免。

前端性能优化清单：

前端优化项	优化内容	备注
首屏	首屏优化到0.5-2s，前端优化首选。	优化切入口，目标<2s
内容	图片、JS、Script、Flash等元素是页面和应用的主要构成，也是前端优化的重点。	网页元素过多
请求	页面元素的数量、加载文件的多少、大小，决定了页面的加载时间和效率。优化和规避请求。	域名数量和解析
CSS	页面样式，动画的实现，特效的实现，决定页面外在表现和交互效果。	静态页面布局
JavaScript	JS串行加载等特殊性，是影响页面性能的主要原因之一，而且比重大，无论大小、逻辑、数量都需严格控制。	性能杀手
图片	页面中，60%以上的请求和大小都是由图片构成，图片加载决定了页面加载的快与慢。	成本优化

首屏优化原则

首屏（above the fold）：名字来源（报纸）头版，原指报纸折叠之后仍能看见的页面。Web中只网站加载后，用户不用滚动屏幕所看到的所有信息。

首屏最小化：
首屏HTML尽量小，控制DOM节点数、请求数、外链数，可视区域尽快显示。

元素优化
优化落在首屏内的元素性能和结构，包括基础页、元素请求、图片、JS、是否调用第三方内容、层次机构等。

页面静态化
首屏页包含了页面基础页时间（第一次请求），以屏内的元素总的DNS解析时间，建立连接时间，SSL握手时间，发出请求时间，重定向时间，内容下载时间等。

基础页优化
以静态页面的形式存放，用户相关数据依赖Ajax，比如登录信息。用户默认显示未登录状态，异步获取到用户数据后更新。

首屏广告优化
重点减少广告JS的下载次数，减少状态上报次数，避免iframe。同时处理脚本放在页面底部，修改广告的载入顺序，避免影响页面显示。

首屏按需加载
隐藏tab页，用了异步加载的方式，只有当用户正在要看这块内容的时候才去拉取。

多带带合并素材
将代发布的源文件进行压缩合并，减少文件数量，授权请求最少原则。

统计代码优化
针对用户行为统计代码如（CNZZ，百度统计等），进行去除冗余，统一放到首屏后加载。

GPU服务器海外云主机前端优化网页前端优化前端页面优化前端代码优化

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

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

前端每周清单：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧

摘要：前端每周清单第期微服务实践，与，组件技巧，攻防作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。前端每周清单第 26 期：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧，HeadlessChrome 攻防作者：王下邀月熊编辑：徐川...

wall2flower 2019-08-21 11:55 评论0 收藏0
前端每周清单第 18 期：Firefox、Chrome、React、Angular发布新版本；提升R

摘要：本文即以简单的回归拟合为例，从最基础的库安装数据导入数据预处理到模型训练模型预测介绍了如何使用进行简单的机器学习任务。前端每周清单第 18 期：Firefox、Chrome、React、Angular发布新版本；提升RN应用性能的方法为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的 Web 前端入门与工程实践的前端每周清单系列系列；部分...

Lemon_95 2019-08-20 17:24 评论0 收藏0
前端每周清单半年盘点之 PWA 篇

摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于...

崔晓明 2019-08-20 19:01 评论0 收藏0
前端每周清单第 29 期：Web 现状分析与优化策略、Vue 单元测试、Headless Chrom

摘要：前端每周清单第期现状分析与优化策略单元测试爬虫作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清单第 29 期：Web 现状分析与优化策略...

HackerShell 2019-08-21 12:05 评论0 收藏0
前端开发清单

摘要：它基于前端开发人员多年的经验沉淀，以及其他优秀的开源清单。在上投票或推荐来帮助前端清单的推广。跨站点请求伪造防范清单跨站脚本攻击页面或网站没有攻击的可能性。原文地址：Front-End-Checklist 原文作者：David Dias 译者：JohnsenZhou 文章地址：https://github.com/JohnsenZhou/Front-End-Checklist...

W_BinaryTree 2019-08-30 13:49 评论0 收藏0