用代码怎么建设网站,梅花手表网站,vps 用ip可以访问网站么,无锡互联网公司排名#x1f6b4; 前言大厂面试题分享 面试题库后端面试题库 #xff08;面试必备#xff09; 推荐#xff1a;★★★★★地址#xff1a;前端面试题库#x1f3c4;利用碎片化的时间#xff0c;系统的整理#xff0c;性能优化的知识点。#x1f3af; 前端性能优化#xf… 前言大厂面试题分享 面试题库后端面试题库 面试必备 推荐★★★★★地址前端面试题库利用碎片化的时间系统的整理性能优化的知识点。 前端性能优化需要深入了解前端技术的原理。从而做出高性能的工程提高自身含金量。 使用流行的性能优化技术快速提高Web性能。了解技术背后的优秀设计思想掌握前沿解决方案。整理笔记的目的了解性能优化的关键环节知识储备的升级。掌握流行且成熟的多种性能优化技术。熟悉大厂必会生产级别的高性能解决方案。技术储备前端技术栈非常丰富。性能优化需要一定的技术储备1.掌握 HTMLJavaScriptCSSHTTP 基础知识2.具备实际Web开发经验3.最好使用过WebpackVueReactChrome DevTools 等性能优化的意义网站性能 影响到用户参与度和用户留存从而影响到转换率和业务收益。第一章 性能优化指标与测量工具重要性性能是Web网站和应用的支柱。Amazon 亚马逊网上购物商城发现每100ms延迟导致 1% 的销量损失。寻找性能瓶颈了解性能指标多块才算快利用测量工具和API优化问题重新测量迭代 优化是一个不断迭代的过程。移动端挑战多设备硬件网速屏幕尺寸交互方式。用户更缺少耐心超过3秒加载导致53%的跳出率。持续增长的移动用户和移动电商业务。譬如电商网站的搜索速度关键词 bounce rate跳出率是指在只访问了入口页面例如网站首页就离开的访问量与所产生总访问量的百分比。跳出率计算公式跳出率访问一个页面后离开网站的次数/总访问次数性能指标和优化目标 打开浏览器控制台切换至 NetWork 选项卡可以看到各种资源的加载时间通过 Waterfall 可以看到每个阶段的用时。譬如TTFBTime To First Byte请求发送出去直到返回响应结果经历了多少时间。关键词 TTFB (Time To First Byte)是发出页面请求到接收到应答数据第一个字节的时间总和。它包含了DNS解析时间、 TCP连接时间、发送HTTP请求时间和获得响应消息第一个字节的时间 切换至 Lighthouse 选项卡显示网站性能分数。其中有几个指标First Contentful Paint 从白屏到出现内容Speed Index 速度指数如果比4秒小网站就是快的。否则就是需要优化的。页面加载时间首次渲染 切换至 Performance 选项卡ctr shift p 调出指令窗口输入 frame选择 Show frames per second (FPS) meter直接通过FPS视窗查看页面的帧数异步请求在1秒之内返回数据。超过1秒前端增加加载动画。总结性能优化-加载测量指标Speed Index 速度指数TTFB (Time To First Byte)发出页面请求之后接收到应答数据的第一个字节这段时间的总和。页面加载时间页面所有资源加载完成所用的时间。首次渲染第一次出现内容的时间。性能优化-交互交互动作的反馈时间交互的反馈要及时。帧率FPS 帧率要足够高60FPS异步请求的完成时间尽量在一秒之内完成。完成不了加载动画。RAIL测量模型RAIL以用户为核心的性能模型谷歌从用户体验触发制定了性能优化的标准 RAILRAIL是四个英语单词的首字母缩写1.Response 响应网站给用户操作的响应的体验2.Animation 动画网站动画是否流畅。如果卡顿需要优化3.Idle 空闲合理地应用浏览器空闲时间4.Load 加载页面加载时间是最常见的性能话题RAIL的目标让良好的用户体验成为性能优化的目标RAIL的评估标准1.Response 响应用户操作后 100 毫秒内要得到响应2.Animation 动画每一帧的渲染在 16 毫秒内完成3.Idle 空闲尽可能增加空闲时间4.Load 加载在 5 秒内完成内容加载并可以交换性能测量工具在优化的路上发现问题解决问题。性能测量工具可以帮助我们发现问题。Chome DevTools 开发调试性能评测Lighthouse 网站整体质量评估WebPageTest 多测试地点全面性能报告 使用 WebPageTest 评估Web网站性能www.webpagetest.org/WebPageTest 提供了世界各地的服务器和各种浏览器。解读 WebPageTest 的报告1.waterfall chart 请求瀑布图2.first view 首次访问3.repeat view 二次访问使用Lighthouse分析性能安装 lighthousenpm install -g lighthouse
复制代码测试网站性能lighthouse https://www.bilibili.com/复制代码Lighthouse 除了分析性能还有给出了优化建议。使用 Chrome DevTools 分析性能ctr shift p 调出指令窗口输入 block选择 Show Network request blocking添加过滤的js文件过滤掉的默认不加载。切换至 Network 选项卡各种资源的大小Size 有两个实际的大小和网络传输的大小。可以通过压缩js文件减少网络传输的大小。 切换至 Performance 选项卡点击录制按钮开始录制新内容。页面所发生的的一切包括交互都会被记录下来。方便进行性能分析。常用的性能测试API譬如计算可交互时间window.addEventListener(load, function() {// 可交互时间let timing performance.getEntriesByType(navigation)[0];// 计算let tti timing.domInteractive - timing.fetchStart;
});
复制代码譬如判断页面隐藏还是显示let vEvent visibilitychange;
if(document.webkitHidden ! undefined) {vEvent webkitvisibilitychange;
}
document.addEventListener(vEvent, function() {if(document.hidden || document.webkitHidden) {console.log(页面隐藏);} else {console.log(页面显示);}
});
复制代码譬如监听当前网络状态// 判断当前网络状态let connection navigator.connection || navigator.mozConnection || navigator.webkitConnection;
connection.addEventListener(change, function() {let type connection.effectiveType;console.log(当前网络状态type);
});
复制代码通过性能API可以获得关键的时间节点DNS 解析耗时: domainLookupEnd - domainLookupStart
TCP 连接耗时: connectEnd - connectStart
SSL 安全连接耗时: connectEnd - secureConnectionStart
网络请求耗时 (TTFB): responseStart - requestStart
数据传输耗时: responseEnd - responseStart
DOM 解析耗时: domInteractive - responseEnd
资源加载耗时: loadEventStart - domContentLoadedEventEnd
FirstByte时间: responseStart - domainLookupStart
白屏时间: responseEnd - fetchStart
首次可交互时间: domInteractive - fetchStart
DOMReady 时间: domContentLoadEventEnd - fetchStart
页面完全加载时间: loadEventStart - fetchStart
http 头部大小 transferSize - encodedBodySize
重定向次数performance.navigation.redirectCount
重定向耗时: redirectEnd - redirectStart
复制代码第二章 渲染优化首先需要了解浏览器渲染原理。通过了解浏览器渲染都经历了哪些步骤才能有针对性的进行优化。核心概念关键渲染路径 critical rendering path浏览器渲染到底是一个什么样的过程网络资源譬如js文件和css文件进行解析最终渲染到页面上。浏览器的渲染流程1.第一步触发视觉变化不局限于js有可能是css样式的改变animation等等2.第二步浏览器对样式重新进行计算计算哪些元素的css改变3.第三步布局把元素绘制到页面上需要知道元素的大小和位置几何信息。4.第四步绘制把元素画到页面上包括文字图片颜色阴影等等5.第五步合成浏览器把不同的东西画在不同的层上然后合成到一起当浏览器拿到服务器返回的资源之后它都做了些什么 浏览器构建对象模型构建DOM对象 文档对象模型HTML DOM 构建CSSOM对象CSS CSSOM 浏览器构造渲染树DOM CSSOM》 Render Tree 布局和绘制关键渲染路径中最重要的两个步骤也是开销最高的步骤。减少布局和绘制的发生可以有效地提高性能。 渲染树只包含网页需要的节点布局计算每个节点精确的位置和大小 - “盒模型”绘制是像素化每个节点的过程哪些操作会导致布局更改从而造成所谓的回流 reflow添加删除元素操作stylesdisplay:noneoffsetLeftscrollTopclientWidth移动元素位置修改浏览器大小字体大小核心就是位置和大小的改变。避免 layout thrashing 布局抖动连续不断的布局回流很容易造成页面抖动卡顿。 1.避免回流采用css3动画 translate 属性积攒一些之后统一计算 2.读写分离读的操作进行完再批量的进行写的操作读读取布局信息。写修改样式。使用 FastDom 批量对DOM的读写操作FastDom通过接收读写操作并在下一帧捆绑它们(先读后写)从而消除DOM的相互影响。 这意味着我们能独立编写应用程序组件而不用担心它们在应用程序中互相影响github地址示例地址measure 读的操作mutate 写的操作fastdom.measure(() {console.log(measure);fastdom.mutate(() {console.log(mutate);});
});
复制代码输入fastdom.measure(() {console.log(measure);
});fastdom.mutate(() {console.log(mutate);
});fastdom.measure(() {console.log(measure);
});fastdom.mutate(() {console.log(mutate);
});
复制代码输出measure
measure
mutate
mutate
复制代码复合线程与图层将页面拆分图层进行绘制再进行复合。修改一个图层的东西不影响其他图层。利用 DevTools 可以了解网页的图层拆分情况。减少重绘利用 DevTools 识别 paint 的瓶颈使用动画的时候尽量使用transform利用 will-change 创建新的图层高频事件处理函数 防抖let ticking false;if(ticking)return;
window.requestAnimationFrame((){callback()ticking false;
})
复制代码第三章 代码优化JavaScript的开销和如何缩短解析时间开销在哪里加载解析编译执行。解决方案Code splitting 代码拆分按需加载Tree shaking 代码减重减少主线程工作量避免长任务避免超过1kb的行间脚本使用 rAF 和 rIC 进行时间调度V8 浏览器引擎已经做了一些优化抽象语法树编译过程会进行优化运行时可能发生优化了解V8优化机制开发中运用这种思想V8优化机制1.脚本流下载过程中超过30kb时单独开一个线程进行解析。最后合并所有解析完的内容。2.字节码缓存重复使用的片段缓存起来就不再需要翻译的过程3.懒解析需要用到时再进行解析利用 Optimize.js 优化初次加载时间github地址对象优化 1.以相同顺序初始化对象成员避免隐藏类的调整classRectArea t {// HCOconstructor(l, w){this.l l; // HC1this.w w;// HC2}
}
const rect1 newRectArea(34)
const rect2 newRectArea(56)
复制代码 2.实例化后避免添加新属性//尽可能避免这种写法// In-object 属性const object {color:red}
// Normal/Fast 属性存储 property store 里需要通过描述数组间接查找产生
object.num 1复制代码 3.尽量使用Array代替 array-like 对象//不推荐这种写法Array.prototype.forEach.call(arrObj, (value, index) { // 不如在真实数组上效率高console.log(value)
})
复制代码 V8 官方建议将类数组对象转换为真实数组然后进行遍历。这样操作效率更高。const arr Array.prototype.slice.call(arrObj, 0);
arr.forEach((value, index) { console.log(value)
})
复制代码数组优化 1.避免读取超过数组的长度在 JavaScript 中除了基础数据类型都是对象包括数组也是对象。如果数组越界undefined 会沿着原型链进行查找。 2.避免元素类型转换元素类型越具体编译器能做的优化就越多// 这样操作会影响编译器的效率const array [3,2,1]; // PACKED SMI_ELEMENTS
array.push(4.4);//PACKED DOUBLE ELEMENTS复制代码HTML优化HTML 优化空间比较小。优化点在于清除没有用的空间和可以省略的元素。1.减小 iframe 使用额外添加的文档需要加载的过程会影响父文档的加载。而且使用iframe开销更高。//使用这种写法父文档加载后再给iframe设置src加载资源
iframe ida/iframe
document.getElementById( a ).setAttribute( src,url);
复制代码2.压缩空白符 打包时压缩空白符3.避免节点深层级嵌套 生成抽象语法树嵌套的越深遍历越慢4.避免table布局 使用不灵活开销更大5.删除注释减少体积6.CSS 和 JavaScript 尽量外链7.删除元素默认属性借助工具 html-minifier html压缩工具github地址npm install html-minifier
复制代码var minify require(html-minifier).minify;
var result minify(p titleblah idmoofoo/p, {removeAttributeQuotes: true
});
result; // p titleblah idmoofoo/p复制代码CSS对性能的影响1.降低CSS对渲染的阻塞尽早的完成下载譬如优先完成首屏的样式加载2.利用GPU进行完成动画对 transform 和 opacity 这样的属性进行优化单独建立一个层。不进行布局和重绘。3.使用 contain 属性contain 属性大大降低了布局的时间。浏览器不会重新计算同级其他元素。.news li {contain: layout;
}
复制代码4.使用font-display属性font-display属性在font-face声明时使用。借助它我们可以通过一行简单的CSS来控制字体的显示方式而不需要使用基于JavaScript的解决方案。这意味着我们的网页可以减小体积提高性能。以Vue项目举例代码优化1.代码模块化封装组件代码复用。通过css预加载处理器定义css变量和混入mixin。2.for循环设置key值for循环数据遍历渲染的时候每一项设置唯一的值。为了让Vue内部核心代码能更快地找到该条数据当旧值和新值取对比的时候可以更快的定位到diff3.Vue路由懒加载当首屏渲染的时候能够加快渲染速度。4.更加理解Vue的生命周期不要造成内存泄漏使用过后的全局变量在组件销毁后重新置为null5.可以使用keep-alivekeep-alive是Vue提供的一个比较抽象的组件用来对组件进行缓存从而节省性能。第四章 资源优化资源的压缩和合并一直以来资源的压缩和合并都是最为有效的优化方案。1.减少http请求数量2.减少请求资源的大小HMTL压缩1.使用在线工具进行压缩html-minifier.bchrt.com/2.使用 html-minifier 等npm工具github.com/kangax/html…CSS压缩1.使用在线工具进行压缩css-minifier.bchrt.com/2.使用 clean-css 等 npm 工具github.com/clean-css/c…JS压缩与混淆1.使用在线工具进行压缩2.使用Webpack对JS在构建时压缩CSS JS 文件合并1.若干小文件。这种情况可以采用2.无冲突服务相同的模块。这种情况 优先考虑3.优化加载。这种情况不考虑图片优化的方案图片格式的比较 JPG格式压缩比高画质可以很好的保存色彩感好使用场景譬如首页轮播图缺陷边缘粗糙logo一般不会使用 JPG PNG格式体积比较大一般用来做图标和logogithub.com/imagemin/im… WebP 谷歌提出的新的图片格式JPG一样的质量压缩比更高图片加载的优化 图片的懒加载1.原生的图片懒加载方案img src./example.jpg loadinglazy altzhangxinxu
复制代码2.第三方图片懒加载方案使用渐进式图片渐进式图片的解决方案 使用响应式图片srset 属性设置多个图片源根据屏幕宽度挑选合适的图片sizes 属性视窗宽度的百分比根据设备的 dpi 和视窗大小显示合适的图片字体优化字体未下载完成时浏览器隐藏或自动降级导致字体闪烁使用 font-display 属性第五章 构建优化项目构建的时候通过配置进行优化。webpack的优化配置代码拆分代码压缩持久化缓存监测与分析按需加载这次不展开讲先挖个坑。第六章 传输加载优化在 nginx上 配置 Gzip 压缩对传输资源进行体积压缩可高达 90%如何配置 nginx 启用 Gzipgzip on;
gzip_min_length 1k;
gzip_buffers 16 64k;
gzip_http_version 1.1;
gzip_comp_level 9;
gzip_types text /plain application /x-javascript text /css application /xml ;
gzip_vary on;
复制代码启用Keep AliveKeep Alive是在TCP中一个可以检测死连接的机制可以保持tcp长连接不被断开属于 tcp 层功能。HTTP1.1协议默认开启 keepa-live 保持长连接主要作用是提高对 tcp 连接的复用率减少创建连接过程给系统带来的性能损耗。HTTP标准中的一部分默认是开启的。相关参数的配置到达最优的体验。Request Headers 请求头中 Connection: keep-alive 表示开启了 Keep AliveHTTP资源缓存官方文档 developer.mozilla.org/zh-CN/docs/…Service Worker实现渐进式应用Service Worker作用1.加速重复访问2.离线支持使用 service-worker 可以缓存静态文件Service Worker注意1.延长了首屏时间但页面总加载时间减少2.兼容性service worker 在浏览器和移动端的兼容性如下图所示3.只能在localhost或https下使用HTTP/2加速传输HTTP/2优势1.二进制传输HTTP/1是基于文本的效率比较低而且不安全HTTP/2二进制编码安全而且提供了传输效率2.请求响应多路复用简而言之多个http请求可以共用同一个TCP连接。3.Server push 服务端主动推送html 页面包含 script.js 和 style.css 资源文件。客户端只需要请求page.html服务端发现html页面中包含资源文件会主动推送给客户端。减少客户端请求的次数。nginx开启HTTP2支持listen 443 ssl http2;
server_name www.orzr3.com;
复制代码搭建HTTP/2服务1.HTTP/2只能工作在HTTPS下需要创建签名证书2.适合较高的请求量比较高的请求量才能发挥他最大的作用SSR加速渲染SSRserver side render服务端渲染SSR的好处服务器把需要的组件或页面渲染成 HTML 字符串然后把它返回给客户端。客户端拿到手的是可以直接渲染然后呈现给用户的 HTML 内容1.加速首屏加载2.改善SEO 搜索引擎优化是否使用SSR?1.架构大型项目动态页面面向公众用户2.搜索引擎排名很重要第七章 其他的解决方案IconFont通过 iconfont 字体引入图标阿里矢量图库www.iconfont.cn/从 PNG 到 iconfont 的优点1.多个图标 》 一套字体减少获取时的请求数量和体积。2.矢量图形可伸缩3.直接通过 CSS 修改样式颜色大小等缺点单色彩SVG 解决方案从 IconFont 到 SVG 的优点1.保持了图片能力支持多色彩2.独立的矢量图形不像iconfont需要下载整套字体3.XML语法使用 FlexBox 优化布局display: flex;
flex-flow: row wrap;
复制代码页面渲染 rendering 和 painting 节省了不少时间性能明显提升。FlexBox 的优势1.更高性能的实现方案2.容器有能力决定子元素的大小顺序对齐间隔等。3.双向布局横向 row 和纵向 column大厂面试题分享 面试题库后端面试题库 面试必备 推荐★★★★★地址前端面试题库预加载优化资源加载的顺序资源优先级1.浏览器默认安排资源加载优先级先有 html 解析头部加载js和样式然后解析图片等资源。2.使用 preload 和 prefetch 调整优先级preload 优先加载举例通过 link 标签可以预加载图片headmetacharsetUTF-8titleWater/titlelinkrelpreloadhrefimg/product2.svgasimage //head复制代码prefetch 空闲加载后面会用到的东西。link relprefetchasstyle hrefproduct-font.css /
复制代码preload 和 prefetch 使用场景1.preload 提前加载较晚出现但是对当前页面非常重要的资源譬如图片和字体。2.prefetch 加载完当前页面之后提前加载后面路由需要的资源优先级低。预渲染预渲染的作用1.大型单页应用的性能瓶颈JS下载解析执行2.SSR的主要问题牺牲TTFB 请求过程来补救首次加载 First Paint 实现起来也很复杂3.Pre-rendering 打包时提前渲染页面没有服务端参与vue 预渲染npm install prerender-spa-plugin -D
复制代码配置 vue.config.js 和 修改main.js修改 vue.config.jsconst path require(path)
// 预渲染插件constPrerenderSPAPlugin require(prerender-spa-plugin)
constRenderer PrerenderSPAPlugin.PuppeteerRenderermodule.exports {configureWebpack: {plugins: [newPrerenderSPAPlugin({// 生成文件的路径与webpack打包一致即可staticDir: path.join(__dirname, dist),// 需要预渲染的路由routes: [/, /mine],renderer: newRenderer({inject: {foo: bar},headless: false,renderAfterDocumentEvent: render-event,})})]}
}
复制代码修改 main.jsnewVue({router,mounted() {document.dispatchEvent(newEvent(render-event))},render: h h(App)
}).$mount(#app)
复制代码修改路由模式为history构建成功后 dist 目录下根路径和需要预渲染的路径都生成了 index.html 文件。当浏览器访问这时服务器返回的就是对应 html 文件的内容。骨架组件使用骨架组件减少布局移动Layout Shift1.占位2.提升用户感知性能最后的话大厂面试题分享 面试题库后端面试题库 面试必备 推荐★★★★★地址前端面试题库
