做网站利润/aso优化榜单
1、网络相关
- DNS 预解析
<link rel="dns-prefetch" href="//host_name_to_prefetch.com" />
复制代码- 缓存（见上文浏览器缓存机制）
- 使用 HTTP / 2.0
- 预加载 —— 可以将一些不影响首屏但重要的文件延后加载，能够降低首屏加载的时间，缺点是兼容性不好
<link rel="preload" href="http://example.com" />
复制代码- 预渲染 —— 将要下载的文件预先在后台渲染
<link rel="prerender" href="http://example.com" />
复制代码2、优化渲染过程
- 代码层面的优化（参考浏览器篇如何减少重绘和回流）
- 懒执行 —— 将某些逻辑放到使用时再进行，可以通过定时器或事件进行唤醒
- 懒加载 —— 将不关键的资源延后加载，如图片、视频资源等。
3、文件优化
图片优化：
- 可以用 css 模拟代替的尽量不要用图片
- 小图片用 base64 格式
- 雪碧图
- 选择正确的图片格式
- 选择使用 WebP 格式，体积较小，缺点是兼容性不好
- 小图使用 PNG ，图标类可以使用 SVG 代替
- 照片使用 JPEG
其他文件优化：
- CSS 文件放在
head中 - 服务端开启文件压缩功能
- 将 script 标签放在 body 底部，因为 JS 文件执行会阻塞渲染。
- script 文件异步加载
- defer：在 script 标签上加上 defer 属性，defer 是在 HTML 解析完之后才会执行，如果是多个，按照加载的顺序依次执行
- async：在 script 标签上加上 async 属性，async 是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关
- 对于需要很多时间计算的代码可以考虑使用 Webworker，Webworker 可以让我们另开一个线程执行脚本而不影响渲染。
- 使用CDN
4、其他
使用 Webpack 优化项目：
- 对于 Webpack4，打包项目使用 production 模式，这样会自动开启代码压缩
- 开启 tree shaking，移除没有用的代码
- 优化图片，对于小图可以使用 base64 的方式写入文件中
- 按照路由拆分代码，实现按需加载
- 给打包出来的文件名添加哈希，实现浏览器缓存文件
错误监控：
- 即时运行错误
- try...catch
- window.onerror
- 资源加载错误
- object.onerror
- 高级浏览器下的
performance.getEntries()可以获取已经加载完成的资源进而监控加载失败的资源
- 跨域的 js 运行错误 —— 在 script 标签增加 crossorigin 属性，然后设置 js 资源响应头 Access-Control-Allow-Origin
- 打包时生成 sourceMap 文件便于 debug
错误上报：
- 采用 Ajax 通信的方式上报
- 通过 img 标签的 src 发起一个请求。
5、简述一下你对web性能优化的方案？
1、尽量减少 HTTP 请求 2、使用浏览器缓存 3、使用压缩组件 4、图片、JS的预载入 5、将脚本放在底部 6、将样式文件放在页面顶部 7、使用外部的JS和CSS 8、精简代码
6、你所知道的页面性能优化的方法有哪些
压缩、合并，减少请求，代码层析优化。。。
7、前端开发的优化问题
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。