前端面试被问到性能优化该肿么办!
1.1 页面重构怎么操作?
网站重构: 在不改变外部行为的前提下, 简化结构, 添加可读性, 而在网站前端保持一致的行为.
也就是说是在不改变 UI 的情况下, 对网站进行优化, 在扩展的同时保持一致的 UI.
对于传统的网站来说重构通常是:
表格 (table) 布局改为 DIV+CSS
使网站前端兼容于现代浏览器(针对于不合规范的 CSS, 如对 IE6 有效的)
对于移动平台的优化
针对于 SEO 进行优化
深层次的网站重构应该考虑的方面
减少代码间的耦合
让代码保持弹性
严格按规范编写代码
设计可扩展的 API
代替旧有的框架, 语言(如 VB)
增强用户体验
通常来说对于速度的优化也包含在重构中
压缩 JS,CSS,image 等前端资源(通常是由服务器来解决)
程序的性能优化(如数据读写)
采用 CDN 来加速资源加载
对于 JS DOM 的优化
HTTP 服务器的文件缓存
1.2 什么叫优雅降级和渐进增强?
优雅降级: web 站点在所有新式浏览器中都能正常工作, 如果用户使用的是老式浏览器, 则代码会针对旧版本的 IE 进行降级处理了, 使之在旧式浏览器上以某种形式降级体验却不至于完全不能用.
如: border-shadow
渐进增强: 从被所有浏览器支持的基本功能开始, 逐步地添加那些只有新版本浏览器才支持的功能, 向页面增加不影响基础浏览器的额外样式和功能的. 当浏览器支持时, 它们会自动地呈现出来并发挥作用.
如: 默认使用 flash 上传, 但如果浏览器支持 html5 的文件上传功能, 则使用 HTML5 实现更好的体验;
1.3 前端性能优化的方法?
(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 要等其中的内容完全下载之后才会显示出来, 显示比 p+CSS 布局慢.
对普通的网站有一个统一的思路, 就是尽量向前端优化, 减少数据库操作, 减少磁盘 IO. 向前端优化指的是, 在不影响功能和体验的情况下, 能在浏览器执行的不要在服务端执行, 能在缓存服务器上直接返回的不要到应用服务器, 程序能直接取得的结果不要到外部取得, 本机内能取得的数据不要到远程取, 内存能取到的不要到磁盘取, 缓存中有的不要去数据库查询. 减少数据库操作指减少更新次数, 缓存结果减少查询次数, 将数据库执行的操作尽可能的让你的程序完成(例如 join 查询), 减少磁盘 IO 指尽量不使用文件系统作为缓存, 减少读写文件次数等. 程序优化永远要优化慢的部分, 换语言是无法 "优化" 的.
1.4 页面从输入 URL 到页面加载显示完成
注: 这题胜在区分度高, 知识点覆盖广, 再不懂的人, 也能答出几句,
而高手可以根据自己擅长的领域自由发挥, 从 URL 规范, HTTP 协议, DNS,CDN, 数据库查询,
到浏览器流式解析, CSS 规则构建, layout,paint,onload/domready,JS 执行, JS API 绑定等等;
详细版:
浏览器会开启一个线程来处理这个请求, 对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
调用浏览器内核中的对应方法, 比如 WebView 中的 loadUrl 方法;
通过 DNS 解析获取网址的 IP 地址, 设置 UA 等信息发出第二个 GET 请求;
进行 HTTP 协议会话, 客户端发送报头(请求报头);
进入到 Web 服务器上的 Web Server, 如 Apache,Tomcat,Node.JS 等服务器;
进入部署好的后端应用, 如 PHP,Java,JavaScript,Python 等, 找到对应的请求处理;
处理结束回馈报头, 此处如果浏览器访问过, 缓存上有对应资源, 会与服务器最后修改时间对比, 一致则返回 304;
浏览器开始下载 HTML 文档(响应报头, 状态码 200), 同时使用缓存;
文档树建立, 根据标记请求所需指定 MIME 类型的文件(比如 CSS,JS), 同时设置了 cookie;
页面开始渲染 DOM,JS 根据 DOM API 操作 DOM, 执行事件绑定等, 页面显示完成.
简洁版:
浏览器根据请求的 URL 交给 DNS 域名解析, 找到真实 IP, 向服务器发起请求;
服务器交给后台处理完成后返回数据, 浏览器接收文件(HTML,JS,CSS, 图象等);
浏览器对加载到的资源 (HTML,JS,CSS 等) 进行语法解析, 建立相应的内部数据结构(如 HTML 的 DOM);
载入解析到的资源文件, 渲染页面, 完成.
1.5 平时如何管理你的项目?
先期团队必须确定好全局样式(globe.CSS), 编码模式(utf-8) 等;
编写习惯必须一致(例如都是采用继承式的写法, 单样式都写成一行);
标注样式编写人, 各模块都及时标注(标注关键样式调用的地方);
页面进行标注(例如 页面 模块 开始和结束);
CSS 跟 HTML 分文件夹并行存放, 命名都得统一(例如 style.CSS);
JS 分文件夹存放 命名以该 JS 功能为准的英文翻译.
图片采用整合的 images.PNG png8 格式文件使用 尽量整合在一起使用方便将来的管理
最后给大家推荐一个免费的学习群, 里面概括移动应用网站开发, CSS,HTML,webpack,vue node angular 以及面试资源等.
对 Web 开发技术感兴趣的同学, 欢迎加入 Q 群: 864305860, 不管你是小白还是大牛我都欢迎, 还有大牛整理的一套高效率学习路线和教程与您免费分享, 同时每天更新视频资料.
最后, 祝大家早日学有所成, 拿到满意 offer, 快速升职加薪, 走上人生巅峰.
来源: https://www.2cto.com/kf/201809/780369.html