前端优化

如果 2019 年技术圈有十大流行词，容器化肯定占有一席之地，随着 Docker 的风靡，前端领域应用到 Docker 的场景也越来越多，本文主要来讲述下开源的分布式图数据库 Nebula Graph 是如何将 Docker 应用到可视化界面中，并将 1.3G 的 Docker 镜像优化到 0.3G 的实践经验。 为什么要用 Docker 对于前端日常开发而言，有时也会用到 Docker，结合到 Nebula Graph Studio （分布式图数据库 Nebula Graph 的图形界面工具）使用 Docker 主要基于以下考虑: 统一运行环境：我们的工具背后有好几个服务组合在一起，诸如不同技术栈的现有服务，纯前端的静态资源。 用户使用成本低：目前云服务还在开发中，想让用户对服务组合无感，能直接在本地一键启动应用并使用。 快速部署：团队本就提供有 Nebula镜像版本 实践，给了我们前端一些参考和借鉴。 Docker 镜像的构建 既然要使用 Docker 来承载我们的应用，就得将项目进行镜像构建。与所有 build 镜像类似，需要配置一份命名为Dockerfile 的文件，文件是一些步骤的描述，简单来说就是把项目复制到镜像里，并设置好启动方式： # 选择基础镜像 FROM node:10 # 设置工作目录 WORKDIR /nebula-web-console #

课程介绍 高性能极致用户体验前端开发实战课程适合所有前端开发学习或者从业者，结合目前前端开发的最佳实践，提供前端网页性能分析优化知识，结合实际项目经验分析可以采用的优化思路，并给出开发高性能极致体验网页的通用方法和技巧。 课程官方博客： 前端学堂 在开始学习本课程之前，先提2个基本要求： 了解业务 作为一名合格的前端开发，我们的开发工作不是盲目的，我们的优化目标需要明确，所以首先要了解你所做的业务。不仅要知道整个业务背景，还需要了解业务需求，业务目的，最后最好能拿到业务结果。 了解业务的目的是能让你更好的分配开发的权重，合理安排开发的重点。比如开发的是视频类网站，那么开发的重点自然在于播放器加载和流畅播放以及降级方案。如果是天气类业务，那么核心业务是要保障稳定快速的展示出天气相关数据，然后是加载展示其他内容。如果是博文类网站，那么重点在于首屏的信息加载和展示。 了解用户 了解用户也是至关重要，如果连自己所做业务的受众都不知道，那么何谈用户体验，何谈极致性能？ 这一部分至少你要知道现在做的业务主要是面向PC用户还是移动web用户，PC用户所用的浏览器都是什么版本，比例分布是怎样？移动端用户android和ios比例多少，各自平台版本分布情况如何？这是最基本的要求，因为我们开发的代码是在这些平台运行的。 如果不知道怎么办？没关系，从今天开始统计起来，做个埋点日志服务

内容部分 1.尽量减少HTTP请求数 　　80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。 　　减少页面组件数的一种方式是简化页面设计。但有没有一种方法可以在构建复杂的页面同时加快响应时间呢？嗯，确实有鱼和熊掌兼得的办法。 　　合并文件 是通过把所有脚本放在一个文件中的方式来减少请求数的，当然，也可以合并所有的CSS。如果各个页面的脚本和样式不一样的话，合并文件就是一项比较麻烦的工作了，但把这个作为站点发布过程的一部分确实可以提高响应时间。 　　CSS Sprites 是减少图片请求数量的首选方式。把背景图片都整合到一张图片中，然后用CSS的 background-image 和 background-position 属性来定位要显示的部分。 　　图像映射 可以把多张图片合并成单张图片，总大小是一样的，但减少了请求数并加速了页面加载。图片映射只有在图像在页面中连续的时候才有用，比如导航条。给image map设置坐标的过程既无聊又容易出错，用image map来做导航也不容易，所以不推荐用这种方式。 　　行内图片（Base64编码） 用 data: URL模式 来把图片嵌入页面。这样会增加HTML文件的大小，把行内图片放在（缓存的

