-
性能优化——资源的合并与压缩
资源的合并与压缩资源的合并与压缩分为两种：（1）减少http的请求数量 （2）减少请求资源的大小。 html压缩压缩html是一种常见的方式，就和webpack压缩js脚本一样，他可以将一些对代码执行不造成影响的空格、制表符、换行符等，还有一些特殊意义的字符，比如注释等。都可以经过压缩从而减小html的体积。也就相当于减少了请求资源的大小。如何进行html压缩？ 使用在线网站进行压缩（不推荐） nodeJs提供html-minifier工具、webpack（推荐）...…
-
重绘与回流
CSS性能让JavaScript变慢？在真实的浏览器中，JavaScript引擎和CSS引擎（或是说UI引擎）是位于连个不同的线程中的，虽在不同进程之中，但是两个引擎是并不能并行执行的，执行Js那么页面的样式渲染就会受到阻塞，渲染样式，那么Js的执行就会是受到阻塞。在浏览器渲染页面的过程中，这两个引擎可能不断地切换执行权。为什么要这样设计浏览器呢？原因非常简单，因为js在执行的时候可能会获取一些css属性，如果css属性发生变化的同时js去获取，那获取到的css是无意义的，因为js获取的c...…
-
CSS与JS的装载与执行
一、一个网站在浏览器端是如何渲染的？在我们输入域名之后，浏览器会向服务器请求资源，而HTML文件则是我们最先请求回来的资源。在请求回来之后，HTML本身会由字节流转换为字符流。在浏览器中拿到的就是字符流。然后浏览器利用htmlparser进行词法分析，将相应的词法分析成语法的token，然后对这些token会进行nexttoken的方式添加到DOM树中去。词法分析的是由上到下的，也就是说从html-> body ->…。在html词法解析的时候遇到如link的时候，浏览器就会并...…
-
懒加载与预加载
懒加载一般都是对于图片而言，第图片进行懒加载处理。也就是说当图片滚动到视口中时，将img的src属性填上，这时候浏览器就会在图片出现在视口中时才会进行http请求。一般情况下，img的图片链接会储存在data-origin的DOM特性中。需要的时候把data-origin值拿出来赋值给src特性。然后在移除data-origin属性。代码实现：预加载预加载的应用场景与懒加载正好相反，预加载是在网络空闲的时候提前加载好我们需要的图片。等到需要的时候就会直接从内存中取出，这样可以优化用户体验。...…
-
图片相关的优化
图片上的选择png图片使我们做网站的时候最常用的图片格式之一。png的类型又主要分为三种： png8 ——256色 + 支持透明 每一个颜色值的索引只需要2\^8个比特 Png24 —— 2\^24色 + 不支持透明每一个颜色值的索引需要2\^8个比特，每一个颜色的长度是png8的3倍。并且不支持透明。 Png32 —— 2\^24色 + 支持透明在png24的基础上为每个颜色值的索引增加了8比特去让它支持透明。 虽然颜色的索引越多图片就会更清晰，颜...…
-
浏览器储存
一、浏览器储存各种方式因为试验品不好找，之后补上。实在不行截图视频，详情见性能优化7-4cookie实现用户信息存储很多网站都是通过服务端种cookie的形式将cookie种到用户的浏览器中。这样在之后的每一次的http请求中，都可以将cookie中的信息携带在请求头中，以便于服务端可以直接通过请求头得到用户信息。但是这种方式并不适用于任何场景，虽然他更加的方便于前后端交互，但是不分文件的请求都携带上cookie是一种浪费！比如一些静态文件：js、css、图片….他们根本不需要请求头中携带...…
-
缓存
之前我们提到了很多关于浏览器存储的缓存策略，在很多业务场景中，尤其是大规模系统中，我们是希望资源可以被自动缓存，而不是我们通过localStorage等方式手动进行缓存。那么这种情况下，我们就需要浏览器端和服务器端共同协商一种方式来实现对于大规模数据缓存的情况。为了看清楚我们要研究的问题到底是什么，我们先来看看实际应用场景中的一些例子：这是手淘中Network中截取的一些信息，可以看到，有一些文件的状态吗是304，有些文件的状态码是200，这些被圈住的状态码为200的文件的Size处显示’...…
-
White-space的使用
今天写项目的时候遇见了一个问题，感觉这个问题我以前遇到过而且很简单的就解决了，但是如今又碰到了这个问题却忘记了。当我们想要一个父元素的宽度固定时，里面的元素就会尽可能的占满一行，如果内容太多一行装不下就会自动换行，但是有些时候我们不希望换行，这时候我们就需要white-space这个属性了；我想要实现一个点击左右箭头可以滑动的时间轴。上面代码实现的效果是这样子的，注意white-space被注释了。呈现的效果如下:上图中，绿色边框是父元素，固定了宽高，里面的红色边框是子元素，同样也固定了宽...…
-
关于vertical-align踩的坑
这个问题遇到很多次了，今天又遇到了，虽然有了之前的经验，这个问题一看就明白了，但是今天也做个笔记吧。首先需要声明的是，这个属性是应用与某个子元素的，而非父元素。比如说这样一个场景：有许多行内元素的div，这些div都是position:relative；当这些div中没有其他行内元素或行内块状元素的时候，你把他们都相对移动到了一个想要的完美的地方。这时候你打算想这些div中加入一些行内元素或者行内块状元素，比如说不同长度文本，然而加入文本之后你会发现之前完美的布局崩了，而且高度越大的文本就...…
-
onmouseover和onmouseenter的实验
时间长了，有点忘记onmouseenter和onmouseover的一些技术细节了，只记得一些关键的区别，就是他们对于子元素是否触发，之前有一段时间还特意研究过，这里重新做实验，算是拾遗。对应关系onmouseenter和onmouseleave对应onmouseover和onmouseout对应实验准备 Html + CSS + JSOnmouseenter首先是onmouseenter：控制台只打印了一次，说明onmouseenter是一个只被会父元素，而不会被其中的子元素触发。与o...…
-
Css Css3 3d Transform
CSS3 3D变换layout: posttitle: CSS3 3D变换date: 2019-09-19tag: html&&css—首先推荐一个大佬博客文章：https://www.cnblogs.com/shenzikun1314/p/6390181.html↑ 总结非常全面。 CSS3 3D具有的属性和方法 3D的属性比2D多 2D属性只有2种： Transform: Transform-origin: 3D 属性有6种： Tr...…
-
webpack环境变量的使用方法
webpack环境变量的使用方法环境变量是用方式非常简单，他可以让我们在不配置mode的情况下区分环境。我们可以将项目中的webpack.dev.js和webpack.prod.js作出改变，去掉merge，也去掉对webpack.common.js的引入。说白了，我们是为了只是用一个配置文件就可以使用与不同的环境。直接导出配置对象即可。就像这样：然后在webpack.common.js中引入merge。并加入这样的代码：还没完，既然使用了env环境变量，那么就要在需要的地方传入env：这...…
-
打包css
一、css-loader和style-loader打包css文件webpack是不默认如果想要打包.css文件，我们就需要借助css-loader就需css-loader(先)和style-loader（后），我们先安装它：Npm install style-loader css-loader –save-dev配置如下：其中css-loader是用来解析.css文件用的，在解析完成之后，他会把解析过的内容交给style-loader，style-loader就会在index.html的h...…
-
Webpack多页面打包配置
Webpack多页面打包配置虽然现在大多数webpack的应用场景都是单页面应用（SPA），但是也有一些时候会需要多页面打包的需求。也就是说，SPA项目中只有一个index.html，而在多页面里就会有很多html文件。那该如何使用webpack生成多个html文件？操作很简单，我们需要几个页面，就在plugins里配置html-webpack-plugin几次即可，别忘记因为不同的页面可能需要不同的js文件，因此，entry的配置也需要改变：以下场景为例，加入我们需要生成一个index....…
-
Webpack HMR自动修改js效果
Webpack HMR自动修改js效果上次说道HMR修改css文件可实时的反应当前页面渲染而不作出任何的浏览器刷新。但是对于Js文件就无法做到这一点。那么这次就专门对js的HMR作出探究。一、js默认HMR无效的例子同样是打开HMR，如果修改了Js代码是不会自动改变的。实验过程如下：1、部署基本逻辑TIP:为了清晰的描述不刷新浏览器的过程，特引入了count()方法，他的作用是点击7000上面的那个数字会自动递增。现在点击了13次，显示蜀滋味13。如果此处刷新浏览器13将重置为0。2、修改...…
-
webpack浏览器缓存
webpack浏览器缓存用户第一次访问页面的时候，会加载页面所要的资源，并存在缓存里，下次用户再次访问同样的页面的时候就会从缓存中读取数据。浏览器读取页面缓存的方式是通过比较两次文件的名称是否一样，这也就造成了，如果修改代码，不修改文件名，就很可能让用户在下次访问网页的时候错认为没有发生变更。为了解决这个问题，我们可以借助webpack提供给我们的contenthash，核心原理就是给outputfile的命名加一个contenthash，这个contenthash在当我们的代码发生变化的...…
-
Webpack如何打包多个文件
Webpack如何打包多个文件如何打包多个文件？先来看看多次打包同一个文件，这样就会受到启发。如果不指定output中的filename。那么entry打包出的文件名就默认使用对应的出口键名。这里的就是main和sub。entry如果只设置一个路径，不指定键名，那么默认就是main。正确的操作应该是这样有些时候，我们可能把打包完成的js文件上传到一个cdn中，想要利用cdn中的静态资源。这时候打包后的html文件的script的src如果还是直接引用当前目录下的内容肯定不靠谱。（打包好的j...…
-
WebpackDevServer实现请求转发
WebpackDevServer实现请求转发先来看一个例子：这是一个React组件，我们使用了axios发送了一个ajax请求。这个请求的接口是一个json文件，因为服务器那边设置了允许跨域发送请求，所以不必纠结为什么跨域还能请求得到数据的问题。打开控制台我们可以看到返回的结果：现在考虑一下开发环境的问题，因为在实际开发中，我们请求的后端接口可能只是用于测试的接口，在打包上线的时候需要请求线上的接口，说白了，就是我们的ajax请求的接口可能随时更换，因此我们通常使用一个相对url来充当万能...…
-
如何在webpack中编译.vue文件
如何在webpack中编译.vue文件如果我们希望书写的是Jsx文件，那么我们就需要为babel安装一些插件，然后使用babel来便以这些Jsx文件。使用babel-loader编译jsx为了能让babel-loader可以编译jsx，我们需要引入一个核心插件babel-plugin-transform-vue-jsxcnpm下载并安装它：然后修改.babelrc来引入这个插件。为webpack.config.js增加rules;以便让webpack可以打包编译.jsx文件然后我们可能还需...…
-
CSS模块化
CSS模块化一、为什么我们需要模块化CSS一般情况下css都是全局性的。如果仅仅在index.js一样引用.scss文件，会使所有文档内容都受到这个scss文件中的样式影响。举个例子：假如现在在index.js的同级目录下新建一个avatar.js编写avatar.js在index.js中引用createAvatar方法:很明显，由scss引入的css样式就同时会作用于这两个图片。但是我并不希望这样，我希望在不为两个图片设置不同类名的情况下，也不修改scss的选择器。这时候就应该打开css...…
