1. Tools for analyzing performance
-
google pageSpeed tools
-
it’s powerful tools that help us identify those best practices for performance. they also have an extension for chrome that evaluates performance then gives suggestions on how to improve it.
-
speed tracer
-
it's another great tool for identifying performance issues that we can also use as a chrome extension.
-
we can just use developer tools in browsers, like Chrome,
-
for example, the network tab and the chrome developer tools can be really useful for identifying those larger files that take a long time to load and we can see this in their timeline waterfall view.
2. how to improve website performance? / Biggest challenge
*** In terms of speed**
-
You can use PureComponent, React.memo to avoid unnecessary re-render.
-
PureComponent 的原理就是对props和state进行浅对比（shallow comparison），来判断是否触发渲染. 就相当于替你handle了shouldComponentUpdate.
-
can try to use the lazy loading of certain routes. And the react doesn’t support the server-side rendering.
-
The more HTTP request made to the server, the slower a website will be. so try to reduce HTTP requests as much as possible, likeusing CSS sprites for related icons. use Webp image, smaller size. we can also combine CSS and Js resources: because a single, larger CSS or Javascript file will load quicker than multiple CSS or Javascript files. use Server-side-rendering(SSR), the server will send a complete HTML file with data content to the client-side. which can speed up.
-
Optimize caching: Caching can store our resources in a temporary local location to improve performance. so it's much faster to load a resource from the local cache than to do another request to the server over the network. this is good for static files like CSS, images, JS, and more.
-
In the HTML file, you can put js files at the bottom right before the body close tag. Because JS can block HTML parsing, it’s better to make visible elements to load first.
-
Another way is trying to load the file in parallel, you can load non-core javascript in asynchronous ways, like using the “async” or “defer” attribute in the script element.
-
Because DOM operation is expensive, so make sure to manipulate the DOM node as less as possible, try to minimize reflow, there are several ways to minimize reflow:
-
specify
dimensions: it allows the browser to reserve space for the image before it downloads
-
minimize Dom depth: because the change in the Dom tree may also require a change all the way up to the parent element or down to the children and nearby elements. so every level of hierarchy we add causes more time used for reflow.
-
we should make our selectors easier, avoid complex selectors: because un-necessary complex selectors require more CPU power to do selector matching. Browsers have to parse a lot of selectors and elements from right to left. so it could cause the browser to do a lot more work than it needs.
-
use pre-fetching, it’s an html5 feature that enables the loading of pages and resources before the user requests them. the browser can download them ahead of time.
-
In terms of****packet size :
-
Also, we use the plugin to do code minification, like the UglifyJs plugin. You can also do the same thing to CSS and HTML files, like using CSS tidy to reduce un-used CSS selectors. Or you can use Kangax to strip out the comments, whitespace, or optional closing tag in the HTML file.
-
In react, we also tried to use more function component, use less class component
-
We also optimize images, like reduced image size, reduce unnecessary metadata of images, there are lots of tools that can do that, like CodeKit, TinyPNG.org, etc.
**3. image/**页面大量图片，如何优化加载，优化用户体验？
- 图片懒加载
- 可以使用CSSsprite，SVGsprite等技术
- 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。webp
- 如果图片展示区域小于图片的真实大小，应在服务器端根据业务需要先进行图片压缩，图片压缩后大小与展示一致
how could u keep high-quality in your code?
-
use more function components instead of class components. Because the function component is lighter than a class component. the class component has a lifecycle method and its own state. but the function component doesn’t have lifecycle hooks and their own states.
-
made sure each component had a simple logic and follow single responsibility because it would make the whole logic clear in our system and be easier to finish the unit test.
-
Use a linter to make our code easier to review, The linter which we follow mostly is ESLint but you can choose any one that suits your needs.