前端开发工程师不仅需要要跟 视觉设计 师、交互式设计师配合，完美还原设计图稿，编写兼容各大 浏览器 、加载速度快、 用户体验 好的页面。现在还需要跟SEO人员配合，调整页面的代码结构和标签。 一些成熟的平台，在开发初期并没有考虑优化问题，所以做出来的页面，就算是效果很炫，功能很强，但是对 搜索引擎 非常的不友善。任何一个成熟的网站，后期页面都是动辄几百万的，到这个时候再来调整结构，既费时又费力，最怕的还是会影响到排名和收录。 所以说与其在后期碰到问题再来调整，还不如把问题解决在源头。我本人也是从事 前端开发 工作的，下面把我工作过程中，积累的几个开发过程中就需要做好的SEO优化技巧，分享给大家。 1、简化代码结构，更利于 搜索引擎 分析抓取有用内容： 页面尽量采用DIV+CSS，当然， 表格 展现模式用table还是比div方便很多的；所有js、css采用外联方式，图片采用 css 精灵，减少请求次数。看下下面同样的内容，用div和talbe布局的代码比较，显而易见用div简便的多。 2、重要内容优先加载 （第一个链接最好是网站主关键词，不刻意要求），可以用 css 来处理，索引一篇文章的长度也是有限制的，一定要把最重要的内容，优先展现给蜘蛛，这方面你可以通过查看一些比较大的网页快照来求证。 3、每个页面只能出现一次H1标签，H2标签可以多次： H1权重很高

优化代码 分离app.js中的功能代码 由于只想在app.js中引入一些模块，做一些基础的配置工作，并不想把实现具体功能的代码写在这个文件中，所以要把功能代码从app.js文件中分离出去。 例如，把 app.use('/admin', 请求处理函数) 中app.use()保留，而把第二个参数，即请求处理函数，分离出去。 在blog文件夹下新建一个middleware的文件夹，再在这个文件夹之下新建一个loginGuard.js，存放登录拦截的代码。 把请求处理函数剪切进去，并起名 const guard = 挪进来部分 。 此时loginGuard.js是一个模块，在默认情况下，模块外部是访问不到的。所以要把这个方法通过 module.exports = guard; 暴露出去。 在外部引入这个模块的时候，会直接得到guard这个方法。所以，app.js中，直接 app.use('/admin', require('./middleware/loginGuard')); 可以看到，未登录状态下登录拦截功能依然奏效，说明代码没有问题。 优化admin.js中的代码 在一个真实的项目中，路由有非常多，如果把所有的代码都放置在admin.js中，那么这个文件就会变得非常非常的庞大。所以接下来要继续对当前文件进行优化。 把admin.js变成路由列表，把路由处理代码，即路由方法的第二个参数

一：静态资源优化： ①：合并css,js文件，制作雪碧图，减少http的请求次数； ②：静态资源cdn的分发；客户端可以通过最佳网络链路加载静态页面。 ③：js,css文件压缩，图片压缩，减少请求返回的数据量。 ④：静态资源缓存机制。 二：接口优化： ①：接口合并； ②：首屏合并，同构。 三：页面渲染速度优化： ①：css放在顶首：优先； ②：js放在底部：避免阻塞； ③：减少DOM元素数量； ④：img标签要宽高：减少重绘排版。 来源： https://www.cnblogs.com/zyb99812/p/12179744.html

