Web性能问题

前端页面性能问题：

前端性能包括：网络层面、构建层面、服务端层面、浏览器渲染层面的优化
页面响应时间：白屏时间、首屏时间、网页加载时间、资源加载时间、整页加载时间

性能优化点背后的原理
谷歌优化：performs、 players工具

资源合并与压缩

减少http请求，以及http请求的资源大小

WEB前端：是指BS架构,讲项目发布到服务器

网络请求过程中的优化点：

• dns信息可以缓存，减少dns查询时间
• 网络请求：主要是使用cdn,请求静态资源,请求静态资源时cookie没有用处， cdn的域名最好不要与主站域名相同，否则会携带主站cookie,对网络资源是一个损耗， 浏览器会缓存相同静态资源，提高网络请求
• 多次请求是对网络环境的损耗，因此减少请求次数，也即减少网络损耗
• 减少http请求资源的大小
• 服务器端的渲染：前端在浏览器端渲染，不是直出的html,是一个损耗，在服务器端 进行html渲染，是一个优化点

深入理解http请求的过程是前端优化的关键

压缩

html压缩

超文本标记语言，编辑html中会添加空格、制表符、换行等无意义的符号，这在编辑的过程中，
或者html注释使得html易于阅读，但是在渲染html时是无用的。

压缩工具：
在线网站：手动压缩
nodejs提供html-minifier工具，需要配置：构建阶段或服务器端
后端模板引擎渲染压缩

css压缩

无效代码删除
css语义重复

压缩工具：
在线网站：手动压缩
html中的css使用html-minifier工具压缩
clean-css进行压缩

js的合并与混乱

无效字符的删除
剔除注释
代码语义的缩减优化：例如长的名称修改为短的
代码保护：因为语义明确的变量被压缩无意义的短名称，混乱代码的意义，
起到保护代码的作用

压缩工具：
在线网站：手动压缩
html中的js使用html-minifier工具压缩
uglifyjs2进行压缩

文件的合并
减少请求的个数，减少网络延迟的次数(每次请求都可能存在网络延迟)

存在的问题
首屏渲染问题：合并的文件过大，请求时间长，渲染慢
缓存失效的问题：当一个文件发生变更，合并后会导致文件大面积失效
解决方案
公共库合并与业务分开
不同页面需要的资源分别加载，加载该页面在加载当前页面的资源合并文件

根据情况灵活的使用合并

合并工具：
在线网站
使用nodejs

浏览器在同一个域名下并发请求的个数是有限的

比较好的构建工具，自动压缩
fis3
webpack