一、关于页面加载速度： 1、一般我们将CSS,JS文件通过外链的方式引入页面，当这些外链数量过多，那相应HTTP请求次数也要增加，这里我们尽量合并CSS,JS文件夹，压缩一些不需要后期维护的CSS,JS代码，CSS文件推荐压缩成单行显示，方便后期维护，也可减小代码体积。 2、使用css sprites技术制作精灵图，通过背景定位方式在前台页面显示。将小图片合并成大图片的目的是为了减少HTTP请求次数，减少页面加载时间。 3、对于页面常用的图标，且后期不需要经常修改的图标，我们采用阿里矢量图标,阿里矢量图标库地址为： 阿里矢量图标 4、优化代码结构，减少不必要的代码嵌套，删除多余空标签，剔除多余CSS代码，对于重复使用率高的CSS代码，我们要学会对其封装，如每个模块都会有一个大标题或小标题，可以将其封装到.title类名中。减少重复代码量。 5、设置浏览器缓存，对于刚入行的新人来说，一看到这个词就脑壳发蒙，百度里找来找去还是没明白，我这里是通过设置服务器根目录的.htaccess文件，来进行浏览器缓存，不懂得同学可以直接复制以下代码进行测试。 <IfModule mod_expires.c> #设置浏览器缓存 ExpiresActive On ExpiresByType image/x-icon A2592000 ExpiresByType image/icon A2592000

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> # 前端工程——基础篇 > 喂喂喂，那个切图的，把页面写好就发给研发工程师套模板吧。 你好，切图仔。 不知道你的团队如何定义前端开发，据我所知，时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位，虽然身份之争多少有些无谓，但我对这种偏见还是心存芥蒂，酝酿了许久，决定写一个系列的文章，试着从工程的角度系统的介绍一下我对前端，尤其是Web前端的理解。 只要我们还把自己的工作看作为一项软件开发活动，那么我相信读过下面的内容你也一定会有所共鸣。 ## 前端，是一种GUI软件 现如今前端可谓包罗万象，产品形态五花八门，涉猎极广，什么高大上的基础库/框架，拽炫酷的宣传页面，还有屌炸天的小游戏……不过这些一两个文件的小项目并非是前端技术的主要应用场景，更具商业价值的则是复杂的Web应用，它们功能完善，界面繁多，为用户提供了完整的产品体验，可能是新闻聚合网站，可能是在线购物平台，可能是社交网络，可能是金融信贷应用，可能是音乐互动社区，也可能是视频上传与分享平台…… > 从本质上讲，所有Web应用都是一种运行在网页浏览器中的软件，这些软件的图形用户界面（Graphical User Interface，简称GUI）即为前端。 如此复杂的Web应用，动辄几十上百人共同开发维护，其前端界面通常也颇具规模

相对于桌面端浏览器，移动端Web浏览器上有一些较为明显的特点：设备屏幕较小、新特性兼容性较好、支持一些较新的HTML5和CSS3特性、需要与Native应用交互等。但移动端浏览器可用的CPU计算资源和网络资源极为有限，因此要做好移动端Web上的优化往往需要做更多的事情。首先，在移动端Web的前端页面渲染中，桌面浏览器端上的优化规则同样适用，此外针对移动端也要做一些极致的优化来达到更好的效果。需要注意的是，并不是移动端的优化原则在桌面浏览器端就不适用，而是由于兼容性和差异性的原因，一些优化原则在移动端更具代表性。 一、网络加载类 1．首屏数据请求提前，避免JavaScript文件加载后才请求数据 为了进一步提升页面加载速度，可以考虑将页面的数据请求尽可能提前，避免在JavaScript加载完成后才去请求数据。通常数据请求是页面内容渲染中关键路径最长的部分，而且不能并行，所以如果能将数据请求提前，可以极大程度上缩短页面内容的渲染完成时间。 2．首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化 由于移动端网络速度相对较慢，网络资源有限，因此为了尽快完成页面内容的加载，需要保证首屏加载资源最小化，非首屏内容使用滚动的方式异步加载。一般推荐移动端页面首屏数据展示延时最长不超过3秒。目前中国联通3G的网络速度为338KB/s（2.71Mb/s）

PC 浏览器前端优化策略 PC 端优化的策略很多，如 YSlow（YSlow 是 Yahoo 发布的一款 Firefox 插件，现 Chrome 也可安装，可以对网站的页面性能进行分析，提出对该页面性能优化的建议）原则，或者 Chrome 自带的 Audits 等，总结起来主要包括网络加载类、页面渲染类、CSS 优化类、JavaScript 执行类、缓存类、图片类、架构协议类等几类，下面逐一介绍。 网络加载类 1．减少 HTTP 资源请求次数 在前端页面中，通常建议尽可能合并静态资源图片、JavaScript 或 CSS 代码，减少页面请求数和资源请求消耗，这样可以缩短页面首次访问的用户等待时间。通过构建工具合并雪碧图、CSS、JavaScript 文件等都是为了减少 HTTP 资源请求次数。另外也要尽量避免重复的资源，防止增加多余请求。 2．减小 HTTP 请求大小 除了减少 HTTP 资源请求次数，也要尽量减小每个 HTTP 请求的大小。如减少没必要的图片、JavaScript、CSS 及 HTML 代码，对文件进行压缩优化，或者使用 gzip 压缩传输内容等都可以用来减小文件大小，缩短网络传输等待时延。前面我们使用构建工具来压缩静态图片资源以及移除代码中的注释并压缩，目的都是为了减小 HTTP 请求的大小。 3．将 CSS 或 JavaScript 放到外部文件中，避免使用